How do I find unnecessary React renders?

Tools to use

React DevTools (browser extension) has two features built for this:

• Highlight updates when components render — flashes a border around any component that re-renders, so you can visually spot loops.
• Profiler tab — record an interaction and see a flame graph of which components rendered and why.

Common causes in Lovable projects

• Inline objects/functions as props, e.g. onClick={() => doThing()} or style={{...}} created fresh every render, which breaks React.memo on the child.
• State lifted too high, so a single input keystroke re-renders a whole page instead of just the input.
• Context providers wrapping large trees where any value change re-renders every consumer, even ones that don't use the changed field.
• Derived values recalculated every render instead of wrapped in useMemo.

A prompt that helps

Profile the [page name] component tree and tell me which components re-render on every keystroke in the search box, and why.

Fixes, roughly in order of impact

1. Move fast-changing state (like a text input) into the smallest component that needs it.
2. Wrap expensive child components in React.memo once their props are stable.
3. Use useMemo/useCallback for values and functions passed as props, only where profiling shows it matters.
4. Split large contexts into smaller ones scoped to what actually changes together.

What usually goes wrong

Adding useMemo and React.memo everywhere "just in case" adds complexity without measurable benefit — profile first, then optimise the components that actually show up as hot in the flame graph. See /questions/why-is-my-dashboard-slow for a page-level version of this problem.