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.

Facebook

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

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)

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

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