React Performance: Optimization Patterns for Enterprise Applications

Large React applications can become sluggish without intentional performance optimization. After working on enterprise dashboards rendering thousands of data points and complex forms with hundreds of fields, I've developed a systematic approach to React performance that goes beyond the basics.

Understanding React's Rendering Model

Before optimizing, understand why React re-renders:

Re-render triggers:
1. State change in the component
2. Props change (by reference, not value)
3. Parent component re-renders
4. Context value changes

The Re-render Problem

// Parent re-renders → All children re-render
function Dashboard() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      <Clock time={time} />
      <ExpensiveChart />  {/* Re-renders every second! */}
      <DataTable />       {/* Re-renders every second! */}
    </div>
  );
}

Rendering Optimization

React.memo for Expensive Components

Wrap components that don't need frequent updates:

// Before: Re-renders on every parent update
function ExpensiveChart({ data }) {
  // Complex chart rendering
}

// After: Only re-renders when data changes
const ExpensiveChart = React.memo(function ExpensiveChart({ data }) {
  // Complex chart rendering
});

// Custom comparison for complex props
const DataTable = React.memo(
  function DataTable({ rows, columns }) {
    // Table rendering
  },
  (prevProps, nextProps) => {
    // Return true if props are equal (skip re-render)
    return (
      prevProps.rows.length === nextProps.rows.length &&
      prevProps.rows.every((row, i) => row.id === nextProps.rows[i].id)
    );
  }
);

Strategic useMemo and useCallback

Don't memoize everything—it adds overhead. Memoize when: