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.
Alex Sidorenko
New Course on State Machines with XState by David Khourshid — If you build large JavaScript apps and want to stop running into weird edge cases, you’ll want to learn state machines. Spend your time modeling app logic clearly and robustly.
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’.
Tommy Groshong
Jobs
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.
X-Team
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.
Invoca
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
How to Connect a React App to a Notion Database — A well written and easy to follow explanation.
Alex Eagleson
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)
The Only Two Custom React Hooks We Ever Really Use
Luke Hager
How To Prevent Unnecessary React State Update Re-Renders
Chak Shun Yu
Rethinking Modals Management in React
Nate Wang and Feng Xie (eBay)
Computed Properties in React vs. Vue
Jeremiah Shore
? Code and Tools
react-tree-graph: Render SVG Trees — A tree rendering component now in its seventh major release. Check out the demo as well as additional examples.
James Brierley
React-Grid-Layout — A draggable grid component similar to Packery or Gridster. The showcase demo as well as a series of focused demos illustrate its considerable capabilities.
RGL
Data Visualization Made Easy with ReactJS, Nivo, and InfluxDB
InfluxData sponsor
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.
Netanel Basal
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.
Jonathan Soeder
Markdown Editor 3.9: A Simple, React-Powered Markdown Editor with Preview
uiw
Rendition: Figma to React in One Click?
Caleb Ouellette and Robert Nowell
use-cannon 4.5: Physics Based Hooks for react-three-fiber
Poimandres
⚡️ Quick Bits:
Reacord — Create interactive Discord messages using React and the Discord API.
react-grid-heatmap — The popular heat map data visualization.
react-use-focus-trap — Ever tab through a modal and can’t find your way back?
react-query-helper — React Query goodness but made simpler and easier.
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.
Vladimir Angelov
