#​242 — June 9, 2021

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday

The Plan for React 18 — The React team has penned a post outlining all of the exciting things on the roadmap for the forthcoming React 18 (due in its final form in at least several months' time - so no panic). Here’s a break down:

The React Core Team

Generating PDF from HTML in React Demo: Exporting Invoices — Learn how to handle a common exporting scenario: exporting documents (in our case, invoices) to PDF. You’ll export SVG elements (via charts) and see how to include components such as DropDowns in your generated PDF files. Check out the tutorial.

Progress KendoReact sponsor

▶  Why Is My React App Slow? — The latest episode of Smashing Magazine’s podcast covers React performance and Drew McLellan talks to JavaScript performance expert Ivan Akulov about what slows down React apps and what can be done about it.

Smashing Magazine Podcast podcast

Introducing Reactron — By enabling both the visualization and testing of individual components before they are incorporated into the completed page, Reactron encourages the use of TDD in the React development process.

Nathaniel Armstrong

How to Create a React Table Component with Resizable Columns — A two part series: this first part covers how to create a table component with the React Table Library, whereas the second part layers on resizing capability.

Robin Wieruch

How to Memoize with React.useMemo() — Improve the performance of your components by using memoization to avoid redundant, expensive, time-consuming function calls.

Dmitri Pavlutin


Senior Frontend Engineer (Berlin / Remote) — Want to join a small startup with a big growing potential (we double every year)? Feather is looking for a frontend engineer.

Find React Jobs with Hired — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now.

📘 Tutorials and Stories

The Modern Guide to React State Patterns — At one stage, you could basically just say ‘use Redux’ but there are so many options now and this guide flies through a few approaches.

Fredrik Strand Oseberg

Why React Hooks Cannot Be Conditioned — If you’re encountering the puzzling React Hook "useState" is called conditionally error, this provides a helpful explanation as to why.

Thomas Belin

How to Create a Jumping Text Input Label — A short tutorial on implementing this increasingly popular technique for labelling form fields. Not sure what a ‘jumping text input label’ is, exactly? There’s a CodePen demo for that.

Mikael Ainalem

[Free Download] Guide to Effective Feature Management — Learn feature management practices to accelerate release cycles and deploy every 6 hours, instead of every 6 weeks.

LaunchDarkly sponsor

Lessons on Writing JavaScript and React from ClojureScriptClojureScript is essentially a Clojure (the Lisp dialect and functional language) to JavaScript compiler and going down the functional path often leads developers to various epiphanies. Ryan is keen to share his experience.

Ryan Jerue

React SEO Strategies and Best Practices — Having your app emerge from all the search results background noise depends on it being efficiently indexed by Googlebot and other web crawlers. This article explains how your app is indexed by them and then provides techniques for optimization.

Vineet Markan

What You Should Learn before Learning React Native — If getting a cross-platform mobile app out there is your goal, it’s tempting to dive straight into React Native development. However, you might want to consider knocking off a few of these prerequisites first.

Vijit Ail

How to Create a Blog with Gatsby — Want a simple, focused objective to test drive Gatsby and re-platform your blog as part of the bargain?

Daniele Fontani

How to Programmatically Change a Route in Next.js
Flavio Copes

🛠 Code and Tools

supported by Okta

Boring Avatars: React Library to Generate Custom Avatars — Ranging from generic gradients to face-like creations, this library (GitHub repo) generates custom, SVG-based, round avatars from any username and color palette.

Boring Designers

Eleven Libraries to Take Your React App up a Notch — While these types of articles always reflect the author’s particular preferences, you’ll likely find something new and valuable in this collection.

Jeffrey Chiu

New Mobile Chat Kit From Stream

Stream sponsor

react-native-multithreading: Spin Off Blocking Calls to a Separate Thread — While JavaScript Interface (JSI) creates new opportunities, it comes with the possibility that some of the longer running calls might actually block the main thread.

Marc Rousavy

Twilio Video React App: Multi-Party Video Application — The explosion in video conferencing precipitated by COVID might incline you to try and get in on the action with a competing, upstart product of your own.


Lepton: Lean Code Snippet Manager Based on Github Gists — Simply use it as is, or as a starting point for your own project.


sweetalert2-react-content: Extends SweetAlert2 to React Elements — The WAI-ARIA-compliant replacement for JavaScript’s popup notifications can now provide alerts based on React content as well.


⚡️ Quick Bits:

Interesting projects which you may have missed: