BitWithBite
React Worksheet
🔄 useEffect
SCORE___ / 20
NameClassDate
After this worksheet you can
Use the dependency array correctlyFetch data on mountWrite a cleanup functionAvoid infinite effect loops📚 Quick Recap
🎯 What you'll practice: useEffect's dependency array and cleanup pattern.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1useEffect(fn, []) runs:
2Omitting the dependency array causes the effect to run:
3A cleanup function is returned to run:
4The most common useEffect use case is:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5useEffect(fn, [filter]) re-runs when changes.
6clearInterval should be called inside the effect's function.
7Write a useEffect that fetches "/api/posts" once on mount and stores results in a "posts" state.
8Write a useEffect that sets an interval timer and cleans it up correctly.
9Why can an effect with no dependency array cause an infinite loop if it also calls setState?
🚀 Section C · Challenge ● CHALLENGE 5
10Design a component that re-fetches user data whenever a userId prop changes. Which dependency array do you use and why?
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = filter 6 = cleanup (returned) 7 = useEffect(()=>{fetch("/api/posts").then(r=>r.json()).then(setPosts);},[]); 8 = useEffect(()=>{const t=setInterval(tick,1000);return ()=>clearInterval(t);},[]); 9 = Without a dependency array the effect runs after every render; calling setState triggers another render, which re-runs the effect again — an infinite loop | 10 = Use [userId] — the effect re-runs only when userId itself changes, refetching for the new id without running on unrelated renders.