React useCallback 設置依賴於在回調中調用的 function

Question

我正在使用 react 開發 web 應用程序，並看到它在那里實現。 它是這樣的：

const onAddNewAccount = useCallback(async () => {
   await refetch();
   setOtherState((prev) => {...});
},
[refetch]);

我不明白為什么要這樣做，這實際上是正確的嗎？ 因為據我了解，回調將在依賴項之一發生變化時被調用。

從我所見，調用refetch實際上不會觸發useCallback可能是因為它只是被調用了嗎？ 沒有改變。

所以基本上我需要幫助來理解他們為什么這樣做。

Answer 1

回調將在依賴項之一發生變化時被調用。

不，它不會被調用，它只會被重新創建。 useCallback的目的是記住 function 並在沒有任何變化的情況下重用它。 換句話說，它試圖從渲染 1 的onAddNewAccount === 來自渲染 2 的onAddNewAccount做到這一點。

如果refetch更改，則 memoization 將中斷並創建一個新的 function。 這樣，新的onAddNewAccount可以在需要時調用新的重新獲取。 如果refetch永遠不會改變，那就太好了：memoization 可以永遠持續下去。