State Management in React

Why?

Prop Drilling

(N.B. Do check your component structure before despairing)

State Loss when Un-mounting

Solution:

Have state separate to the components

React Context API

Advanced Context API

Multiple Providers & Consumers (needed by functional components)

Unstated: A Library Alternative

The React Museum of State Management

And now, the grandaddy of them all...

redux

(Which gave us useReducer)

Redux Key Ideas

• There is a store where data is held
  • (It is often broken down into parts/slices)
• It is passed using context (provider)
• Components hook into it to get
  • data (using selectors)
  • CRUD access (using action creators)
    • Async (lots of options: Sagas, Observables): Thunks
• The store has a reducer which controls how it updates when it receives...
• Actions - signals sent to the reducer to effect changes to a store
  • Usually a simple object with
    • type: required
    • payload (name convention): data needed to do the update
• Dispatch - the way we send them

What came next...

• Recoil
  • Facebook's newer internal state management solution
  • Divide state into tiny atoms to minimise re-renders
    • each item has its own state (atom family)
  • docs
• Zustand 
  • a more modern lightweight version of Redux
  • docs
    • Overmind (zustand + immer)
  • demo repo
• Jotai
  • Lightweight simpler version of Recoil
  • docs
  • demo repo

Zustand Key Ideas

• There is a store where data is held
  • (It is often broken down into parts/slices)
• It is passed using context (provider) (can be used outside react!)
• Components hook into it to get
  • data (using selectors)
  • CRUD access (using action creators)
    • Async (handled in store creation, see last link)
• The store has a reducer which controls how it updates when it receives...
• Actions - signals sent to the reducer to effect changes to a store
  • Usually a simple object with
    • type (naming convention not required)
    • payload  (naming convention not required)
• Dispatch - the way we send them

Jotai Key Ideas

• State is broken up into atoms
• It is passed using context (provider) (cannot be used outside react!)
• Components hook into it to get
• State is managed atomically and directly, so the reducer/action pattern is not implemented
  • You tend to use it like useState
  • You can use immer with it (it has MANY simple plugins)
  • You can still use the redux pattern if you want
• When you are dynamically creating atoms (e.g. one per car) then you can use AtomFamilies (like recoil) then CRUD the one you want 
  • It's a bit weird because you have one array that holds the ids and the family which holds the data and you CRUD using that id

React Query

• IF you're just data fetching why do you need global state AT ALL?
• "It's time to break up with your global state!" - Tanner Linsley
• Introducing: React Query!!!
  • docs
  • demo