After reading this
- Think of UI as a function of state
- Separate props from state
- Use effects only for external systems
Rendering is not mounting HTML
React executes the component to obtain a description. It then compares that description with the previous one and applies the necessary DOM changes.
tsx
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount((value) => value + 1)}>
{count}
</button>
);
}Minimal state
Store only what changes and cannot be calculated from other values. Duplicated state will eventually contradict itself.
tsx
// Do not store fullName in separate state
const fullName = `${firstName} ${lastName}`;An effect synchronizes
useEffect synchronizes React with something external: network, storage, timers, or browser APIs. Do not use it to calculate render data.
Render cycle● interactive
EVENTSTATERENDERCOMMIT
Design the state
Build a search input, original list, and filtered results. Decide which values are real state.
Show a hint
The query changes; the filtered list can be calculated.