Performance
🏠The everyday picture
A slow shop is usually slow for a few reasons: a long queue at one counter, or stock kept in the far warehouse. Measure where the time goes before hiring more staff.
📘What it really is
-
Measure first. Use the React Developer Tools Profiler to see which components render and how long they take, and Lighthouse for load speed.
-
The common causes, and fixes:
- too much JavaScript to download: split code by route with
lazyandSuspense, so each page loads its own code when needed; - big images: compress and size them (Module 16);
- huge lists: show a page at a time (pagination, Module 47), or use a virtualised list that only renders visible rows;
- expensive calculations on every render:
useMemoremembers a result until its inputs change; -
unnecessary re-renders:
memostops a component re-rendering when its props haven't changed. -
useMemo,useCallbackandmemoadd complexity. Use them where the Profiler shows a real problem, not everywhere. (The React Compiler, where enabled, adds many of these automatically.) -
npm run buildshows the size of the files produced; keep an eye on it.
🖱️Try it
Load 2,000 fake enquiries (generate them in db.json). Use the Profiler to measure typing in the search box. If it's
slow, try useMemo for the filtered list, and measure again. Then lazy-load the detail page with lazy and check in
the Network tab that its code downloads only when you open it.
✅Quick check
Should you wrap every component in memo?
Show the answer
No. Measure first and optimise only where there's a real, measured problem.
What does lazy loading a route do?
Show the answer
Its code is downloaded only when someone visits that page, making the first load smaller.