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.