React State

[coryhouse]

Overview

Here is a superb post that comprehensively reviews where we've been, where we are, and why. And it clearly outlines the tradeoffs inherent in different libraries and approaches.

The new wave of state management tools is mostly about reducing paradigms. Take a principle (flux, proxies, atoms, ...) and reduce it to the smallest possible outcome based on modern JS and React semantics without losing functionality or performance. That's these new state managers:

• Zustand is Redux w/o clutter (Like Redux, abstracts access to state via actions, events, etc)
• Jotai is Recoil simplified to 2 apis (Like context, provides a global, but better perf, and accessible outside of React)
• Valtio is Mobx simplified to 2 apis - Unlike Jotai, supports deep subs
• Legend offers simple observables, that support mutation, and can be easily persisted to localStorage or other spots. A modern version of MobX with enough features to replicate MobX-State-Tree but with a lot less overhead.
• Signal - Uses immutable objects with stable identity (like refs) which avoids re-renders. Provides a value property for accessing the current value. Surgically updates the DOM in Preact. It was created for Preact, but works with React too. Unlike hooks, can declare the state outside of components! So a great alternative to Context. If a signal’s value hasn’t changed, components and effects that use that signal’s value won’t be updated, even if the signal’s dependencies have changed. Dependencies across signals are automatically tracked (no dependency arrays).

8 Ways to Handle State

Built into React

Class state
useState
useReducer
context/useContext
refs/useRef

Remote state

swr
react-query
Apollo
Relay

Form state

formik
react-hook-form - my demo using Zod for validation
react-form
react-final-form

URL / location state

React Router
useSearchParamsState - A convenient wrapper over React Router's anemic useSearchParams hook.

General state

Redux
Flux
Mobx
Recoil
XState
Valtio
Unstated
mobx-react-lite
easy-peasy
overmindjs
react-easy-state
Effector
freezer
Undux
Zustand
react-sweet-state
Statux

https://twitter.com/DavidKPiano/status/1353712136372039682

Image below from https://rockiger.com/en/react-state-management/