🥄 A faster alternative to Storybook

Plus spicy takes on hooks, and the performance boost a Next.js upgrade can bring. |

#​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.

This issue was curated by Terence C. Gannon and edited by the Cooperpress team. A Cooperpress publication. Change your email address or Stop getting this newsletter © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom