--- title: "🥄 A faster alternative to Storybook" publication: "React Status" issue: 281 published_at: "2022-03-23" canonical_url: "https://react.statuscode.com/issues/281" --- Plus spicy takes on hooks, and the performance boost a Next.js upgrade can bring. | #​281 — March 23, 2022 [Read on the Web](https://react.statuscode.com/issues/281) React Status ⚛️ Your weekly React news digest, _every Wednesday_. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/lnxbvkafp9jm51n4ixzd.jpg)](https://reactflow.dev/) [React Flow 10: For Creating Interactive Node-Based UIs, Editors, and Diagrams](https://reactflow.dev/) — Although we covered this in [issues 235](https://react.statuscode.com/issues/235) and [187](https://react.statuscode.com/issues/187), a new [major release](https://github.com/wbkd/react-flow/releases/tag/10.0.0) 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](https://reactflow.dev/blog/react-flow-v10/) provides a good overview. Webkid GmbH [Everything You Need To Know About the React 18 RC](https://www.telerik.com/blogs/everything-need-know-react-18-rc) — React 18 remains imminent with a [third release candidate](https://www.npmjs.com/package/react/v/18.0.0-rc.3) 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 [![\](https://copm.s3.amazonaws.com/d52404e9.png)](https://buttercms.com/react-cms/?utm_source=reactstatus&utm_medium=email&utm_campaign=numberone) [🧈 ButterCMS Melts into Your React App. #1 Rated Headless CMS](https://buttercms.com/react-cms/?utm_source=reactstatus&utm_medium=email&utm_campaign=numberone) — 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](https://liqvidjs.org/blog/2022/03/13/liqvid-2-1/) — The new version now lets you use the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_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](https://www.remotion.dev/) is another option to consider in this space focused more on rendered video. Yuri Sulyma 🔥 [Hooks Considered 'Harmful'](https://labs.factorialhr.com/posts/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](https://news.ycombinator.com/item?id=30753127) on Hacker News. Pau Ramon Revilla [Introducing Ladle: Develop and Test Your React Stories Faster](https://www.ladle.dev/blog/introducing-ladle/) — 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](https://nextjs.org/learn/foundations/about-nextjs) for anyone who wants to pick up the prerequisite knowledge for working with Next.js. Jobs [React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-react&utm_content=react) — 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)](https://arc.dev/get-featured?campaign=1&utm_source=newsletter&utm_medium=job-post&utm_campaign=paid2022&utm_term=20220323&utm_content=React-Status) — 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](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-reactstatus%29&utm_content=find-your-next-job) — 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](https://www.telerik.com/blogs/how-to-create-validate-react-form-hooks) — There are libraries to abstract away a lot of this work (e.g. [Formik](https://formik.org/)) but if you want to do it by hand, as it were. Thomas Findlay [Writing a React Table of Contents Component](https://blog.eyas.sh/2022/03/react-toc/) — 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](https://vercel.com/blog/upgrading-nextjs-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](https://pierrehedkvist.com/posts/react-state-url) Pierre Hedkvist 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/y0s6sejeq6drq1yosjri.jpg)](https://tomsouthall.com/blog/turnstone) [Turnstone: A React Search Component](https://tomsouthall.com/blog/turnstone) — 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](https://github.com/mozmorris/react-webcam) — 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?](https://kontent.ai/how-to-choose-headless-cms/?utm_source=reactstatus&utm_medium=cooperpress_newsletter&utm_campaign=q3_newsletter_cooperpress) Kontent by Kentico sponsor [react-map-gl: Interactive, Thoroughly Customizable Maps in the Browser](https://github.com/visgl/react-map-gl) — A React API for the capable and mature [mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js) library, which was first created by Uber’s visualization team. Want some demos? [Of course.](http://visgl.github.io/react-map-gl/examples) Vis.gl [Reactivated: The Easiest Way to Use React and Django Together](https://www.reactivated.io/) — One for the Pythonistas! Silvio Gutierrez [MDX 2.1: Use JSX in Markdown Documents](https://github.com/mdx-js/mdx) Compositor and Vercel ## ⚡️ Quick Bits: [react-spinner-animated](https://github.com/venushadilshan/react-spinner-animated) — A variety of different ‘spinners’ using novel animation effects. [react-form-stepper](https://github.com/M0kY/react-form-stepper) — Simple component for indicating progress in multi-step forms. [react-native-awesome-gallery](https://github.com/Flair-Dev/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](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom