@uroot

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

Песочница: 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 должен отрендериться два раза. Что я делаю не так?
  • Вопрос задан
  • 91 просмотр
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы