⚡ memo, useMemo & useCallback

Chapter: Performance & Optimisation · Level ★★★ · Time: 20 min

SCORE___ / 20

NameClassDate

After this worksheet you can

Use React.memo correctlyUse useMemo for cachingUse useCallback for stable functionsKnow when NOT to optimise

📚 Quick Recap

🎯 What you'll practice: React.memo, useMemo, and useCallback — and profiling before optimising.

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

5The tool used to find actual re-render problems is React DevTools .

6useCallback is most useful when passing a function as a to a memoized child.

7Wrap a CourseCard component in React.memo.

8Write a useMemo call that filters "courses" by "filter", re-computing only when either changes.

9Why can overusing memo/useMemo/useCallback make an app slower, not faster?

🚀 Section C · Challenge ● CHALLENGE 5

10Design a Dashboard component using memo, useMemo, and useCallback together for a filtered, memoized course card list with a stable enroll handler.

💭 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-A 2-B 3-B 4-B | 5 = Profiler 6 = prop 7 = const CourseCard=memo(function CourseCard({title}){return <div>{title}</div>;}); 8 = const filtered=useMemo(()=>courses.filter(c=>c.cat===filter),[courses,filter]); 9 = Each memo/useMemo/useCallback call itself has a small overhead (comparing dependencies); adding them to cheap computations or rarely-changing components can add more overhead than it saves | 10 = const CourseCard=memo(({title,onEnroll})=><div>{title}<button onClick={onEnroll}>Enroll</button></div>); function Dashboard({courses,filter}){const filtered=useMemo(()=>courses.filter(c=>c.cat===filter),[courses,filter]);const handleEnroll=useCallback(id=>enrollAPI(id),[]);return filtered.map(c=><CourseCard key={c.id} {...c} onEnroll={()=>handleEnroll(c.id)}/>);}

📄 Need offline practice?Print this worksheet or open the one-page cheat sheet.

🗒 Cheat Sheet

🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

🚀 Section C · Challenge ● CHALLENGE 5