> For the complete documentation index, see [llms.txt](https://aaron-mota.gitbook.io/aarons-style-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aaron-mota.gitbook.io/aarons-style-guide/frontend/learning-resources/global-state-management/general.md).

# General

### Server State

* **Management Solutions**
  * React Query (TanStack Query)

    * [React Query in 100 seconds](https://www.youtube.com/watch?v=novnyCaa7To\&ab_channel=Fireship) *-* Fireship *(3/2022)*
    * [It’s time to break up with your “Global State”](https://youtu.be/seU46c6Jz7E?si=FZ3CvTsSanUFX8Cd\&t=23) - Tanner Linsley (creator of [TanStack](https://tanstack.com/)) *(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
    * [Why React Query?](https://ui.dev/c/query/why-react-query) - ui.dev (query.gg -- React Query course)
    *
    * RQ Documentation:
      * [**Query Params (Query Keys)**](https://tanstack.com/query/latest/docs/react/guides/query-keys?from=reactQueryV3\&original=https%3A%2F%2Ftanstack.com%2Fquery%2Fv3%2Fdocs%2Fguides%2Fquery-keys#query-keys-are-hashed-deterministically)

    <br>

### Client State

* **Management Solutions**
  * [Good video on global (client) state management solutions & the reason behind them](https://www.youtube.com/watch?v=MpdFj8MEuJA\&t=638s\&ab_channel=JackHerrington), by [Jack Herrington](https://www.youtube.com/@jherr/videos) *(2/2022)*:
    * (1) **useState > prop drilling** ([1:14](https://www.youtube.com/watch?v=MpdFj8MEuJA\&t=74s)-5:03)
    * (2) **useContext** (for global (client) state) ([5:03](https://www.youtube.com/watch?v=MpdFj8MEuJA\&t=303s)-9:21)
      * Multiple instances of useContext ([9:21](https://www.youtube.com/watch?v=MpdFj8MEuJA\&t=561s)-10:38)
        * **useReducer** (instead of useState) within useContext ([10:38](https://www.youtube.com/watch?v=MpdFj8MEuJA\&t=638s)-13:45)
          * useReducer (instead of even reaching for useContext) ([13:45](https://www.youtube.com/watch?v=MpdFj8MEuJA\&t=825s))
    * (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](https://www.youtube.com/watch?v=MpdFj8MEuJA\&t=900s) & beyond)
    * [22:13](https://www.youtube.com/watch?v=MpdFj8MEuJA\&t=1333s) A **good way to implement Zustand** / 3rd party state manager (abstraction layer / facade)
    * [24:19](https://www.youtube.com/watch?v=MpdFj8MEuJA\&t=1459s) **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](https://www.youtube.com/watch?v=MpdFj8MEuJA\&t=1474s)
          * **useContext:** [29:19](https://www.youtube.com/watch?v=MpdFj8MEuJA\&t=1759s)
            * \*\*one way to somewhat difficultly get around this is use-context-selector 30:10 (another 3rd party library from Zustand creator)
    * &#x20;
    * \*\*Jack Herrington is another really good YouTube channel guy (he also does a good podcast “React Roundup”)