🗒 Cheat Sheet← Lesson
BitWithBite
React Worksheet

📊 Project 2: Optimised Dashboard

Chapter: Performance & Optimisation · Level ★★★ · Time: 60 min
SCORE___ / 20
NameClassDate
After this worksheet you can
Combine memo/useMemo/useCallbackAdd a lazy-loaded routeUse the Profiler to verifyExplain the checklist requirements
📚 Quick Recap

🎯 What you'll practice: Planning and verifying an optimised dashboard combining Lessons 14–15.

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

1The course card component should be wrapped in:
2The filtered/sorted course list should use:
3Event handlers passed to the memoized card should use:
4To verify memoization worked, use:

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

5At least one route should be lazy-loaded with React..
6The lazy route needs a wrapper to show a fallback.
7List the 5 required features of Project 2's checklist.
8What should you confirm when profiling a filter-box interaction?
9Why does typing in an unrelated filter box risk re-rendering all course cards if memo isn't used?

🚀 Section C · Challenge ● CHALLENGE 5

10Design the full Dashboard component: state for courses and filter, memoized filtering, a memoized CourseCard, and one lazy-loaded settings route.
💭 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-A   3-A   4-B  |  5 = lazy   6 = Suspense   7 = course cards with progress bars, card wrapped in React.memo, useMemo for filtered/sorted list, useCallback for handlers, at least one lazy-loaded route   8 = That the memoized cards do NOT re-render when their own props haven't changed while typing   9 = Without memo, every parent re-render (like a filter-box keystroke updating state) re-renders all its children by default, even ones whose props didn't change  |  10 = const CourseCard=memo(({title,progress})=><div>{title} — {progress}%</div>); const Settings=lazy(()=>import("./Settings")); function Dashboard(){const [courses,setCourses]=useState([]);const [filter,setFilter]=useState("");const filtered=useMemo(()=>courses.filter(c=>c.title.includes(filter)),[courses,filter]);return <>{filtered.map(c=><CourseCard key={c.id} {...c}/>)}<Suspense fallback={<p>Loading...</p>}><Settings/></Suspense></>;}

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