How would you determine whether a React re-render is actually a performance problem?

Direct answer

Measure before optimizing: use React DevTools Profiler or the Profiler component to identify expensive commits, compare actual rendering cost, and then optimize the specific component or data flow causing measurable latency.

App.jsx

function onRender(
  id,
  phase,
  actualDuration,
  baseDuration
) {
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration
  });
}

function App() {
  return (
    <Profiler id="Results" onRender={onRender}>
      <Results />
    </Profiler>
  );
}

actualDuration: Time spent rendering the profiled subtree for the current update
baseDuration: Estimated cost of rendering the subtree without memoization benefits
phase: Whether the measured commit is a mount, update, or nested update