--- title: "It's the final React Status of 2022" publication: "React Status" issue: 319 published_at: "2022-12-21" canonical_url: "https://react.statuscode.com/issues/319" --- So we cover the top items of the year, top videos, and top code/tools. | #​319 — December 21, 2022 [Read on the Web](https://react.statuscode.com/issues/319) Together with [![Courier logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_280,h_50/e_make_transparent/co_white,e_outline:7/clkuuoftwiz8z2xjnkhb.png)](https://www.courier.com/download-state-notification-report/?utm_campaign=cooper-press&utm_source=email&utm_medium=react-status-12-21-primary&utm_content=state-of-notifications) The Best of React Status in 2022 ![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/lultj1mgxlooihwwekpa.jpg) 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`](https://alexsidorenko.com/blog/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](https://alexsidorenko.com/blog/react-render-usememo/)` and `[props](https://alexsidorenko.com/blog/react-render-props/)` for example) and here he turned his attention to `useEffect`. There's also [a visualization of how first class functions work](https://alexsidorenko.com/blog/react-javascript-first-class-functions/) if you want more. Alex Sidorenko 2: [Can We All Just Admit React Hooks Were a Bad Idea?](https://t.co/CrQgQR947D) — 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 [![\](https://copm.s3.amazonaws.com/51652f4a.png)](https://www.courier.com/download-state-notification-report/?utm_campaign=cooper-press&utm_source=email&utm_medium=react-status-12-21-primary&utm_content=state-of-notifications) [The State Of Notifications Report - User Preferences](https://www.courier.com/download-state-notification-report/?utm_campaign=cooper-press&utm_source=email&utm_medium=react-status-12-21-primary&utm_content=state-of-notifications) — 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](https://www.robinwieruch.de/react-libraries/) — 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)](https://spin.atomicobject.com/2022/08/24/react-contexts/) — 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](https://www.chakshunyu.com/blog/what-you-should-definitely-look-out-for-in-react-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](https://remix.run), 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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/k82b7vv8id9ieiw63vrn.jpg)](https://cloudscape.design/) [Cloudscape: A React Component Design System from AWS](https://cloudscape.design/) — Built for and used by Amazon Web Services, you currently get [69 components](https://cloudscape.design/components/overview/) covering all the usual bases, opinionated guides to design best practices, and [lots of demos.](https://cloudscape.design/demos/overview/) Amazon Web Services [React Admin 4.x: An Admin Panel for B2B Applications](https://marmelab.com/react-admin/) — 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](https://marmelab.com/react-admin-demo/#/login) if you want to see it live. MIT licensed, but does have a professional version too if support is required. [GitHub repo](https://github.com/marmelab/react-admin). Marmelab [With Retool, Ship Apps Fast with 100+ Production-Ready UI Components](https://retool.com/use-case/react-components?utm_source=sponsor&utm_medium=newsletter&utm_campaign=reactstatus) Retool sponsor [Awesome React Components: A Curated List of.. Components](https://github.com/brillout/awesome-react-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 Components](https://github.com/microsoft/playwright/releases/tag/v1.22.0) — [Playwright](https://playwright.dev), 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](https://github.com/streamich/react-use) — 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](https://github.com/lahmatiy/react-render-tracker) — 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'](https://github.com/PlasmoHQ/plasmo) — 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](https://www.zigi.ai/?utm_campaign=cooperpress&utm_medium=newsletter&utm_source=React-Status) — 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](https://github.com/prabhuignoto/react-float-menu) Prabhu Murthy [Rodal 2.0: A React Modal with Animations](http://chenjiahan.github.io/rodal/) neverland [: Instant Access to Component Source Code](https://github.com/ericclemmons/click-to-component) Eric Clemmons 📺 Top Videos ▶[10 React Anti-Patterns to Avoid](https://www.youtube.com/watch?v=b0IZo2Aho9Y) — 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 Reactathon](https://www.youtube.com/watch?v=HPoC-k7Rxwo) — [Stately](https://stately.ai) 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](https://www.youtube.com/watch?v=GMeQ51MCegI) from Jack Herrington. - [The Story of React](https://www.youtube.com/watch?v=Wm_xI7KntDs) from ui․dev. - [The Story of Concurrent React](https://www.youtube.com/watch?v=NZoRlVi3MjQ) from ui․dev. - [Creating F1 Style Graphics with Remotion](https://www.youtube.com/watch?v=sA-X0Bw_7Gg) from Jonny Berger. - [Zen and the Art of Building a Gmail-like UI with React Native](https://www.youtube.com/watch?v=w-M9UFHLAl0) from Takuya Matsuyama. Jobs [UX Engineer](https://www.stimulus.com/jobs/1b111606-78e4-4c4b-b7a1-472439bbc5ec) — [Stimulus](https://www.stimulus.com/jobs) 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](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 This issue was curated by Terence C. Gannon and Peter Cooper 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