React Newsletter #257

An update on Suspense, a new Next, and a guide to state management


This week’s issue is sponsored by Codesmith.

Free coding workshops that teach you some of JavaScript’s most important yet often misunderstood features. Go under-the-hood of Async, Callbacks, Closures and other advanced coding concepts, learn engineering best practices and develop technical communication skills.

👉 Join the Upcoming Free Workshops


News

Dan Abramov comments on Suspense and ConcurrentMode

Tl;dr - the team can see the light at the end of the tunnel, there aren't any large "unknown unknowns" anymore, and work has shifted to ecosystem compatibility.

Next.js v10.1 Released

Highlights include 3x faster refresh, image & document improvements, Apple Silicon support, and more.

React Spring v9.0 Released

The well-known, spring physics-based React animation library released v9 last week, which includes new platform packages, a unified API, revamped types for TypeScript, support for concurrent mode, and more.


Articles

React State Management Libraries and How to Choose

State is always a tricky subject in React, and it seems like new state management tools come out every week. In this article, Dave Ceddia gives you the Grand Tour of some of the main state management options and helps you decide which one to use in your project.

Refactoring the Netlify UI codebase

Charlie Gerard and Leslie Cohn-Wein write about refactoring Netlify's five-year-old React codebase from semantic CSS to utility CSS, using Tailwind. This is the first blog post in a series that covers the team's decisions, implementation strategy, technical difficulties, and things they learned along the way.

Atomos — A New Recoil Visualization Tool Powered by React Flow

Atomos is a new open-source Chrome developer tool designed specifically for Recoil (Facebook's new state management library). In this article, Cole Redfearn writes about his team's inspiration for building Atomos, how to use it, and what its future looks like.

React Context for Dependency Injection Not State Management

In this article, Tommy Groshong dives into why React Context is primarily a tool for injecting dependencies into a React tree, not a state management tool that replaces Redux.


Tutorials

React + D3.js

Amelia Wattenberger is the best of the best when it comes to D3.js (or anything related to data viz in general). In this awesome tutorial, she walks you through how to make custom visualizations by combining React and D3.js, a powerful but tricky combo, since both want to handle the DOM.

How to Use React Context Effectively

Kyle Shevlin writes about how React Hooks makes it easier than ever to use React Context, but how that also makes it easy to use it poorly. He covers how he personally uses React Context, and how you can use it effectively too.


Projects

SpearmintJS v5.0

Spearmint is an open source devtool that lets you generate tests for your React & React Hooks apps without writing code. This new v5 update provides a new, accessible GUI and new features for accessibility testing.

Figma to React

A fun tool created by Tom Söderlund that does exactly what you think it does: converts Figmas drawings to React code.

Nine4

A collection of free to use templates made with Next.js & styled with Tailwind CSS.


Videos

How Netflix Scales Its API with GraphQL Federation

In this 40-minute video, Jennifer Shin and Stephen Spalding use a healthy dose of Old Testament Bible imagery (combined with the Stranger Things soundtrack) to discuss Netflix’s API unification process using GraphQL Federation.

made with ❤️ by ui.dev