Module 03 Recap
Module 03 covered how React components manage data that changes and how user interactions drive updates. Here is a summary.
What you learned
Section titled “What you learned”useState stores data that changes. Call it at the top of a component with an initial value. It returns the current value and a setter. Calling the setter updates the value and triggers a re-render. Never mutate state directly — always pass a new value.
Event handlers are functions passed as props. Use camelCase event names. Pass the reference, not a call. Use e.preventDefault() to stop form submissions from reloading the page. Close over IDs with arrow functions in map.
Controlled inputs bind React state to the DOM. Set value from state and update state in onChange. The input can only hold what React put there. Clear inputs by setting state to empty strings.
Lift state up when siblings need to share data. Move state to the nearest common ancestor. The parent owns the data; children receive it as props and call callbacks to request changes.
Forms combine all four patterns. State per field, controlled inputs, a submit handler with validation, and conditional error messages. Reset selectively based on what the user is likely to do next.
Key terms
Section titled “Key terms”| Term | Meaning |
|---|---|
useState | Hook that stores a value and triggers re-renders when it changes |
| Setter | The second element from useState — call it to update the stored value |
| Controlled input | An input whose value is bound to React state |
| Lifting state up | Moving state to a common ancestor so siblings can share it |
| SyntheticEvent | React’s cross-browser wrapper around DOM events, available in every handler |
What is next
Section titled “What is next”Module 04 — Lists, Effects, and Persistence — covers rendering dynamic lists with proper keys, running side effects with useEffect, saving data to localStorage so it survives page refreshes, and fetching data from an external API. By the end you will have ZeroBudget persisting its state across sessions.