Могу ли я безопасно перемещаться внутри useMemo

Question

Могу ли я использовать безопасную навигацию в стиле && или loda sh get во втором параметре useMemo, например:

useMemo(() => {
  return {
    ...
  }
}, [state && state.data])  // or with lodash: get(state, 'data')

Answer 1

Да, но не без предупреждения.

React Hook useMemo имеет сложное выражение в массиве зависимостей. Извлеките его в отдельную переменную, чтобы его можно было статически проверить. (ответные зацепки / исчерпывающее углубление) eslint

export default function App() {
  const [state, setState] = useState({ data: 'foobar' });

  const memoizedState = useMemo(() => {
    return state.data + state.data;
  }, [state && state.data]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{memoizedState}</h2>
    </div>
  );
}

Лучшим решением было бы объединить его в одну переменную, как это предлагается или используйте полное значение состояния и обработайте его внутренне. Имейте в виду, что чем больше вы минимизируете площадь поверхности эталонных мутаций, тем более стабильным будет ваше запомненное значение.

Если вы уверены, что значение состояния, подобное этому, всегда будет иметь эту форму, тогда я думаю, что вы можете безопасно использовать state.data в качестве зависимости.

Я обычно предпочитаю NOT использовать сложные объекты в хуках реагировать useState (вы, конечно, можете) и сломать объект свойства в их собственное состояние хуков. Это позволяет вам обновлять «части» вашего состояния, не изменяя ссылки на остальные. Это особенно полезно в таких ситуациях, как ваша, где, возможно, вы не уверены, state.a.b.c.data является полной и действительной ссылкой на определенный объект. Или некоторые другие хуки зависят только от от состояния вашего компонента.