Zwischenspeichern Sie Ihren Fetcher in useSWR mit useCallback.

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, dieses Code-Snippet zu verstehen.

Wir 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 mit Funktionsreferenzen umgeht 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 einschließen, 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 Build-from-Scratch

an

Über mich:

Website: https://ramunarasinga.com/

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

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

E-Mail: ramu.narasinga@gmail.com

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%3Agitroomhq%2Fgitroom%20useSWR&type=code
3. https://swr.vercel.app/docs/getting-started
4. https://react.dev/reference/react/useCallback

Das obige ist der detaillierte Inhalt vonZwischenspeichern Sie Ihren Fetcher in useSWR mit useCallback.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!