Cache pengambil anda dalam useSWR dengan useCallback.

Saya temui cara yang menyimpan cache fetcher dalam useSWR menggunakan useCallback dalam kod sumber Gitroom.

Imej di atas adalah daripada platform-analytics/render.analytics.tsx. Mari cuba fahami coretan kod ini.

kami akan meneroka cara mengoptimumkan pengambilan data dalam aplikasi React anda menggunakan cangkuk useCallback dalam kombinasi dengan useSWR. Kami akan memecahkan coretan kod yang disediakan, menerangkan sebab caching fungsi fetcher anda adalah penting.

Memahami Kod

Mari menyelami kod langkah demi langkah:

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

Di sini, kami mentakrifkan beban fungsi tak segerak di dalam cangkuk useCallback. Fungsi ini mengambil data dari titik akhir yang ditentukan dan mengendalikan keadaan pemuatan. Cangkuk useCallback memastikan bahawa fungsi ini dihafal dan hanya dicipta semula apabila kebergantungan (penyatuan dan tarikh) berubah.

Seterusnya, kami menggunakan useSWR untuk mengurus pengambilan data:

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

Di sini, useSWR dikonfigurasikan dengan kunci (/analytics-${integration?.id}-${date}) dan fungsi pemuatan memori kami. Pilihan konfigurasi mengawal tingkah laku pengesahan semula data.

Cara penggunaanCallback Menghalang Pengambilan Semula yang Tidak Perlu

Untuk memahami cara useCallback menghalang pengambilan semula yang tidak perlu, kita perlu menyelidiki cara React mengendalikan rujukan fungsi dan cara useSWR berfungsi.

Rujukan Fungsi dalam React

Dalam React, setiap kali komponen dipaparkan semula, semua fungsi yang ditakrifkan di dalamnya dicipta semula. Ini bermakna tanpa useCallback, tika baharu fungsi muat anda akan dibuat pada setiap pemaparan.

Kesan pada penggunaanSWR

useSWR ialah perpustakaan pengambilan data untuk React. Ia menggunakan kunci untuk mengenal pasti data dan fungsi pengambil untuk mengambilnya. useSWR bergantung pada kestabilan rujukan fungsi fetcher. Jika rujukan berubah, useSWR mungkin mentafsirkan ini sebagai isyarat bahawa data perlu diambil semula, walaupun logik sebenar pengambil tidak berubah.

Berikut ialah penjelasan terperinci:

1. Tanpa gunakanPanggil balik:

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

Dalam kes ini, setiap pemaparan mencipta fungsi beban baharu. useSWR melihat rujukan fungsi yang berbeza setiap kali, yang boleh membawa kepada pengambilan semula yang tidak perlu walaupun semasa penyepaduan dan tarikh tidak berubah.

Dengan penggunaanPanggil Balik:

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

Dengan membungkus fungsi beban dalam useCallback, kami memastikan ia hanya dicipta semula apabila kebergantungannya (penyatuan dan tarikh) berubah. Kestabilan dalam rujukan fungsi ini memberitahu useSWR bahawa fungsi fetcher tidak berubah melainkan penyepaduan atau tarikh berubah, sekali gus menghalang pengambilan semula yang tidak perlu.

Ingin belajar cara membina shadcn-ui/ui dari awal? Lihat bina-dari-conteng

tentang saya:

Laman web: https://ramunarasinga.com/

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

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

E-mel: ramu.narasinga@gmail.com

Bina shadcn-ui/ui dari awal

Rujukan:

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

Atas ialah kandungan terperinci Cache pengambil anda dalam useSWR dengan useCallback.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!