Language: JavaScript (React)
javascript
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUser(userId).then(data => setUser(data));
});
return <div>{user?.name}</div>;
}
What's the bug? 👇
.
.
.
The bug: Missing dependency array in
useEffect. Without [userId] (or even []), this effect runs after EVERY render - and since setUser triggers a re-render, and that re-render triggers the effect again, you get either an infinite fetch loop or, at minimum, wildly wasteful re-fetching.Fixed version:
javascript
useEffect(() => {
fetchUser(userId).then(data => setUser(data));
}, [userId]); // only re-run when userId changes
⚠️ Bonus bug hiding here too: if
userId changes quickly (user navigates between profiles fast), an OLDER fetch can resolve AFTER a newer one, overwriting fresh data with stale data ("race condition"). The fix is usually a cleanup function that ignores outdated responses:javascript
useEffect(() => {
let ignore = false;
fetchUser(userId).then(data => {
if (!ignore) setUser(data);
});
return () => { ignore = true; };
}, [userId]);
React hooks bugs are EXTREMELY common in frontend interviews right now. Have you been bitten by a missing dependency array before? 👇