--- title: "React libraries for 2022" publication: "React Status" issue: 283 published_at: "2022-04-06" canonical_url: "https://react.statuscode.com/issues/283" --- Plus a shiny new React Native release, and te basics of creating your own hooks. | 🇺🇦 #​283 — April 6, 2022 [Read on the Web](https://react.statuscode.com/issues/283) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/fyqbbbil0al2majbxeww.jpg)](https://www.robinwieruch.de/react-libraries/) [React Libraries for 2022](https://www.robinwieruch.de/react-libraries/) — The React ecosystem has become so big — we routinely track over 1500 React-related libraries ourselves — the problem is more one of being spoilt for choice than _not_ having what you need. This list represents a sound place when selecting libraries for a new project and is an update of an older, popular list Robin put together. Robin Wieruch [![\](https://copm.s3.amazonaws.com/42e6819e.jpg)](https://frontendmasters.com/courses/cypress/?utm_source=reactstatus&utm_medium=email&utm_content=cypress) [Testing Your Web Apps with Cypress](https://frontendmasters.com/courses/cypress/?utm_source=reactstatus&utm_medium=email&utm_content=cypress) — Join Steve Kinney on this detailed course covering Cypress: A fast, easy way to write end-to-end tests for your client-side apps. Learn about the selector engine, test runners, assertion library, and more. Frontend Masters sponsor [Announcing React Native 0.68](https://reactnative.dev/blog/2022/03/30/version-068) — This is the first version to allow opt-in for the rather grand sounding [‘New React Native Architecture’](https://reactnative.dev/blog/2022/03/15/an-update-on-the-new-architecture-rollout), with support for the [Fabric](https://reactnative.dev/architecture/fabric-renderer) renderer and the [TurboModule](https://microsoft.github.io/react-native-windows/blog/2021/03/16/64updates#-turbomodules) system. React Native is, as Paul McCartney put it back in 1967, _“getting better all the time.”_ The React Native Core Team [How to Create a Custom Hook](https://www.robinwieruch.de/react-custom-hook/) — Every week we’re including links to a variety of hooks (see the ‘Quick Bits’ section in this issue, for instance) but if you’ve been wondering how you could create your own, Robin boils it down to the basics here. Robin Wieruch **Quick bits:** - [▶️ The latest episode](https://stackoverflow.blog/2022/04/05/episode-430-the-new-version-of-react-great-tools-for-learning-css-and-the-double-standard-for-female-engineers/) of the Stack Overflow podcast covered the release of React 18, among other things. - Keep hearing things about [Remix](https://remix.run/) but want a practical run through? How about [an hour long course on YouTube](https://www.youtube.com/watch?v=d_BhzHVV4aQ)? Jobs [Fullstack Developer](https://grnh.se/443f4bd53us) — Konrad is hiring Fullstack developers to join our team in building products for the world’s most exciting companies. Konrad Group [Senior Software Engineer at This Dot Labs (Remote, Worldwide)](https://www.thisdot.co/job/senior-software-engineer-javascript-remote) — Great benefits working in modern tech stacks and amazing clients such as Google, Meta, Twilio, Cloudinary, Roblox, and more. This Dot Labs [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 [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 [The What, When, Why and How of Next.js’ New Middleware Feature](https://www.smashingmagazine.com/2022/04/next-js-middleware-feature/) — A look at a new beta feature in Next.js 12.0: middleware. Sam Poder (Smashing Magazine) [How Does Shallow Comparison Work in React?](https://www.chakshunyu.com/blog/how-does-shallow-comparison-work-in-react/) — [Shallow comparison](https://reactjs.org/docs/shallow-compare.html) is a concept interwoven into React. It plays a key role in React’s internals without adequate explanation. This dives into the source and finishes with some useful takeaways. Chak Shun Yu [Build Your Own Markdown Editor with React and Codemirror 6](https://0xsuk.com/posts/2022-03-25-build-your-own-markdown-editor-with-react.js-and-codemirror-6/) 0xsuk [How to Build a Real-Time Updating Data Grid in React](https://www.telerik.com/blogs/how-to-build-real-time-updating-data-grid-react) — Uses KendoReact Data Grid. Carl Bergenhem [Understanding Referential Equality in React](https://blog.bitsrc.io/understanding-referential-equality-in-react-a8fb3769be0) Lakindu Hewawasam 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/mwmu3126p368ospiiv6s.jpg)](https://previewjs.com/) [Preview.js: Preview UI Components Instantly in Your IDE](https://previewjs.com/) — Namely, VS Code or JetBrain IDEs, out of the box. Compatible with components built for React and Vue. Zenc Labs Pty [Shoelace: 'A Forward-Thinking Library of Web Components'](https://shoelace.style/) — A collection of well designed every day UI components (buttons, drawers, inputs, menus, color pickers, and more) built in a framework agnostic way but with ‘first-class React support’ nonetheless. Cory LaViska [Preact 10.7.0 Released](https://github.com/preactjs/preact/releases/tag/10.7.0) — [Preact](https://github.com/preactjs/preact) is a fast, very light (3KB!) alternative to React with the same API, and used by all sorts of companies [including, recently, Etsy](https://www.infoq.com/news/2022/01/etst-migration-from-react-preact/). Preact Team [Tired of Asking Users to Enter Passwords in Your Applications?](https://getstream.io/blog/passwordless-authentication-react/?utm_source=ReactStatus&utm_medium=Newsletter_Content_Ad&utm_content=Developer&utm_campaign=ReactStatus_Apr2022_PasswordlessAuthentication) Stream sponsor [AgnosticUI: A Component Library for Numerous Frameworks](https://www.agnosticui.com/) — A set of components currently supporting React, Vue 3, Svelte and Angular, but you can make them work from vanilla JavaScript too. [Some examples](https://developtodesign.com/agnosticui-examples). Rob Levin [react-quick-pinch-zoom: Zoom and Drag any DOM Element with Multi-Touch Gestures](https://github.com/retyui/react-quick-pinch-zoom) — Suits mobile, naturally, but can also support mouse events on desktop. Want a demo? [Here you go](https://react-quick-pinch-zoom.netlify.app/). David Narbutovich ## ⚡️ Quick Bits: [useScrollbarWidth](https://www.robinwieruch.de/react-hook-scrollbar-width/) — Get the width of the scrollbar. [useLocalStorage](https://www.robinwieruch.de/react-uselocalstorage-hook/) — Store state in local storage. [REAVIZ 13](https://reaviz.io/?path=/story/docs-intro--page) — A D3.js-based React data visualization library. [react-use-size](https://github.com/thomasthiebaud/react-use-size) — A collection of hooks to measure things. [useCookie](https://github.com/tylerwolff/useCookie) — Hook for managing cookies. 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