A visual guide to useEffect
#271 — January 12, 2022
🗓 We’re back and ready for another fantastic year for React (though we’re going to take a quick look back at React Conf 2021 first). React 18 is only just around the corner, too – exciting times!
Peter Cooper and Terence Gannon — your editors
▶ A Recap of React Conf 2021 — React Conf took place online for the first time in 2021 and this is a fantastic summary of what took place along with videos of the talks and why you might watch some of them. The main keynote covered the state of concurrency, Suspense, server components, React Native, and more.
Jesslyn Tannady and Rick Hanlon
A Visual Guide to useEffect — We have featured previous instalments of the author’s Visual Guide to React Rendering series (see useMemo and Props for example) and now he turns his attention to useEffect. His illustration of these concepts through a series of GIFs is both clever and effective, particularly for visual learners. There’s also a visualization of how first class functions work if you want more.
Frontend Masters sponsor
Relay 13 Released: A Framework for Building Data-Driven React Apps — A way to avoid using imperative APIs for fetching data in React apps. Instead, you define your data requirements using GraphQL and Relay does the rest. The new Relay compiler is a big part of this release.
On React Project Layout — The author makes the case that the layout of the src directory should be more standardized, similar to the approach taken by the highly opinionated Ruby on Rails. Here is his proposal for making this directory something other than the ‘wild west’.
React Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
Senior Full Stack Engineer (Remote) — Invoca is looking for passionate developers to join our team. Help build something awesome with React, GraphQL and Ruby on Rails.
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.
How to Connect a React App to a Notion Database — A well written and easy to follow explanation.
Real-Time React Apps Using Watchables — The impetus for Shortwave’s creation of their open source watchable library was to address a small yet intractable requirement: for their app’s users to see updates to their email inbox without the need for a refresh. This article describes its use as well as potential application outside the original domain.
Tyler Rockwood (Shortwave)
Rethinking Modals Management in React
Nate Wang and Feng Xie (eBay)
Computed Properties in React vs. Vue
🛠 Code and Tools
Elf: ‘Magical’ Reactive State Management? — Another entrant in the busy React state management space, this one claiming to have ‘magical powers’?! (And a cute logo, to be fair.) The interactive demo on StackBlitz might help you decide if that’s actually the case.
ActiveMDX: More Easily Re-Use and Re-Purpose Documentation — For any domain—such as software development—which depends on accurate and up-to-date technical documentation, a classic pain point is keeping the various re-used chunks of content up-to-date. Based on MDX, this library offers the promise of keeping these documents in sync as the source document content evolves.
Rendition: Figma to React in One Click?
Caleb Ouellette and Robert Nowell
⚡️ Quick Bits:
Reacord — Create interactive Discord messages using React and the Discord API.
react-use-focus-trap — Ever tab through a modal and can’t find your way back?
react-google-calendar-api — Integrate your app with Google Calendar.
🥦 And on a health kick..
Calories-In: A New Year, A New You? — The perennial polesitter of New Year’s resolutions is losing weight or improving health in some way — often achieved by eating better. What better way to welcome in 2022, therefore, than a React powered meal planner..! Submitted by a React Status reader, you can check out a live version or watch a video demo.