EngineeringWriting

Optimizing React Re-renders

A practical look at when re-renders actually matter, and when we reach for memoization before understanding the real bottleneck.

Published
Oct 12, 2025
Read time
2 min read
Written by
Aadarsh Srivastava

The Problem with Unnecessary Re-renders

React's virtual DOM is incredibly efficient, but that doesn't mean we should be careless about re-renders. Every re-render consumes CPU cycles, and in complex applications, this can lead to noticeable performance issues.
When a component re-renders, React has to:
  1. Execute the component function
  2. Compare the new virtual DOM with the previous one
  3. Update the actual DOM if needed

Understanding useMemo

useMemo is your first line of defense against expensive calculations running on every render. It memoizes the result of a computation and only recalculates when its dependencies change.
javascript
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b)
}, [a, b])

The Power of useCallback

useCallback is similar to useMemo, but for functions. It returns a memoized version of the callback that only changes if one of the dependencies has changed.
javascript
const handleClick = useCallback(() => {
  doSomething(a, b)
}, [a, b])

React Compiler: The Future

The upcoming React Compiler (formerly React Forget) promises to automatically memoize components, eliminating the need for manual optimization in many cases. This is a game-changer for developer experience.

Key Takeaways

  • Profile before optimizing
  • Use React DevTools to identify re-render sources
  • Apply useMemo and useCallback strategically
  • Keep an eye on React Compiler developments