#​281 — March 23, 2022

Read on the Web

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

React Flow 10: For Creating Interactive Node-Based UIs, Editors, and Diagrams — Although we covered this in issues 235 and 187, a new major release warrants another look. Amongst the new features and improvements: sub-flows, touch device support as well as some new hooks and properties. This blog post provides a good overview.

Webkid GmbH

Everything You Need To Know About the React 18 RC — React 18 remains imminent with a third release candidate out just now. This post aims to prime you on what’s new so you won’t be at all surprised when the final drops.

Kathryn Grayson Nanz

🧈 ButterCMS Melts into Your React App. #1 Rated Headless CMS — ButterCMS is your content backend. Enable your marketing team to update website + app content without needing you. Try the #1 rated Headless CMS for React today. Free for 30 days.

🧈 ButterCMS sponsor

Liqvid 2.1: Create Interactive 'Liquid Videos' in React — The new version now lets you use the Web Animations API. It also includes a new useTime hook for prop-updating animation, improved usability as well as laying the groundwork for further future improvements. Remotion is another option to consider in this space focused more on rendered video.

Yuri Sulyma

🔥  Hooks Considered 'Harmful' — The author claims to “find a dozen of hooks-related problems every single week” and he has used that experience to present examples, workarounds and otherwise avoid the “rough edges of the API”. This led to quite a big discussion on Hacker News.

Pau Ramon Revilla

Introducing Ladle: Develop and Test Your React Stories Faster — A new tool for building and testing React components in an isolated environment. Reminds you of Storybook? Ladle aims to be a drop-in replacement but that offers faster performance all round (and, yes, there are benchmarks).

Vojtech Miksu

Quick bits:

  • The Next.js project has unveiled a new foundations course for anyone who wants to pick up the prerequisite knowledge for working with Next.js.

Jobs

React Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team

Senior React Developer (Remote) — Get featured directly to tech companies hiring React developers right now. Land an interview in as little as 24 hrs.
Arc

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.
Hired

How to Create and Validate a React Form with Hooks — There are libraries to abstract away a lot of this work (e.g. Formik) but if you want to do it by hand, as it were.

Thomas Findlay

Writing a React Table of Contents Component — Although a table of contents can improve UX by letting readers jump directly to their preferred content, the setup and maintenance of such a control can involve a lot of drudge work. So why not have the table of contents (almost) look after itself?

Eyas Sharaiha

Upgrading Next.js for Instant Performance Improvements — A case study of how the Vercel team brought a Next.js 8 demo up to Next.js 12 standards and saw huge improvements in the process.

Lydia Hallie

Storing State in the URL with React
Pierre Hedkvist

🛠 Code and Tools

Turnstone: A React Search Component — A fully customizable search box with autocomplete dropdown, typeahead, the ability to group results from multiple data sources, WAI-ARIA compliance and more. The main aim is for the easy combination of results for multiple data sources into a single field.

Tom Southall

React Webcam 7.0: A Component to Work with Webcams — Grab an image from a web cam, select a camera of your choice, etc.

Moz Morris

How to Choose A Headless CMS for Your Project in 2022?

Kontent by Kentico sponsor

react-map-gl: Interactive, Thoroughly Customizable Maps in the Browser — A React API for the capable and mature mapbox-gl-js library, which was first created by Uber’s visualization team. Want some demos? Of course.

Vis.gl

Reactivated: The Easiest Way to Use React and Django Together — One for the Pythonistas!
Silvio Gutierrez

MDX 2.1: Use JSX in Markdown Documents
Compositor and Vercel

⚡️ Quick Bits:

react-spinner-animated — A variety of different ‘spinners’ using novel animation effects.

react-form-stepper — Simple component for indicating progress in multi-step forms.

react-native-awesome-gallery — Performant, native-like and customizable gallery component.