useEffect
useEffect runs code after a render. Pass [] to run once on mount, [id] to run when id changes, or nothing for every render. Return a cleanup function to clear timers and subscriptions to prevent memory leaks.
useEffect Hook import { useState, useEffect } from "react";
function UserCard({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(setUser);
// Cleanup
return () => console.log("cleanup");
}, [userId]); // runs when userId changes
if (!user) return Loading...
;
return {user.name} ;
}
Test your understanding before moving on
1. What is useEffect used for?
A. Styling
B. Storing state
C. Side effects (fetching, subscriptions, timers)
D. Routing
💡 useEffect handles side effects that happen outside the render cycle.
2. When does useEffect run by default?
A. Only on mount
B. Only on unmount
C. After every render
D. Before every render
💡 Without a dependency array, useEffect runs after every render.
3. Empty dependency array [] means:
A. Run on every render
B. Run never
C. Run only once on mount
D. Run on every prop change
💡 An empty [] dependency array means the effect runs only once after the first render.
4. What is the cleanup function?
A. Runs before first render
B. Runs when component unmounts or before next effect
C. Logs errors
D. Fetches data
💡 The function returned from useEffect is called for cleanup on unmount or before re-running.
5. Where should you NOT use useEffect?
A. Side effects
B. Fetching data
C. Directly updating state synchronously during render
D. Timer setup
💡 Never update state synchronously during render — it causes infinite loops.