在 useEffect 函数中插入“调度”函数作为依赖项是否安全？

【问题标题】：Is safe to insert 'dispatch' function as a dependency in useEffect function?在 useEffect 函数中插入“调度”函数作为依赖项是否安全？
【发布时间】：2021-04-08 21:38:41
【问题描述】：

如果我用这个

  useEffect(() => {
dispatch(fetchToDos())}, [debouncedToDo, loginInfo.isLogin])

我收到此警告

React Hook useEffect 缺少一个依赖项：'dispatch'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

如果我在依赖数组中包含“dispatch”，警告就消失了。

像这样：

  useEffect(() => {
dispatch(fetchToDos())}, [dispatch, debouncedToDo, loginInfo.isLogin])

【问题讨论】：

标签： javascript reactjs redux react-redux react-hooks

【解决方案1】：

是的，dispatch 可以安全地添加到 useEffect 挂钩的依赖数组中。

来自docs

信息

只要将相同的存储实例传递给<Provider>，dispatch 函数引用就会保持稳定。一般，该存储实例在应用程序中永远不会更改。

但是，React hooks lint 规则不知道 dispatch 应该是稳定的，并会警告应该添加dispatch 变量到 useEffect 和 useCallback 的依赖数组。最简单的解决方案就是这样做：
export const Todos() = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchTodos())
  // Safe to add dispatch to the dependencies array
  }, [dispatch])
}

【讨论】：