当依赖项是对象时如何使用 useCallback、useMemo 和 React.memo？

【问题标题】：How to use useCallback, useMemo and React.memo when dependency is an object?当依赖项是对象时如何使用 useCallback、useMemo 和 React.memo？
【发布时间】：2021-12-26 15:59:39
【问题描述】：

我有useMemo，当它的一个依赖项是我从服务器获得的Object，所以即使对象的内容相同 - useMemo 在每次同步中被一遍又一遍地调用来自服务器，因为对象本身每次都不一样，当然useCallback和React.memo是一样的。

我该如何解决这个问题？

我正在考虑手动检查新结果是否与之前的结果具有相同的内容，如果有，请保留之前的对象引用。

【问题讨论】：

标签： reactjs memoization usecallback react-usememo react-memo

【解决方案1】：

真的有两个选择：

按您的计划做，即如果对象与您收到的对象深度相等（例如deep-equal on npm），则不要更改对象：

const [obj, setObj] = React.useState();
// ...
const newObj = await getObjectFromServer();
// Using the function form of setState to avoid races and an extra
// dependency on `obj`:
setObj(oldObj => equal(newObj, oldObj) ? oldObj : newObj);

取决于memo 使用的字段，而不是完整的对象：
- 不是这个：
```
React.useMemo(() => obj.foo + 8, [obj]);
```
- 但是这个：
```
React.useMemo(() => obj.foo + 8, [obj.foo]);
```
但是，如果 obj.foo 本身不是原始的，这可能很容易变得麻烦并且无济于事。

【讨论】：