Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React State #49

Open
coryhouse opened this issue Jun 19, 2020 · 0 comments
Open

React State #49

coryhouse opened this issue Jun 19, 2020 · 0 comments

Comments

@coryhouse
Copy link
Owner

coryhouse commented Jun 19, 2020

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

image

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

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

@coryhouse coryhouse changed the title Third Party React State Libraries React State Jun 19, 2020
@coryhouse coryhouse mentioned this issue May 7, 2022
60 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant