BitWithBite
React Worksheet
🔄 useState
SCORE___ / 20
NameClassDate
After this worksheet you can
Manage primitive stateManage object state safelyManage array state safelyAvoid mutating state directly📚 Quick Recap
🎯 What you'll practice: useState for primitives, objects, and arrays.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1useState returns:
2Updating object state should:
3Adding an item to array state uses:
4Removing an item from array state uses:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Never state directly — always create a new value.
6The spread operator syntax is three .
7Write the useState declaration for a "step" number starting at 1.
8Write the correct way to update only the "email" field of a user object in state.
9Why might React fail to re-render if you mutate an object directly instead of replacing it?
🚀 Section C · Challenge ● CHALLENGE 5
10Write add and remove functions for a todo list stored as array state, each item shaped {id, text}.
💭 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-A | 5 = mutate 6 = dots 7 = const [step, setStep] = useState(1); 8 = setUser(prev => ({...prev, email: newEmail})); 9 = React compares object references to detect changes — mutating in place keeps the same reference, so React may conclude nothing changed and skip the re-render | 10 = const add = text => setTodos(prev => [...prev, {id: Date.now(), text}]); const remove = id => setTodos(prev => prev.filter(t => t.id !== id));