如何確定 React.useCallback 的依賴列表？

Question

考慮以下示例，其中resetCount function 也可以在空依賴項列表中正常工作。

那么，我們應該在它的依賴項中包含setCount嗎？
有什么要記住的指導方針嗎？
我很想知道 React.useCallback 中依賴列表的指南。

import React, { useState, useCallback } from 'react';
import { render } from 'react-dom';

import Child from "./Child";
import './style.css';

const Parent = () => {
  const [count, setCount] = useState(0);
  console.log("re-render parent component");

  const resetCount = useCallback(() => {
    setCount(0);
  }, [setCount]); // ([] as well as [setCount] - both work) So should this dependency contain setCount? 

  return (
    <main>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count=>(count+1))}>Increment</button>
      <Child reset={resetCount} />
    </main>
  )
}

render(<Parent />, document.getElementById('root'));

Answer 1

好吧，最明確的建議（對於不那么高級的 React 程序員來說也是最好的起點）是： 不要在依賴方面對 React 撒謊。 有了它，它將始終按預期工作，您不會感到驚訝。

現在，如果您知道某些事情不會改變，那么您可以對該規則進行例外處理。 對於useState鈎子返回的集合state function，是這樣的，所以可以省略它，但是放在那里也沒有壞處（因為它沒有改變，不會導致效果觸發） .