Unexpected multiple logs of Component render count

Question

import React, { useEffect, useRef, useState, memo } from 'react';

const ExpensiveComponent = memo(({ onRender }) => {
  useEffect(() => {
    onRender();
  }, [onRender]);

  return <div>Expensive component</div>;
});

export default function App() {
  const renderCountRef = useRef(0);
  const [count, setCount] = useState(0);

  const handleRender = () => {
    renderCountRef.current += 1;
    console.log('Component render count:', renderCountRef.current);
  };

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 2000);
    return () => clearInterval(id);
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
      <ExpensiveComponent onRender={handleRender} />
    </div>
  );
}

This is coming automatically multiple times?

Component render count: 1

Component render count: 2

Component render count: 3

Component render count: 4

Component render count: 5

I have a dashboard with many components, and i try to pass functions as props to deeply nested children. Every time a parent re-renders, these functions are get re-created, causing memoized children to re-render unnecessarily.

Estus Flask · Accepted Answer · 2025-05-19 11:12:22Z

4

handleRender is a new function on each App render, and so is onRender prop, so memo can't prevent ExpensiveComponent from being re-rendered.

useCallback needs to be used, it can guarantee that function reference stays the same through the component lifetime to be used as a callback and thus prevent the unnecessary re-renders.

It should be:

const handleRender = useCallback(() => {...}, []);

edited May 19 at 11:12

answered May 19 at 10:14

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Omprakash S May 19 at 10:16

What does useCallback() does?

Estus Flask May 19 at 11:13

I updated the post. It's intended exactly for this purpose. Notice that it needs [] in the list of dependencies in this case

Milan Gohel · Accepted Answer · 2025-06-17 09:43:46Z

0

The reason ExpensiveComponent keeps rendering is because you're passing a new function (handleRender) every time App re-renders. Even if the content of the function doesn't change, React sees it as a different function, so React.memo can't prevent the re-render.

To fix this, you just need to make sure the function stays the same between renders. You can do that using useCallback. It keeps the function reference stable.

const handleRender = useCallback(() => {
  renderCountRef.current += 1;
  console.log('ExpensiveComponent render count:', renderCountRef.current);
}, []);

edited Jun 17 at 9:43

answered Jun 17 at 9:19

Milan Gohel

1

1 Comment

DarkBee Jun 17 at 9:24

How does this address the issue? Please edit your answer and explain the changes you've made to solve the problem. Code-only answers are not good answers. Furthermore, this was already provided as an answer here. Please don't duplicate answers as well.

Collectives™ on Stack Overflow

Unexpected multiple logs of Component render count

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related