Measure with the React Profiler before you optimize

Guessing where a slow screen spends its time usually leads to the wrong fix. Measure first.

1. Open React DevTools and record a profile while you reproduce the slow interaction.
2. Look at which components rendered and how long each took.
3. Fix the biggest cost first.
4. Measure again so you know the change helped.

Common real causes are:

• a large list rendering every row,
• state placed too high in the tree,
• an expensive calculation in a component that renders often.

Check a production build too. Development builds are slower and include extra checks.