General
Last updated
Last updated
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]
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)
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)
