📝 Project
LESSON 16 OF 18
Project 2 — Optimised Dashboard
Performance Dashboard
Build a student dashboard with memoized components, lazy routes, and smooth animations — then audit it with React DevTools Profiler.
📝 Project 2 Checklist — Optimised Dashboard
Applies Lessons 14–15's optimisation techniques to a real dashboard.
- A student dashboard listing several course cards with progress bars
- Wrap the card component in React.memo so it doesn't re-render when unrelated dashboard state changes
- Use useMemo to cache a filtered/sorted version of the course list
- Use useCallback for any event handler passed down as a prop to the memoized card
- At least one route lazy-loaded with React.lazy + Suspense
Verification step: Open React DevTools Profiler, record an interaction (e.g. typing in a filter box), and confirm the memoized cards do NOT re-render when their own props haven't changed. Confirm the lazy-loaded route shows a loading fallback briefly on first visit.