使用useContext+useReducer的React应用：useEffect依赖警告问题咨询

首先直接给结论：你应该把dispatch添加到useEffect的依赖数组里，这是最安全且符合React Hook规则的做法，完全不用担心会带来额外的性能问题。

为什么可以放心加？ #

React的useReducer Hook返回的dispatch函数是在组件整个生命周期内保持引用不变的——不管组件重渲染多少次，这个dispatch的地址都不会变。所以把它加入依赖数组后，useEffect不会因为dispatch的变化而重复执行，和你原来的空依赖数组效果完全一致，但却能消除ESLint的警告，同时避免潜在的过时闭包问题。

修改后的代码示例 #

function BookList() { 
  const [state, dispatch] = useContext(BookContext); 
  const [loading, setLoading] = useState(true); 
  useEffect(() => { 
    BookService
      .fetchBooks()
      .then(resp => { 
        setLoading(false); 
        dispatch({ type: FETCH_BOOKS, books: resp.data }); 
      }); 
  }, [dispatch]); // 添加dispatch到依赖数组
  return ( 
    <div> 
      {loading ? "Loading ..." : state.books.map(book => ( 
        <div key={book.id}>{`${book.title} - $${book.price}`}</div>)) } 
    </div> 
  ); 
}

要不要用其他方案（比如禁用警告）？ #

你当然可以用// eslint-disable-next-line react-hooks/exhaustive-deps注释来强行屏蔽这个警告，但这是不推荐的。虽然现在dispatch是稳定的，但如果未来你的BookContext实现发生变化（比如自定义了一个返回不稳定dispatch的Provider），这个注释会直接隐藏掉潜在的bug，让你很难排查。

遵循React的Hook规则添加依赖，是长期维护代码的最优选择。

内容的提问来源于stack exchange，提问作者f1nan