React State

## Overview

Here is [a **superb** post](https://frontendmastery.com/posts/the-new-wave-of-react-state-management) 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](https://twitter.com/dai_shi/status/1548294222574657536)
- [Legend](https://legendapp.com/dev/state/) 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](https://preactjs.com/blog/introducing-signals/) - 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](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class)
[useState](https://reactjs.org/docs/hooks-state.html)
[useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer)
[context](https://reactjs.org/docs/context.html)/[useContext](https://reactjs.org/docs/hooks-reference.html#usecontext)
[refs](https://reactjs.org/docs/refs-and-the-dom.html)/[useRef](https://reactjs.org/docs/hooks-reference.html#useref)

## Remote state

[swr](https://swr.now.sh/)
[react-query](https://github.com/tannerlinsley/react-query)
[Apollo](https://www.apollographql.com/)
[Relay](https://relay.dev/)

## Form state

[formik](https://jaredpalmer.com/formik/)
[react-hook-form](https://react-hook-form.com/) - [my demo using Zod for validation](https://codesandbox.io/s/react-hook-form-register-forked-phv93g?file=/src/index.js)
[react-form](https://github.com/tannerlinsley/react-form)
[react-final-form](https://final-form.org/react)

## URL / location state
[React Router](https://reacttraining.com/react-router/)
[useSearchParamsState](https://johnnyreilly.com/2022/09/20/react-usesearchparamsstate) - A convenient wrapper over React Router's anemic `useSearchParams` hook.

## General state

[Redux](https://redux.js.org/)
[Flux](https://facebook.github.io/flux/)
[Mobx](https://mobx.js.org/)
[Recoil](https://recoiljs.org/)
[XState](https://xstate.js.org/)
[Valtio](https://github.com/pmndrs/valtio)
[Unstated](https://github.com/jamiebuilds/unstated)
[mobx-react-lite](https://github.com/mobxjs/mobx-react-lite)
[easy-peasy](https://easy-peasy.now.sh/)
[overmindjs](https://overmindjs.org/)
[react-easy-state](https://github.com/RisingStack/react-easy-state)
[Effector](https://effector.now.sh/)
[freezer](https://github.com/arqex/freezer)
[Undux](https://undux.org/)
[Zustand](https://zustand.surge.sh/)
[react-sweet-state](https://github.com/atlassian/react-sweet-state)
[Statux](https://statux.dev/)

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

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