> 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/react/general.md).

# General

* React Docs
  * Rendering
    * For an interface to react to the event, you need to *update the state*. [\[1\]](https://react.dev/learn/state-as-a-snapshot#setting-state-triggers-renders)
    * `setIsSent(true)` sets `isSent` to `true` and *queues* a new render. [\[1\]](https://react.dev/learn/state-as-a-snapshot#setting-state-triggers-renders:~:text=setIsSent\(true\)%20sets%20isSent%20to%20true%20and%20queues%20a%20new%20render.)
    * [“Rendering”](https://react.dev/learn/render-and-commit#step-2-react-renders-your-components) means that React is calling your component, which is a function
  * State
    * "snapshot in time" [\[1\]](https://react.dev/learn/state-as-a-snapshot)
    * "substitution method" (understanding "stale" function calls, etc.) [\[1\]](https://react.dev/learn/state-as-a-snapshot#setting-state-triggers-renders:~:text=mentally%20substituting%20state%20variables%20with%20their%20values%20in%20your%20code)[\[2\]](https://react.dev/learn/state-as-a-snapshot#setting-state-triggers-renders:~:text=But%20what%20if%20you%20put%20a%20timer%20on%20the%20alert)
    * Non-state (variables, functions, etc.) don’t “survive” re-renders. Every render has its own recreated. [\[1\]](https://react.dev/learn/state-as-a-snapshot#setting-state-triggers-renders:~:text=Every%20render%20\(and%20functions%20inside%20it\)%20will%20always%20%E2%80%9Csee%E2%80%9D%20the%20snapshot%20of%20the%20state%20that%20React%20gave%20to%20that%20render.)
    * After the event handler completes, React will trigger a re-render. During the re-render, React will process the queue (state updates). State updater functions run during rendering, so **updater functions must be** [**pure**](https://react.dev/learn/keeping-components-pure) and only *return* the result. Don’t try to set state from inside of them or run other side effects.
      * You can (and it is recommended to) set multiple different states within a single updater function, as long as it remains pure (alternative = useEffect)

<details>

<summary>Notes &#x26; Example (setting multiple states within single updater function)</summary>

![](https://3766999655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfadiBKK9pXrNoqGjTmhS%2Fuploads%2FtdxYVYZkEkE9FDVNxSLl%2FCleanShot%202024-05-22%20at%2022.23.39.png?alt=media\&token=a9528da1-00c4-4b2e-9859-b82543d29aa4)

</details>

* Reducers [\[1\]](https://react.dev/learn/extracting-state-logic-into-a-reducer)\[[2](https://www.robinwieruch.de/react-usereducer-vs-usestate/#:~:text=There%20are%20also%20other%20cases%20in%20which%20it%20makes%20sense%20to%20collect%20different%20properties%20into%20a%20single%20state%20object%2C%20even%20though%20they%20initially%20didn%27t%20seem%20to%20belong%20together.),[3](https://www.robinwieruch.de/react-usereducer-vs-usestate/#:~:text=different%20properties%20that%20don%27t%20change%20in%20any%20correlated%20way%20and%20can%20be%20managed%20by%20multiple%20useState%20hooks)][\[3\]](https://www.reddit.com/r/reactjs/comments/10bohti/usereducer_is_easier_to_adopt_than_you_might_think/)
  * as a component grows in complexity, it can be harder to see at a glance all the different ways in which a component’s state gets updated
  * to reduce  complexity and keep all your logic in one easy-to-access place, you can move that state logic into a single function outside your component, **called a “reducer”.**
  * managing state with reducers is slightly different from directly setting state:
    * instead of telling React **“what to do”** by setting state, you specify **“what the user just did”** by dispatching “actions” from your event handlers. [\[1\]](https://react.dev/learn/extracting-state-logic-into-a-reducer#:~:text=Instead%20of%20telling%20React%20%E2%80%9Cwhat%20to%20do%E2%80%9D%20by%20setting%20state%2C%20you%20specify%20%E2%80%9Cwhat%20the%20user%20just%20did%E2%80%9D%20by%20dispatching%20%E2%80%9Cactions%E2%80%9D%20from%20your%20event%20handlers.)
  * because the reducer function takes state (`tasks`) as an argument, you can **declare it outside of your component.** This decreases the indentation level and can make your code easier to read.
* "Escape hatches"  ("stepping out" of React)
  * useRef [\[1\]](https://react.dev/learn/escape-hatches)
    * “remember” some information, but you don’t want that information to trigger new rerenders [\[1\]](https://react.dev/learn/referencing-values-with-refs)&#x20;
    * plain JavaScript object with the `current` property that you can read and modify
    * useful when you work with external systems or browser APIs
    * use cases:
      * referencing DOM elements [\[1\]](https://react.dev/learn/manipulating-the-dom-with-refs)
        * focusing, scrolling to, getting size/position of, ...
      * storing other objects that aren't necessary to calculate the JSX
        * timer IDs (useTimeout, useInterval) [\[1\]](https://react.dev/learn/referencing-values-with-refs#:~:text=Since%20the%20interval%20ID%20is%20not%20used%20for%20rendering%2C%20you%20can%20keep%20it%20in%20a%20ref)
  * useEffect [\[1\]](/aarons-style-guide/at-a-glance/preferred-tech-stack-current.md)
    * use cases:
      * synchronizing with external systems
  * custom hooks (useX) [\[1\]](https://react.dev/learn/escape-hatches#reusing-logic-with-custom-hooks)
    * use cases:
      * encapsulating reusable logic