Notes on useSWR hook

January 3, 2024

useSWR Kurznotizen

SWR steht fuer "stale-while-revalidate". Daten werden sofort aus dem Cache gezeigt und im Hintergrund neu geladen.

Naming Konflikte vermeiden

Wenn du mehrere Custom Hooks nutzt, benenne die Properties um:

code

const { data, mutate, isLoading, error } = useInit();

const {
  data: weather,
  mutate: mutateWeather,
  isLoading: isWeatherLoading,
  error: weatherError,
} = useWeather();

Typische Optionen

revalidateOnFocus: bei Tab-Wechsel neu laden
dedupingInterval: Requests zusammenfassen
fallbackData: initiale Daten

Mutate

mutate() aktualisiert den Cache:

code

await mutate("/api/items");

Oder optimistic update:

code

mutate(key, newData, { revalidate: false });

Praxis-Tipp

Schluessel (key) stabil halten: useSWR(["/api/items", pageId]) statt String concat.