React Newsletter #254

Gatsby 3.0, simplifying React authentication, and finite state machines

This week's issue is sponsored by react-email-editor.

React Email Editor is a drag-n-drop email template builder component that makes it easy to add a solid email editor to your React apps. Designs are saved in JSON and can be exported as HTML.

👉 Check it out


Gatsby releases v3.0

Gatsby announced its first major release in over two years at last week's GatsbyConf. V3.0 includes incremental builds in OSS, fast refresh, changes and improvements to various plugins, and more.


React authentication, simplified

In this article, David Walsh lays out a different approach to authentication (and access control, SSO, and more) in React applications. Rather than add a static library that you have to keep up to date or re-research each time you want to implement auth, David demonstrates how to use a service that stays up to date automatically and is a much simpler alternative to Auth0, Okta, and others.

Modeling UI States in A React Form Component Using A Finite State Machine

This article explores an architectural design pattern called the finite state machine (FSM) that the OkCupid team used to craft a robust location search UX.

Deploy a React to AWS S3 with a Github Actions Deployment pipeline

Andy Jones explains the key parts of a complete infrastructure setup and deployment pipeline for a barebones React app. The article also features a complete code example of the setup in GitHub.


Low-Level Charts in React

This tutorial walks you through how you can use Visx (Airbnb's React data viz library) to build a line chart which displays the price evolution of a product over a 10-day period.

Building a realtime chat app with Next.js and Vercel

This tutorial takes you through the steps of creating a realtime chat application with Next.js and deploying it to Vercel.

How to Build Your Own React Hooks: A Step-by-Step Guide

In this step-by-step guide, Reed Barger will show you how to create your own custom React hooks by breaking down three hooks he's made for his own applications, along with what problems they were created to solve.



A build-time query cache for Next.js that creates an HTTP server during the build that caches responses. This could be helpful for Next.js users who create static (or partially static) builds. The query cache saves responses as they are requested so shared queries across pages (e.g. for header data) are de-duplicated.


A collection of React components built with tailwindcss 2.0.

Embla Carousel

Embla Carousel is a bare bones carousel library with fluid motion and great swipe precision. It's built in React but is library agnostic, dependency free and open source.


CRUD Tutorial Series

This 4-part series walks through how to build CRUD application using React, TypeScript, GraphQL, Node.js, and MySQL.

made with ❤️ by