Why is the component rendered extra time if useCallback is used?

Question

React

Sandbox: https://codesandbox.io/s/quizzical-khayyam-55ggd

When mounting the root component, I set the double state via setTimeout:

useEffect(() => {
    setTimeout(() => {
      setState1((prevState) => ({
        ...prevState,
        name: [...prevState.name, "2"]
      }));
    }, 3000);

    setTimeout(() => {
      setState1((prevState) => ({
        ...prevState,
        status: false
      }));
    }, 5000);
  }, []);

I am passing state1.name to another component - App2. The App2 component is rendered three times - everything is OK, everything is logical. But I don't want the App2 component to re-render when the state1.status is set. Okay, let's use useCallback:

const getTablePaginationProps = useCallback(
    () => ({
      name: state1.name
    }),
    [state1.name]
  );

And we pass:
<App2 {...getTablePaginationProps()} />

But the component is still rendered three times, judging by the console.log in the child component. Why? After all, state1.name is set only once, so App2 must be rendered twice. What am I doing wrong?

Answer 1

https://codesandbox.io/s/cool-diffie-9z3rt?file=/s...