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:

• Most React users can ignore these updates for now – the biggest changes are for library authors. Cassidy Williams has written an accessible 'Now what?' introduction if you do want to learn more, though.
• The first alpha of React 18 is available to try now. But don't rush – it's not for production use at all.
• A new Suspense-based server side rendering architecture.
• Automatic batching for fewer necessary renders.
• A Transitions API for keeping an app responsive even during large updates.
• The launch of a React 18 Working Group to enable invited members of the community to interact with the React team more directly through these public discussions.

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

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

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 ClojureScript — ClojureScript 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

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.

Twilio

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

CosmoX

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.

SweetAlert2