我找到了一種在 Gitroom 原始碼中使用 useCallback 在 useSWR 中快取 fetcher 的方法。

上圖來自platform-analytics/render.analytics.tsx。讓我們試著理解這段程式碼片段。

我們將探索如何結合使用 useCallback 鉤子和 useSWR 來優化 React 應用程式中的資料擷取。我們將分解提供的程式碼片段，解釋為什麼快取 fetcher 函數很重要。

理解程式碼

讓我們一步一步深入程式碼：

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

在這裡，我們在 useCallback 掛鉤內定義非同步函數載入。此函數從指定端點取得資料並處理載入狀態。 useCallback 掛鉤確保此函數被記憶，並且僅在依賴項（整合和日期）變更時重新建立。

接下來，我們使用useSWR來管理資料取得：

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

這裡，useSWR 設定了一個鍵 (/analytics-${integration?.id}-${date}) 和我們的記憶載入函數。配置選項控制資料的重新驗證行為。

useCallback 如何防止不必要的重新獲取

要了解 useCallback 如何防止不必要的重新獲取，我們需要深入研究 React 如何處理函數引用以及 useSWR 如何運作。

React 中的函數引用

在 React 中，每次元件重新渲染時，其中定義的所有函數都會重新建立。這意味著如果沒有 useCallback，將在每次渲染時建立載入函數的新實例。

對 useSWR 的影響

useSWR 是 React 的資料取得庫。它使用密鑰來識別數據，並使用獲取器函數來獲取數據。 useSWR 依賴 fetcher 函數所引用的穩定性。如果引用發生變化，useSWR 可能會將其解釋為需要重新獲取資料的訊號，即使獲取器的實際邏輯沒有改變。

詳細解釋如下：

1. 沒有 useCallback：

const load = async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
};

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

在這種情況下，每個渲染都會建立一個新的載入函數。 useSWR 每次都會看到不同的函數引用，即使整合和日期沒有更改，這也可能導致不必要的重新取得。

With useCallback:

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

透過將載入函數包裝在 useCallback 中，我們確保僅在其依賴項（整合和日期）發生變化時才重新建立它。函數引用的這種穩定性告訴 useSWR，除非集成或日期發生更改，否則獲取器函數不會更改，從而防止不必要的重新獲取。

想學習如何從頭開始建立 shadcn-ui/ui 嗎？查看 從頭開始建造

關於我：

網址：https://ramunarasinga.com/

Linkedin：https://www.linkedin.com/in/ramu-narasinga-189361128/

Github：https://github.com/Ramu-Narasinga

電子郵件：[email protected]

從頭開始建構 shadcn-ui/ui

參考：

1. https://github.com/gitroomhq/gitroom/blob/c03b96215fa30b267a97d7eafc2281f482a3192f/apps/frontend/src/components/platform-analytics/rtsender#anaytics.
2. https://github.com/search?q=repo:gitroomhq/gitroom useSWR&type=code
3. https://swr.vercel.app/docs/getting-started
4. https://react.dev/reference/react/useCallback