QReact · Interview preparation
Why use functional state updates in React?
A functional update receives the previous state, making multiple queued updates behave correctly.
The idea to remember.
A functional update receives the previous state, making multiple queued updates behave correctly. Use setCount(previous => previous + 1) when the next value depends on the previous one.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: local state
01 / BEGINNERUpdate React state without mutating the previous value.
function Counter() {
const [count, setCount] = React.useState(0);
return <button onClick={() => setCount(n => n + 1)}>{count}</button>;
}Intermediate: synchronize external data
02 / INTERMEDIATEAn effect subscribes to something outside React and cleans it up.
function OnlineStatus() {
const [online, setOnline] = React.useState(navigator.onLine);
React.useEffect(() => {
const update = () => setOnline(navigator.onLine);
window.addEventListener('online', update);
window.addEventListener('offline', update);
return () => {
window.removeEventListener('online', update);
window.removeEventListener('offline', update);
};
}, []);
return <p>{online ? 'Online' : 'Offline'}</p>;
}Real scenario: cancel stale requests
03 / REAL SCENARIOCancel the previous request when a search term changes.
React.useEffect(() => {
const controller = new AbortController();
fetch('/api/search?q=' + encodeURIComponent(query), { signal: controller.signal })
.then(response => { if (!response.ok) throw new Error('Request failed'); return response.json(); })
.then(setResults)
.catch(error => { if (error.name !== 'AbortError') setError(error.message); });
return () => controller.abort();
}, [query]);02Check your understanding
Try it in your own words.
Explain why use functional state updates in React without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse React study guides ↗