React Hooks mental model
Hooks expose stateful React features. Their call order stays stable, while effects synchronize React with systems outside rendering.
How it works
Call useState at the top level of your component, then derive values such as a filtered list during rendering; when you need to subscribe to a browser event or keep another external system in sync, use an effect with cleanup so the subscription does not survive beyond the component that owns it.
function Search({ items }) {
const [query, setQuery] = useState("");
const visible = items.filter(item => item.includes(query));
return <>
<input aria-label="Search" value={query}
onChange={e => setQuery(e.target.value)} />
<p>{visible.join(", ")}</p>
</>;
}Common misconception
Derived values usually belong in render, not in an effect.
Quick practice
1. Why not call Hooks conditionally?
React associates Hook state by call order.
2. What belongs in an effect?
External synchronization.
3. Does useMemo guarantee correctness?
No.