functional component with React.useCallback and React.memo() is re-rendering

Question

I was understanding the concepts of React. I wanted to try out few things.

Some of them are:

When parent state changes, does every functional child component re-renders, even if it doesn't have any props.

Seems like yes, this is my parent code:

function App() {


const [count, setCount] = React.useState(0);

  return (
    <div className="App">
      <AnimalX />
      <h1
        onClick={() => {
          setCount(count + 1);
        }}
      >
        InCrease Count {count}
      </h1>
    </div>
  );
}

export default App;

My AnimalX component:

export const AnimalX = React.memo(() => {
  return <div>{console.log("in render")}jhgh</div>;
});

When I was clicking on the H1 tag, my child component was rendering. To fix this I used React.memo() which prevented the re-render.

Now, I went ahead and started exploring useCallback. I read it about it that it caches the function b.w. different renders. So I changed my parent component and passed a prop like this:

function App() {
  const [count, setCount] = React.useState(0);

  const testFunction = React.useCallback(() => {
    console.log("testFunction");
  });

  return (
    <div className="App">
      <AnimalX show={testFunction} />
      <h1
        onClick={() => {
          setCount(count + 1);
        }}
      >
        InCrease Count {count}
      </h1>
    </div>
  );

Now, my assumption was that my AnimalX component will only render once, because I've used React.memo Inside it, and I am passing cached version of function. But that's not the case.

My Child Component was re-rendering with every click. Which made me shocked. And I am not able to figure out the reason.

If anyone can point me in right direction then it would be highly appreicated.

Dennis Vash · Accepted Answer · 2021-08-12 17:25:20Z

1

You missed the API, you should get an eslint warning too, missing a dependency array as second argument:

//                                                    v Deps array
const testFunction = React.useCallback(() => { ... }, []);

Refer to useCallback API at React docs.

answered Aug 12, 2021 at 17:25

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

2 Comments

Rahul Over a year ago

is this hook special, like in useEffect we can skip the deps if we want to run the useEffect only once? @dennis

Dennis Vash Over a year ago

You should never skip or miss dependencies, always fill what the linter suggests or rewrite the logic considering JS closures as per your use case. In a general case, unlike with useEffect, empty dep array in useCallback is usually a premature optimization and a hint for moving the function into outer scope etc. Explore "useCallback hell" in google.

Collectives™ on Stack Overflow

functional component with React.useCallback and React.memo() is re-rendering

When parent state changes, does every functional child component re-renders, even if it doesn't have any props.

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

When parent state changes, does every functional child component re-renders, even if it doesn't have any props.

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related