Почему компонент рендерится лишний раз если используется useCallback?

Question

[uRoot]

Песочница: https://codesandbox.io/s/quizzical-khayyam-55ggd

При монтировании корневого компонента я устанавливаю дваждый стейт через setTimeout:

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

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

Я передаю state1.name в другой компонент - App2. Компонент App2 рендердерится три раза - тут всё ок, всё логично. Но я не хочу, чтобы компонент App2 рендерился заново при установке стейта state1.status. Окей, юзаем useCallback:

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

И передаём:
<App2 {...getTablePaginationProps()} />

Но компонент по прежнему рендерится три раза, судя по console.log в дочернем компоненте. Почему? Ведь state1.name устанавливается только один раз, соответственно App2 должен отрендериться два раза. Что я делаю не так?

Answer 1

[ReactLover]

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

Comments

[uRoot]

Спасибо. Т.е. нужно использовать useMemo? А можете объяснить почему useCallback себя так ведёт? Вроде же его используют если нам не нужно рендерить лишний раз компонент.

[ReactLover]

uRoot, Дело не в useCallback, его тут тоже можно использовать. Но правильнее useMemo, потому что useCallback для мемоизации функций, а useMemo для мемоизации значений. Посмотри файл app2.tsx, там компонент нужно обернуть дополнительно в React.memo, он будет предотвращать рендер, если пропсы не изменились. По сути тут можно не использовать useMemo/useCallback https://codesandbox.io/s/angry-khayyam-mlkkj

[uRoot]

ReactLover,

Дело не в useCallback, его тут тоже можно использовать.

А как? А что-то крутил, вертел, ничего не получилось.

там компонент нужно обернуть дополнительно в React.memo

Да, пропустил я это

[uRoot]

ReactLover, я просто в проде вижу, что часто для передачи пачки параметров в компонент используется useCallback

[ReactLover]

uRoot,

А как? А что-то крутил, вертел, ничего не получилось.

Ровно так, как ты его использовал https://codesandbox.io/s/patient-bird-s4ncm

я просто в проде вижу, что часто для передачи параметров в компонент используется useCallback

Он используется для функций. Если у вас для вычисляемых значений используется useCallback а не useMemo, то это не правильно