Roadmap › React (with Hooks, React 19 & Next.js basics) › Module: Building Real Apps
Lessons in this course (17)
16. Performance optimisation
Advanced★ Must knowLesson 16 of 17
- Measure first: React DevTools Profiler, why-did-you-render, Lighthouse/Core Web Vitals.
- Avoid unnecessary re-renders: keep state as local as possible, split components,
memo+ stable props (or React Compiler), split contexts. - Correct keys for lists; virtualise long lists (TanStack Virtual, react-window).
- Code splitting with
lazy/dynamic import and route-based splitting. useTransition/useDeferredValueto keep typing responsive during heavy updates.- Debounce expensive inputs; avoid creating objects/functions inline for memoised children (or use the compiler).
- Server Components/SSR to ship less JS; image optimisation; caching server data (TanStack Query).
- Production build (
vite build) — dev mode is much slower.