TODO: remove pre-hook articles
3 camps:
- Flux (Redux, Zustand)
see flux, flux-alternatives - Proxy (Mobx, Valtio)
- Atomic (Recoil, Jotai)
GantMan/ReactStateMuseum: A whirlwind tour of React state management systems by example
React State Management – Intermediate JavaScript Course - YouTube 2022-11
Top 6 React state management libraries for 2022 2022-01
Application State Management – kentcdodds 2020-07
Changing children's state from another component with React Hooks forwardRef() and context
How to Manage State in a React App – With Hooks, Redux, and More
4 options to prevent extra rerenders with React context · Daishi Kato's blog
Global state with React | Basefactor
Four patterns for global state with React hooks: Context or Redux
An overview of State Management solutions for React and NextJS - React inDepth
React — Why useContext() will clean your code – Michael Majdanski – Medium
Simple Painter in ReactJS — useContext, useState – Prima – Medium
The modern guide to React state patterns - LogRocket Blog
React Tracked
dai-shi/react-tracked: State usage tracking with Proxies. Optimize re-renders for useState/useReducer, React Redux, Zustand and others.
Pullstate · Simple state stores using immer and React hooks
lostpebble/pullstate: Simple state stores using immer and React hooks - re-use parts of your state by pulling it anywhere you like!
Storeon
library-agnostic
Storeon: "Redux" in 173 bytes — Martian Chronicles, Evil Martians’ team blog
storeon/storeon: 🌩 A tiny (185 bytes) event-based Redux-like state manager for React, Preact, Angular, Vue, and Svelte
Event-driven state management in React using Storeon - LogRocket Blog
Context API
since 16.3
TODO: clean-up trivial posts
Context - React
Store states local to a compound component, alleviate the need for Redux
diegohaz/awesome-react-context: 😎 A curated list of stuff related to the new React Context API
Heres how React's New Context API Works - YouTube
What can the React Context API do for you? Multi-language text, Modals, and Themes
diegohaz/constate: React Context + State
Digging Into React Context | CSS-Tricks
Understanding the React Context API | DigitalOcean
Nesting and overriding new React Context API - DEV Community 👩💻👨💻
An Introduction To React’s Context API — Smashing Magazine
Redux vs. The React Context API
React's Context API explained: Provider and Consumer - RWieruch
React Context API – Zsolt Nagy
React Context API - A Replacement for Redux? – Bits and Pieces
React Context API vs Redux — the eternal dichotomy – SoftwareMill Tech Blog
React Context and Re-Renders: React Take the Wheel - Ryan Florence - Medium use state and setState() as value for Provider, usable with Hooks
In the old days, most React routers (and Redux) use the undocumented this.context
React.js: Communication between Components with Contexts - JScrambler Blog
Hook as Redux alternative
don't do this, use Redux Toolkit
Hooks provides some helper functions that can make it an alternative to introducing Redux to your project.
But React Hooks and Redux are not mutually exclusive!!
Stop Asking if React Hooks Replace Redux - The Startup - Medium
Redux-less context-based useSelector hook that has same performance as React-Redux
React Global State without Redux - RWieruch
React State with Hooks: useReducer, useState, useContext - RWieruch ❗!important
Passing callbacks down with React Hooks - Trabe - Medium useContext(), with useMemo(), useCallback() to make the callback stable
import React, { useReducer } from "react";
export const Store = React.createContext();
const initialState = {
counter: 5,
};
const reducer = (state = initialState, action) => {
switch (action.types) {
case "ADD":
return { ...state, counter: state.counter + 1 };
case "SUB":
return { ...state, counter: state.counter - 1 };
default:
return state;
}
};
export const StoreProvider = (props) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<Store.Provider value={{ state, dispatch }}>
{props.children}
</Store.Provider>
);
};Recoil
larger footprint
Recoil - a New State Management Library for React
Recoil: State Management for Today's React - Dave McCabe aka @mcc_abe at @ReactEurope 2020 - YouTube
React: Intro to Recoil - YouTube
Jotai
like Recoil, but smaller; better memory footprint with
WeakMap
Jotai, primitive and flexible state management for React
Utils — Jotai, primitive and flexible state management for React cover most use cases
pmndrs/jotai: 👻 Primitive, flexible state management for React
jotai/xstate.md at master · pmndrs/jotai · GitHub
Manage Application State with Jotai Atoms | egghead.io
Jotai, a New Granular State Management Library for React
Jotai: The ultimate React State Management | Blog 100mslive
Redux-Free State Management with Jotai | by Nathan Sebhastian | Bits and Pieces
Jotai vs. Recoil: What are the differences? - LogRocket Blog
Zustand
like Redux; small footprint
Zustand
Zustand Documentation
Working with Zustand | TkDodo's blog
Hookstate
Hookstate: supercharged React.useState hook | Hookstate
Nano Stores
Proxy-based
pmndrs/valtio: 💊 Valtio makes proxy-state simple for React and Vanilla Suspense compatible