BitWithBite
Full-Stack Worksheet
🔄 useState & useEffect
SCORE___ / 20
NameClassDate
After this worksheet you can
Declare and update stateFetch data with useEffectUse the dependency array correctlyTrack a loading state📚 Quick Recap
🎯 What you'll practice: useState for memory, useEffect for side effects, and the dependency array's role.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1useState returns:
2An empty dependency array [] means the effect runs:
3Omitting the dependency array entirely causes the effect to run:
4Calling a setState setter causes:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The hook that adds memory to a function component is use.
6The second argument to useEffect is called the array.
7Write a counter component with a count state and a button that increments it.
8Write a useEffect that fetches "/api/posts" once on mount and stores the result in a posts state.
9Why can an effect with no dependency array cause an infinite fetch loop if it also calls its own 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-C 4-B | 5 = State 6 = dependency 7 = function Counter(){const [count,setCount]=useState(0);return <button onClick={()=>setCount(count+1)}>{count}</button>;} 8 = useEffect(()=>{fetch('/api/posts').then(r=>r.json()).then(setPosts);},[]); 9 = Without a dependency array, the effect re-runs after every render; if it calls setState, that triggers another render, which re-runs the effect again — an infinite loop | 10 = Use [userId] as the dependency array — the effect re-runs only when userId itself changes, refetching data for the new id without running on every unrelated render.