A visual guide to useEffect

#​271 — January 12, 2022

Read on the Web

🗓 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

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

▶  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.

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

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-helperReact 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

Leave a Reply

Your email address will not be published.