General

• React Docs

  • Rendering

    • For an interface to react to the event, you need to update the state. [1]

    • setIsSent(true) sets isSent to true and queues a new render. [1]

    • “Rendering” means that React is calling your component, which is a function

  • State

    • "snapshot in time" [1]

    • "substitution method" (understanding "stale" function calls, etc.) [1][2]

    • Non-state (variables, functions, etc.) don’t “survive” re-renders. Every render has its own recreated. [1]

    • 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 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)

Notes & Example (setting multiple states within single updater function)

• Reducers [1][2,3][3]

  • 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]

  • 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]

    • “remember” some information, but you don’t want that information to trigger new rerenders [1]

    • 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]

        • focusing, scrolling to, getting size/position of, ...

      • storing other objects that aren't necessary to calculate the JSX

        • timer IDs (useTimeout, useInterval) [1]

  • useEffect [1]

    • use cases:

      • synchronizing with external systems

  • custom hooks (useX) [1]

    • use cases:

      • encapsulating reusable logic