# 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)
    * [“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)[\[2\]](https://react.dev/learn/state-as-a-snapshot#setting-state-triggers-renders)
    * 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)
    * 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/),[3](https://www.robinwieruch.de/react-usereducer-vs-usestate/)][\[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)
  * 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)
  * useEffect [\[1\]](https://aaron-mota.gitbook.io/aarons-style-guide/at-a-glance)
    * 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