It’s the final React Status of 2022

#​319 — December 21, 2022

Read on the Web

The Best of React Status in 2022

This is the final issue of the year (we’re back on January 4, 2023) so we’re revisiting the most popular items of 2022. We’ve covered the main top items but with some breakdowns of other content too (e.g. videos). We hope you have a fantastic holiday season.
___
Peter Cooper, your editor

1: A Visual Guide to useEffect — Curiously, the most popular link came in the very first React Status of 2022. The author had created a series of Visual Guide to React Rendering posts (such as those on useMemo and props for example) and here he turned his attention to useEffect. There’s also a visualization of how first class functions work if you want more.

Alex Sidorenko

2: Can We All Just Admit React Hooks Were a Bad Idea? — The second most popular item was a ‘quick link’ but the topic was controversial enough to get a lot of people talking! Amy makes the (well presented!) argument that ‘React hooks were a bad idea.’ Like it or loathe it, you’ll certainly walk away with opinions of your own.

Amy Blankenship

The State Of Notifications Report – User Preferences — What is preventing us from designing a notification system that facilitates a better experience? Nobody wants to receive marketing notifications, but they are upset if they miss important notifications. We can do better.

courier.com sponsor

3: React Libraries for 2022 — The React ecosystem has become so big that the problem is more one of being spoilt for choice than not having what you need. If you’re selecting libraries for a new project, this list (which Robin has updated over the years) remains useful. Hopefully we’ll see a 2023 version!

Robin Wieruch

4: Why React Contexts Are Great (and Why We Didn’t Use Them) — Something can be good, but also not a great fit for every project. Allen explains where his team ran into problems with useContext.

Allen Janyska

5: Look for These React Trends in 2022 — At the start of the year, the author took a look at what he felt would be important in 2022. He did a pretty good job with Remix, server-side rendering, concurrent rendering, and behaviour testing all being much discussed topics through the year. Do a 2023 version, Chak!

Chak Shun Yu

✍️ We like posts that speculate about the future, look to growing trends, etc. so if you write anything like that about React, let us know.

🛠 Top Code and Tools

Cloudscape: A React Component Design System from AWS — Built for and used by Amazon Web Services, you currently get 69 components covering all the usual bases, opinionated guides to design best practices, and lots of demos.

Amazon Web Services

React Admin 4.x: An Admin Panel for B2B Applications — A framework for building browser-based ‘admin’ apps on the backend of your choice (REST, GraphQL, etc. or you can write your own adapter). There’s a demo if you want to see it live. MIT licensed, but does have a professional version too if support is required. GitHub repo.

Marmelab

With Retool, Ship Apps Fast with 100+ Production-Ready UI Components

Retool sponsor

Awesome React Components: A Curated List of.. Components — A thorough (and frequently updated) compilation of just over 500 components in all sorts of categories from rich text editors and menus to trees and the perennial date picker.

Miscellaneous

Playwright Can Now Test React, Vue.js or Svelte ComponentsPlaywright, Microsoft’s browser control library which “enables reliable end-to-end testing for modern web apps”, took an interesting step outside of its usual neighbourhood this year.

Microsoft

react-use: A Large Collection of Useful Hooks — A real grab bag covering things from tracking battery state and geolocation to setting favicons, debouncing, and playing videos.

Va Da

React Render Tracker: Discover Performance Issues Around Unintended Re-renders — A tool that presents the differences in component tree state over time so you can investigate what’s going on a little better.

Roman Dvornov

Plasmo: ‘It’s Like Next.js for Browser Extensions’ — A React and TypeScript oriented framework for building your own browser extensions complete with live-reloading, automated deployment to the main extensions marketplaces, and more.

Plasmo

You Focus on Code. Zigi Handles Your Workflow, Right from Slack — Zigi handles your day-to-day tasks from Jira & GitHub, and sends you actionable updates only when they’re relevant to you.

Zigi sponsor

react-float-menu: A Draggable, Smart Menu

Prabhu Murthy

Rodal 2.0: A React Modal with Animations

neverland

<ClickToComponent />: Instant Access to Component Source Code

Eric Clemmons

📺 Top Videos

▶  10 React Anti-Patterns to Avoid — A well presented 8-minute video that quickly goes through a variety of approaches to reconsider (or at least think twice about.)

Fireship

▶  Goodbye, useEffect? David Khourshid’s Presentation at ReactathonStately founder David Khourshid makes the case for using event handlers and state machines to simplify effects in React apps rather than using useEffect which many developers struggle with.

David Khourshid

AND THE REST:

React 18’s New State Hook You’ve Never Heard About from Jack Herrington.

The Story of React from ui․dev.

The Story of Concurrent React from ui․dev.

Creating F1 Style Graphics with Remotion from Jonny Berger.

Zen and the Art of Building a Gmail-like UI with React Native from Takuya Matsuyama.

Jobs

UX EngineerStimulus is a social platform started by Sticker Mule to show what’s possible if your mission is to increase human happiness. Join our engineering team.

Stimulus

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