(Global) State Management

Global state > Client state & Server state

Server State

• Management Solutions

  • React Query (TanStack Query)

    • React Query in 100 seconds - Fireship (3/2022)

    • It’s time to break up with your “Global State” - Tanner Linsley (creator of TanStack) (2020)

      • “global” state > client state & server state (two different concerns / management techniques)

      • Where the terms/concepts “client state” and “server state” started becoming more of a thing (rather than just “global state”). Really good video

    • RQ Documentation:

      • Query Params (Query Keys)

Client State

• Management Solutions

  • Good video on global (client) state management solutions & the reason behind them, by Jack Herrington (2/2022):

    • (1) useState > prop drilling (1:14-5:03)

    • (2) useContext (for global (client) state) (5:03-9:21)

      • Multiple instances of useContext (9:21-10:38)

        • useReducer (instead of useState) within useContext (10:38-13:45)

          • useReducer (instead of even reaching for useContext) (13:45)

    • (3) issues with useContext / one reason for using an actual (3rd party) state manager (useContext = more rerendering than desired) > Zustand (3rd party state manager) (15:00 & beyond)

    • 22:13 A good way to implement Zustand / 3rd party state manager (abstraction layer / facade)

    • 24:19 Fine-grained updates

      • This section of the video is largely what convinced me to plan to immediately reach for Zustand vs useContext when I start needing a global (client) state in an app

        • Zustand: 24:34

          • useContext: 29:19

            • **one way to somewhat difficultly get around this is use-context-selector 30:10 (another 3rd party library from Zustand creator)

    • **Jack Herrington is another really good YouTube channel guy (he also does a good podcast “React Roundup”)