How to Stop Unnecessary Re-Renders in React — Part 1

Unnecessary re-renders can slow down your React app and impact performance. In this post, we’ll explore practical ways to prevent unwanted re-renders using hooks like useMemo(), useCallback(), and React.memo().

We’ll cover common mistakes developers make — like passing inline functions or misusing keys in lists — and how to fix them with optimized coding patterns.

Whether you’re building a small component or scaling a large app, understanding re-render behavior is key to writing efficient React code.

Using React.memo() to Prevent Re-Renders

const TestComponent = React.memo(({ name }) => {
  console.log('Rendering Component');
  return <div>{name}</div>;
});

Using useMemo() for Expensive Calculations

const CalculationComponent = ({ number }) => {
  const computedValue = useMemo(() => {
    return calculation(number);
  }, [number]);

  return <div>Result: {computedValue}</div>;
};

Using useCallback() to Memoize Functions

const Parent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

Always monitor your components with React DevTools Profiler to identify unnecessary re-renders.

Stay tuned for Part 2 — where we'll highlight common mistakes developers make that cause unnecessary re-renders and how to avoid them!