傳遞給 react-query 的 useQuery 鈎子的參數是否應該是參考穩定的？

Question

我正在瀏覽一個現有的代碼庫，查看一些使用useQuery的數據獲取鈎子

我注意到，幾乎在所有地方，都要小心，以便在useQuery鈎子（和其他類似react-query鈎子）中傳遞的參數在鈎子執行之間是相同的。

例如

//custom_data_fetching_hook.js

import { useQuery } from 'react-query';

function fetchSomeStuff() {
  // server data request implementation
}

const queryOptions = {
 // object as described in the 3rd argument here:
 // https://react-query.tanstack.com/reference/useQuery
};

export function useSomeServerStuff() {
  return useQuery(['query key'], fetchSomeStuff, queryOptions);
}

我的問題是這樣的：

是否有必要確保useQuery 、 useMutation等參數的引用穩定性？ 據我所知，文檔並沒有說你應該這樣做。

如果它們的參數在渲染之間的引用不同， react-query hooks 會在每個組件上重新渲染重做計算嗎？

如果它們的參數在渲染之間的引用不同， react-query鈎子會在它們的返回對象值中返回一些引用不同的項目嗎？ （例如useMutation的返回對象內的mutate函數）

Answer 1

據我所知：不，論點不需要是參照穩定的。

現在到我回答中比較冗長的部分：我只能根據我的觀察來回答這個問題； 我也不知道react-query的內部結構（所以也許@TkDodo出現並駁斥了我的回答或指出了一些隱藏的后果，在這種情況下：繼續他的回答），我也無法將您指向文檔的任何部分。 我現在在一個項目中使用 react-query 6 個月。 我經常看瀏覽器開發工具的網絡標簽。 我們經常這樣使用鈎子：

const { data } = useQuery(
  ['productdetails', itemID],
  () => api.getProduct(itemID),
  { retry: false },
);

如您所見，參數是內聯的； 每次重新渲染箭頭函數都是一個新的函數實例，而選項對象是一個新的對象實例。 這不會導致任何重新獲取。 據我了解，查詢鍵數組的內容將與其以前的對應項進行相等比較，並且當其中一個發生更改時，將重新獲取數據。 （或者其他一些代碼顯式地使查詢無效，這也會觸發重新獲取。）

但是將選項移動到常量或引用穩定的 fetch 函數仍然有意義：我有時這樣做是為了提高可讀性、清晰度或清潔度。 將任何不是真正動態的東西移出渲染函數通常是令人滿意的，因此看到渲染函數變得非常精簡和苗條，以至於它完全適合屏幕而無需滾動。