Optimizing React Performance

React is powerful, but without careful optimizations an app can become sluggish as it grows. Below are proven techniques to keep your UI snappy.

1. Memoization

Use React.memo for pure components and useMemo / useCallback to avoid unnecessary recalculations.

const ExpensiveComponent = React.memo(({ data }) => {
  // heavy calculations here
  return <div>{data}</div>;
});

const Parent = () => {
  const memoizedCallback = useCallback(() => {
    //...
  }, [deps]);

  return <ExpensiveComponent data={memoizedCallback} />;
};

2. Lazy Loading

Split your bundle with React.lazy and Suspense so users load only what they need.

const Dashboard = React.lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={Loading...}>
      <Dashboard />
    </Suspense>
  );
}

3. Virtualized Lists

Render only visible rows using libraries like react-window or react-virtualized.

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Item {index}</div>
);

<List height={400} itemCount={1000} itemSize={35}>
  {Row}
</List>

4. Profiling with DevTools

Open React DevTools, go to the Profiler tab, and record interactions to identify bottlenecks.

Show Tips

Look for “high render time” components.
Check “Avoid unnecessary re-renders”.
Use “flamegraph” to trace call stacks.

5. Avoid Anonymous Functions in JSX

Passing new functions each render forces child components to re‑render.

// Bad


// Good
const onClick = useCallback(() => handleClick(item.id), [item.id]);