Почему не происходит повторный рендеринг компонента, использующего мемоизацию, если в нем есть переменная с данными, и мы не используем useMemo?

Почему компонент MemoCountBtn не перерисовывается при ререндере родителя, когда используется мемоизация и отсутствует useMemo для переменной data? Однако, если функция foo определена без использования useCallback, то MemoCountBtn перерисовывается, несмотря на изменения переменной data при ререндере родителя.
  • 14 февраля 2024 г. 20:28
Ответы на вопрос 2
Когда компонент использует мемоизацию с помощью `React.memo`, он сравнивает изменения только в пропсах компонента, но не внутренних переменных. 

В случае, когда в компоненте `MemoCountBtn` нет использования `useMemo`, и `data` является внутренней переменной компонента, `React.memo` не будет выполнять повторный рендеринг компонента при изменении `data`.

Однако, если функция `foo` определена без использования `useCallback`, это приведет к созданию новой функции `foo` при каждом ререндере родительского компонента. И поскольку функции считаются новыми пропсами, `MemoCountBtn` будет перерисовываться при каждом ререндере родителя, даже если `data` остается неизменным.

Если вы хотите, чтобы `MemoCountBtn` перерисовывался только при изменении `data`, вы можете использовать `useMemo` для мемоизации значения `foo`, чтобы предотвратить создание новой функции `foo` при каждом ререндере родителя. Например:

```
const foo = useMemo(() => {
  return () => {
    // ...
  };
}, [data]);
```

Теперь `foo` будет сохраняться между ререндерами, пока значение `data` не изменится, и `MemoCountBtn` будет перерисовываться только при изменении `data`.
Потому что memo использует поверхностное сравнение, а у вас на входе примитив (просто число). А если функцию написать без useCallback она действительно создаётся новая, а в текущем useCallback пустой список зависимостей - значит и функция не будет пересоздаваться (это и не нужно).
Похожие вопросы