You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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)
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).
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:
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/
The text was updated successfully, but these errors were encountered: