It’s the final React Status of 2022
#319 — December 21, 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.
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.
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.
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!
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.
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.
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.
Playwright Can Now Test React, Vue.js or Svelte Components — Playwright, 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.
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.
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.
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.
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.
react-float-menu: A Draggable, Smart Menu
Rodal 2.0: A React Modal with Animations
📺 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.)
▶ Goodbye, useEffect? David Khourshid’s Presentation at Reactathon — Stately 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.
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.
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.