#233 — April 7, 2021

Read on the Web

React Status
Your weekly React news digest, every Wednesday

React Hook Form 7.0 — After two years of work, the latest version of this mature form library has dropped. It features strict typing, reduced package size and improved performance. Already a user? There's a v6 to v7 migration guide aimed specifically at you.

React Hook Form

▶  React Labs: A New Series of Deep Dives into React Core Team Research — A new video series which—for the first time—provides first-hand insight into the React Core Team’s research projects. The series kicks off with discussion of React Server Components which we first covered in-depth in 220 earlier this year. If, for some reason, you can't navigate the tweets in the main link, ▶️ here's a direct link to the YouTube playlist.

React Core Team

New Course: Production-Grade Next.js with Scott Moss — No matter if you’re making a blog, marketing page, or a full-stack app, Next.js has the tools you need. This detailed course runs through everything you need to build a production-ready, full-stack app.

Frontend Masters sponsor

How to Read React Errors — A practical tutorial on how to make sense out of some of the more obscure React error messages.

Dave Ceddia

Recoil 0.2 Released — Recoil is an alternative state management system being worked on at Facebook (though a different team to the React team itself). More info here.

Facebook Experimental

React Hooks for RxJS — Use hooks to interface with RxJS observables for managing sequences of events.

LeetCode Open Source

💻 Jobs

Wynter Is Looking for Developers to Join Its Research Panel — Give feedback on digital products and landing pages, get paid $15-$50 per survey. Low-key commitment, 10-15 mins per survey.

Wynter Research Panels

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

Making a React To-Do List with Redux Toolkit in TypeScript — We like it when a potentially abstract subject like state management is clearly illustrated with a concrete example. In this case, a tutorial which covers the use of Redux to implement a to-do list.

Brian Francis

The React Native Guide I Wish I Had: Environment and Stateless Components — This nicely complements the previous article as it takes many of the same ideas and adapts them to the React Native environment.

Benjamin Gowers

The Ultimate Guide to Building a UI Component Library (Blog Series) — TJ VanToll shares tips learned from 10+ years of working with web UI components to help you create a component library.

Progress KendoReact sponsor

▶  React Finland – Vodcast 2 – Accessibility — A super in-depth (~two hour) discussion of a11y issues with some surprising observations about how pervasive the need for more accessible applications has become.

React Finland

Setting Up Chakra UI in a Next.js Project — If the conversation above has inspired you to incorporate more a11y into your next app, Chakra UI can be a wise choice compared to the alternatives as Chakra had accessibility designed in from the beginning.

Nikit Singh

React Native Authentication Flow, the Simplest and Most Efficient Way — Everything you need to know to implement authenticated access including connection to an authentication API, persisting that data and a mechanism for notifying your app of authentication state changes.

Lucas Garcez

▶  React.js TypeScript Conditional Props — A benefit of TypeScript is the ability to catch errors before you get to runtime using the notion of Conditional Props—they are only set when another property has a specific, pre-determined value.

Bruno Antunes

🛠 Code and Tools

supported by Okta

Figma to React — If you have been taking advantage of Figma’s collaborative design capabilities, you may want use this online tool to automatically convert that into React code.


react-gsap: Components for the GreenSock Animation Platform (GSAP)GSAP is a popular animation system for the Web and this abstracts away its tween and timeline functions for use from React.

Jan Fischer

React Tinder Card: A Component for Swipeable 'Tinder' Style Elements — Of course, you don’t have to use this to create your own dating app, but for anything where you have a lot of ‘cards’ you want people to sort by swiping one way or the other.

Jakob Unnebäck

Observability Won’t Replace Monitoring (Because It Shouldn’t)

Lightstep sponsor

Split Grid: The Spiritual Successor to the Split.js Library — One of the better ways of optimizing the use of screen real estate is to split it into easily-resizable regions that can be adjusted on-the fly by the app’s users.

Nathan Cahill

superplate: A Comprehensive Front-End Boilerplate — It claims it’s the “front-end boilerplate with superpowers”. Even if that’s a stretch, at the very least it brings together a comprehensive suite of tools for your Next.js project.


react-native-mmkv: WeChat's Key-Value Storage Framework for React Native — With a billion (that’s with a ‘b’) users, WeChat’s requirements for efficiency and bulletproof reliablity are self-evident. Now you can take advantage of that battle-tested capability in your React Native apps. Boasts being "~30x faster than AsyncStorage."

Marc Rousavy

⚡️ Quick Bits:

Interesting projects which you may have missed: