How do you approach React performance optimization?

React performance work starts with evidence. Open React DevTools Profiler, record the interaction, and look for components that render often, render for a long time, or render when their props did not meaningfully change. A fast app with a few extra renders is not a problem worth solving.

The usual causes

• State is placed too high, so a small update re-renders a large tree
• An expensive calculation runs during every render
• A long list renders every row instead of virtualizing
• New object or function identities defeat memoized children
• A large bundle blocks interaction until JavaScript loads
• A synchronous update blocks typing or scrolling

function Dashboard() {
  const [query, setQuery] = useState("");

  return (
    <div>
      <SearchBox value={query} onChange={setQuery} />
      <ExpensiveChart data={staticData} />
    </div>
  );
}

The cheapest fixes are structural: move state down, pass children as props so they keep their identity, split a large component, or use a transition to keep urgent input responsive. Then consider React.memo, useMemo and useCallback where the profiler shows a concrete win.