React useEffect 依赖数组中的 Setstate答案

【问题标题】：setState in React's useEffect dependency arrayReact useEffect 依赖数组中的 Setstate
【发布时间】：2020-04-29 17:37:38
【问题描述】：

在 useEffect 的依赖数组中定义 setState 值背后的想法是什么：

const [someState, setSomeState] = useState();
...
useEffect(() => {
  // Do something
  setSomeState('some value');
}, [setSomeState]);

React Hook useEffect has a missing dependency: 'setSomeState'.
Either include it or remove the dependency array.
eslint(react-hooks/exhaustive-deps)

不确定这个例子是否会导致 eslint 要求在依赖数组中定义 setSomeState，但是我在使用 useEffect 编写时看到了这种时刻。在这种情况下，React 在听什么？我的理解是useEffect 监听依赖数组中值的变化，但setSomeState 会改变吗？我在这里错过了什么？

【问题讨论】：

写在React docs:React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.

标签： reactjs dependencies use-effect

【解决方案1】：

在这种情况下，不，useState setter 函数永远不会改变，但useEffect 不知道它是来自另一个钩子的函数，它只是看到一个函数。

考虑这个用例：

const MyComponent = ({ onUpdate }) => {
  const [state, setState] = useState();
  useEffect(() => {
    // state updated, call onUpdate callback with state
    onUpdate(state);
  }, [onUpdate, state]);
  return ...
}

现在父组件可以，给定

<MyComponent onUpdate={onUpdateHandler} />

将onUpdateHandler定义为

let onUpdateHandler = console.log;

然后在仍然挂载时更改它

onUpdateHandler = state => dispatch({ type: 'SAVE_STATE', state });

通过将回调放在依赖数组中，效果挂钩会看到 onUpdate 的值发生变化并再次触发效果。如果它不包含回调，那么它将继续 console.log 状态更新，而不是现在以不同的方式处理它。

值改变的可能性比函数改变的可能性大，但是函数值可以改变。您可能有一个 eslinter 建议您将钩子中使用的所有变量添加到依赖数组中，这在大多数情况下是正确的做法。一些例外情况是，例如，当您希望通过指定空数组装载组件时仅计算效果，或者不包括您知道的一些函数变量在组件的生命周期内永远不会改变，在这些情况下，您可以使用 eslint-disable-next-line react-hooks/exhaustive-deps 覆盖将其取消标记为警告。但请注意，因为这将禁用 linting 检查，因此如果不注意，错误可能会潜入。

【讨论】：