Component re-rendering produces a fresh user-interface description from the latest state and props after relevant data changes. React compares that description with the current UI and updates the DOM where necessary. section 1.1.2
A typical update cycle works like this:
- React calls the component with its current props and state. section 1.1.2
- The component defines handlers, returns UI from current values, and React connects the handlers while updating the DOM. section 1.1.2
- Calling a useState updater changes state and schedules a re-render when the value changes; the new value replaces the old one. section 2.5
- Use functional updaters when the next value depends on the latest state, and call useState separately for multiple state values. section 2.5
State changes versus ref changes
A Counter component can render a state-backed button with `const [count, setCount] = useState(1)` and `onClick={() => setCount(c => c + 1)}`. Each click re-renders and displays the latest count. A second button can increment `ref.current` through `useRef`; its value persists, but the display remains stale until another state update causes a re-render. section 5.1.1
As state grows, splitting a large component can limit how much UI is affected by state changes. Sharing state may require lifting values and updater functions, or reducers and dispatch functions, into parents. section 6.2
Use the state-to-UI diagram to trace how changing a component value leads React to update the interface. section 2.0
