Ich habe eine Möglichkeit gefunden, den Fetcher in useSWR mithilfe von useCallback im Gitroom-Quellcode zwischenzuspeichern.

Das obige Bild stammt von platform-analytics/render.analytics.tsx. Versuchen wir, diesen Codeausschnitt zu verstehen.

Wir werden untersuchen, wie Sie den Datenabruf in Ihren React-Anwendungen mithilfe des useCallback-Hooks in Kombination mit useSWR optimieren können. Wir werden das bereitgestellte Code-Snippet aufschlüsseln und erklären, warum das Zwischenspeichern Ihrer Abruffunktion wichtig ist.

Den Kodex verstehen

Lassen Sie uns Schritt für Schritt in den Code eintauchen:

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

Hier definieren wir einen asynchronen Funktionsladevorgang innerhalb eines useCallback-Hooks. Diese Funktion ruft Daten von einem angegebenen Endpunkt ab und verarbeitet den Ladestatus. Der useCallback-Hook stellt sicher, dass diese Funktion gespeichert und nur dann neu erstellt wird, wenn sich die Abhängigkeiten (Integration und Datum) ändern.

Als nächstes verwenden wir useSWR, um den Datenabruf zu verwalten:

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

Hier wird useSWR mit einem Schlüssel (/analytics-${integration?.id}-${date}) und unserer gespeicherten Ladefunktion konfiguriert. Die Konfigurationsoptionen steuern das Revalidierungsverhalten der Daten.

So verhindert useCallback unnötige erneute Abrufe

Um zu verstehen, wie useCallback unnötige erneute Abrufe verhindert, müssen wir uns damit befassen, wie React Funktionsreferenzen verarbeitet und wie useSWR funktioniert.

Funktionsreferenzen in React

In React werden jedes Mal, wenn eine Komponente erneut gerendert wird, alle darin definierten Funktionen neu erstellt. Das bedeutet, dass ohne useCallback bei jedem Rendern eine neue Instanz Ihrer Ladefunktion erstellt würde.

Auswirkungen auf die VerwendungSWR

useSWR ist eine Datenabrufbibliothek für React. Es verwendet einen Schlüssel, um die Daten zu identifizieren, und eine Abruffunktion, um sie abzurufen. useSWR ist auf die Stabilität der Abruffunktionsreferenz angewiesen. Wenn sich die Referenz ändert, interpretiert useSWR dies möglicherweise als Signal, dass die Daten erneut abgerufen werden müssen, auch wenn sich die eigentliche Logik des Abrufers nicht geändert hat.

Hier ist eine ausführliche Erklärung:

1. Ohne 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,
});

In diesem Fall erstellt jedes Rendern eine neue Ladefunktion. useSWR sieht jedes Mal eine andere Funktionsreferenz, was zu unnötigen erneuten Abrufen führen kann, selbst wenn sich Integration und Datum nicht geändert haben.

Mit 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,
});

Indem wir die Ladefunktion in useCallback einbinden, stellen wir sicher, dass sie nur dann neu erstellt wird, wenn sich ihre Abhängigkeiten (Integration und Datum) ändern. Diese Stabilität in der Funktionsreferenz teilt useSWR mit, dass sich die Abruffunktion nicht geändert hat, es sei denn, die Integration oder das Datum ändern sich, wodurch unnötige erneute Abrufe vermieden werden.

Möchten Sie lernen, wie man shadcn-ui/ui von Grund auf erstellt? Schauen Sie sich an Build-from-Scratch

Über mich:

Website: https://ramunarasinga.com/

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

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

E-Mail: [email protected]

Shadcn-ui/ui von Grund auf erstellen

Referenzen:

1. https://github.com/gitroomhq/gitroom/blob/c03b96215fa30b267a97d7eafc2281f482a3192f/apps/frontend/src/components/platform-analytics/render.analytics.tsx#L25
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