我可以在 useMemo 中安全导航吗

Question

Can I use the && style safe navigation or lodash get in useMemo's second parameter like this:

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

Answer 1

Yes, but not without warning.

React Hook useMemo has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked. (react-hooks/exhaustive-deps)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>
  );
}

Better solution would be to factor it into a single variable as suggested, or use the entire state value and handle it internally. Keep in mind the more you minimize the surface area of reference mutations then the more stable your memoized value will be.

If you are certain a state value like this will always have that shape, then I think you can safely use state.data as a dependency.

I generally prefer NOT to use complex objects in react useState hooks (you certainly can) and will break the object properties into their own state hooks. This allows you to update "parts" of your state without mutating references to the rest. This is especially advantageous in situations like yours where maybe you're not sure state.abcdata is a complete and valid defined object reference. Or some other hooks depend only on part of your component state.