useEffect 依赖数组和 ESLint Exclusive-deps 规则 [英] useEffect dependency array and ESLint exhaustive-deps rule

问题描述

我有一个看起来像这样的组件:

I have a component that looks like this:

const MyComponent = props => {
  const { checked, onChange, id } = props;
  const [isChecked, setChecked] = useState(false);

  useEffect(() => {
    onChange && onChange({ isChecked: !!checked, id });
    setChecked(checked);
  }, [checked]);

  const childProps = {
    id,
    isChecked
  };

  return <ChildComponent {...childProps} />;
};

详尽的 deps lint 规则并不令人满意:

The exhaustive-deps lint rule isn't happy:

React Hook useEffect 缺少依赖项:id 和 onChange.包括它们或删除依赖项数组.(react-hooks/exhaustive-deps)eslint

React Hook useEffect has missing dependencies: id and onChange. Either include them or remove the dependency array. (react-hooks/exhaustive-deps)eslint

我知道 id 和 onChange 不会改变，所以将它们添加到依赖数组似乎没有必要.但规则不是警告，而是明确指示去做某事.

I know that id and onChange are not going to change, so adding them to the dependency array seems unnecessary. But the rule isn't a warning, it's a clear instruction to do something.

是 ESLint 规则:

Is the ESLint rule:

1) 在这种情况下过于谨慎且有点愚蠢，所以可以无视?

1) Over-cautious and a bit dumb in this instance, so safe to ignore?

2) 突出最佳实践——例如，如果父组件的变化意味着 id 将在未来的某个时间点发生变化，那么尽量减少将来可能发生的意外错误?

2) Highlighting best practice - i.e. to minimise unexpected bugs that might occur in future if, for instance, changes in parent components mean that id will change at some point in future?

3) 显示当前代码的实际/可能问题?

3) Showing an actual/possible problem with the code as it currently is?

推荐答案

其实规则很简单:要么传递一个包含所有依赖项的数组，要么什么都不传递.所以我猜这个规则不是愚蠢的，它只是不知道依赖项是否会改变.所以是的，如果你传递一个依赖项数组，它应该包含所有依赖项，包括那些你知道的不会改变的事实.像这样的事情会发出警告:

Actually the rule is very straightforward: Either pass an array containing all dependencies, or don't pass anything. So I guess the rule isn't dumb, it just doesn't know if the dependencies are going to change or not. So yes, if you are passing an array of dependencies it should contain ALL dependencies, including those you know for a fact that will not change. Something like this will throw a warning:

useEffect(() => dispatch({ someAction }), [])

为了解决这个问题，你应该将 dispatch 作为依赖传递，即使它永远不会改变:

And to fix this you should pass dispatch as a dependency, even though it will never change:

useEffect(() => dispatch({ someAction }), [dispatch])

不要禁用详尽的 deps 规则，如此处

Don't disable the exhaustive deps rule, as mentioned here

如此处所述.由于 eslint pull #1950，这不再是必要的.

As addressed here. This is no longer necessary since eslint pull #1950.

现在可以安全地在效果中使用具有稳定签名的引用类型，例如来自 useState 或 useDispatch 的那些来源，而不会触发 exhaustive-deps即使来自 props

Now referential types with stable signature such as those provenients from useState or useDispatch can safely be used inside an effect without triggering exhaustive-deps even when coming from props

这篇关于useEffect 依赖数组和 ESLint Exclusive-deps 规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！