#​270 — December 22, 2021

Read on the Web

🎄 Hi folks. It's the end of the year (for us, anyway) so we're looking back at 2021 with a roundup of the most popular items of the year, whether overall, or in terms of libraries and videos. You should find something useful here that skipped your attention at the time :-) Beyond that, have a happy new year and we'll see you back on Wednesday, January 12.
Peter Cooper and Terence Gannon — your editors

React Status
⚛️ Your weekly React news digest, every Wednesday.

The Top React Status Items of 2021

1.  The Tao of React: Design, Architecture & Best Practices — The topic of 'best practices' is a perennially popular one in the React world with so many ways to approach each problem. So it's no surprise this post covering a variety of principles and attitudes for productively building resilient React apps for the long term went down so well.

Alex Kondov

2.  React Architecture: How to Structure and Organize a React Application — The theme from the item above continues here ;-) Tania is always fantastic at explaining things, so we really liked her approach to explaining project structure, and it seems you did too.

Tania Rascia

New Course: Stay Productive Across Multiple Machines, Projects, and Technologies — Enhance your developer productivity with this detailed course on setting up your professional toolchain, covering Ansible, Dotfiles, Terminals, tmux, Bash, and more.

Frontend Masters sponsor

3.  Five Code Smells React Beginners Should Avoid — About to pull the trigger on your first big pull request for a high profile project? You should probably go through this checklist first. As an aside, if you're writing an article about React, this is the sort of headline that is catnip to readers, as long as you can deliver :-)

Jason Lee Hodges

4.  Top React Component Libraries (2021 Edition) — We're doing a separate list of top code and tools items below, but if you want a one-stop shop for component libraries, the folks at Retool released a 2021 update of their list of top React libraries.

Kevin White

5.  How To Write Better Functional Components in React — Five simple tips to help write optimized functional components that are more readable, each with its own sample code showcased with JSFiddle.

Bikash Paneru


React Frontend or Full-Stack Engineer at Uplift (US Consultancy) — Enjoy a flexible schedule while building web and mobile apps with modern technologies on a wide variety of projects.
Uplift Agency Ltd

Senior UX Developer — Sr. UX Developer working in React for the Liberty Mutual Design System. Can be based remote.
Liberty Mutual Insurance

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.

🛠 Top Code and Tools Links of 2021

Leva: A GUI Panel for React — A control panel that lets you set app properties via a nicely designed interface. Think useState but with a GUI. It just had an update a few days ago too and still actively developed :-)

David Bismut

Spectacle 7: A React and JSX-Based Presentation Library — Got a presentation coming up? Build your decks with JSX? A good way to get a feel for it is via the deck on its home page.


▶  Why It's Tricky to Build React Forms—But Not with KendoReact

Progress KendoReact videosponsor

React DnD 14.0: Utilities to Create Drag and Drop Interfaces — Build complex drag and drop interfaces while keeping your components decoupled.

Chris Trevino

REAFLOW: Node-Based Visualizations for React — If you have trees / diagrams of nodes to render and manipulate, this is an option. It’s best to hit up the demos to see how it works.


useStateMachine: The ½KB State Machine Hook — It only makes sense to bundle a state machine into a hook. We have featured a number of Cassio’s videos in the past, so it’s no surprise there’s a video walkthrough with examples which illustrate its use.

Cassio Zen

📺 Top Videos of 2021

▶  A Coding Interview with Dan Abramov — This was just two weeks ago, but Dan Abramov's brave ‘coding interview’ with Ben Awad was the runaway popular video of the year.

Ben Awad and Dan Abramov

▶  Ten React Hooks Explained, Plus Build Your Own From Scratch — If you still haven’t fully gotten on the React Hooks bandwagon and have just 13:14 to spare, this video is what you need. The narrator doesn’t take a breath: strap in, hang on and get ready to hit the pause button.


▶  Hook Traps: useEffect and Stale Closures
Cassio Zen

▶  From Figma to GitHub Using Anima
Ania Kubów

▶  React Router v6 - The No Nonsense Guide
Mitchel S

▶  What's New in React 18
evening kid