React：ESLint 如何知道何时可以省略 useEffect 依赖项？

Question

React 的 useEffect 钩子通常需要将每个外部值添加到 dependencies 数组中。似乎有一些例外，例如 useState 的第二个数组项给出的 setState 函数，或 useReducer.

的 dispatch

据我了解，这是因为 React 保证 setState 永远不会改变，所以 ESLint 觉得不需要在依赖项中要求它。但是 ESLint 是怎么知道的呢？有没有办法让我指定一些永不改变的东西，让 ESLint 接受它并允许我省略“假依赖”？

一个例子：

function useCustomHook() {
  const [state, setState] = useState(false);
  return [state, setState];
}

function App() {
  const [state, setState] = useState(false);
  const [customState, setCustomState] = useCustomHook();

  useEffect(() => {
    setState(true);
  }, []); // ESLint does NOT complain that setState is missing

  useEffect(() => {
    setCustomState(true);
  }, []); // ESLint DOES complain that setCustomState is omitted

  //...
}

setState和上面的setCustomState其实是一样的，那么是什么触发了ESLint呢？

Answer 1

React 团队维护 React hooks ESLint plugin。该插件包含您描述的“智能”。

没有简单的方法来添加您自己的例外。我知道在很多情况下您知道不需要它，但最好只包含您自己的函数作为依赖项。如果它们真的是引用稳定的，那么差异开销几乎为零。如果它们因任何原因确实发生了变化，您会很高兴它被列为依赖项。

React：ESLint 如何知道何时可以省略 useEffect 依赖项？

React: How does ESLint know when a useEffect dependency can be omitted?

reactjs

eslint