React Performance Traps Every Developer Should Know

React is fast by default, but small mistakes can make components laggy. Let’s go through some common performance traps and how to fix them.

1. Unnecessary re-renders

function Button({ label }) {
  console.log("rendering...");
  return <button>{label}</button>;
}

Every parent re-render will re-render the child, even if props didn’t change. ✅ Use React.memo for pure components.

2. Inline functions in JSX

    <button onClick={() => doSomething()}>Click</button>

This creates a new function every render. ✅ Use useCallback when passing stable handlers.

3. Heavy computations inside render

function Chart({ data }) {
  const processed = expensiveCalculation(data);
  return <Plot data={processed} />;
}

✅ Move heavy logic to useMemo or pre-process before rendering.

4. Not splitting bundles

A huge initial bundle makes apps slow. ✅ Use dynamic imports (React.lazy) for code splitting.

🚀 Key Takeaways

  • Memoize when necessary, not everywhere.
  • Keep renders cheap and side-effect free.
  • Use React DevTools Profiler to find bottlenecks.

Small changes = big speed improvements.