React Hooks 獲取后通過 useMemo 缺少依賴項

Question

我正在創建useMyData鈎子，它執行以下操作：

1. 根據其輸入參數（ dependencies ）從某些 API 獲取原始數據
2. 使用一個昂貴的函數轉換數據（ expensiveMath ）
3. 記憶並返回結果

我的函數如下所示：

function useMyData(...dependencies) {
  const raw = useFetch(mkUrl(dependencies), dependencies)
  const data = useMemo(() => expensiveMath(raw), dependencies)
  return data
}

raw只依賴於dependencies數組，而expensiveMath只依賴於raw ，這意味着它只依賴於輸入參數（ dependencies ）。

當輸入參數沒有改變時，我想避免調用expensiveMath的數學。

但問題是我收到了這個 ESLint 錯誤：

ESLint 錯誤：

React Hook useMemo has a missing dependency: 'raw'. 
Either include it or remove the dependency array 
react-hooks/exhaustive-deps

我不能使用raw作為useMemo的依賴useMemo ，因為它是一個復雜對象的大數組，長度不可預測。

我的用例的最佳實踐是什么？

Answer 1

如果您不在依賴項中包含raw ，那么您的代碼將無法運行，因為raw將在獲取完成時更改。

在第一次渲染時， useFetch被調用並啟動一個請求，然后返回一些占位符。 如果useFetch是這個庫，那么該占位符是一個具有loading: true和data: undefined 。 接下來useMemo運行，並在該加載占位符上執行expensiveMath useMemo 。

在第二次渲染中， useFetch現在完成並返回真實數據。 但是由於useMemo沒有將 raw 列為依賴項，所以重用了記憶值。 你不會對真實的原始數據做expensiveMath的數學。

因此，解決方法是將raw放入依賴項數組中：

const data = useMemo(
  () => expensiveMath(raw), 
  [raw]
)

現在expensiveMath當抓取完成將重新開始。 我認為沒有必要將dependencies放入 useMemo，因為在這部分代碼中沒有使用它們。

我不能使用 raw 作為 useMemo 的依賴項，因為它是一個復雜對象的大數組，長度不可預測。

大小無所謂。 useMemo只是在前一個值和新值之間進行引用相等性檢查。 因此，只要useFetch以合理的方式編寫，以便在沒有任何更改時返回穩定的引用，它就會起作用。