# 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”)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aaron-mota.gitbook.io/aarons-style-guide/frontend/learning-resources/global-state-management/general.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.