Ternyata Selama Ini Saya Fetching Data Tidak Efisien di React

Lebih dari setahun sudah saya bekerja dengan React, membuat berbagai macam website dan aplikasi, namun akhir-akhir ini saya menyadari bahwa saya belum menggunakan cara yang efisien dalam melakukan fetching data. Saya sering menggunakan axios atau fetch secara manual, tanpa memperhatikan caching, revalidasi, atau optimasi lainnya.

Baru-baru ini, saya menemukan sebuah pustaka yang menarik untuk melakukan data fetching di React, yaitu SWR. Saya ingin berbagi pengetahuan ini kepada teman-teman, agar juga bisa memanfaatkan SWR untuk membuat aplikasi React yang lebih cepat dan responsif.

SWR (Stale-While-Revalidate) adalah pustaka React yang dikembangkan oleh Vercel untuk melakukan data fetching secara efisien. SWR menawarkan solusi yang cepat, otomatis, dan mudah digunakan dalam pengambilan data dari API.

1. Apa Itu SWR?

SWR menggunakan strategi Stale-While-Revalidate, yaitu:

• Mengembalikan data dari cache terlebih dahulu (stale)
• Kemudian melakukan fetch ulang untuk memperbarui data (revalidate)
• Memperbarui state jika ada perubahan data

Strategi ini membuat aplikasi terasa lebih responsif karena pengguna tidak perlu menunggu data terbaru sebelum melihat konten.

2. Menggunakan useSWR

useSWR adalah hook utama yang digunakan untuk mengambil data. Contoh penggunaannya:

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then((res) => res.json());

function MyComponent() {
  const { data, error, isLoading } = useSWR('/api/users', fetcher);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading data</p>;

  return <div>{JSON.stringify(data)}</div>;
}

3. Menggunakan mutate

mutate atau bahasa Indonesia nya mutasi, digunakan untuk memperbarui cache secara manual dan melakukan re-fetching data setelah perubahan. Contoh implementasi:

import useSWR, { mutate } from 'swr';

const fetcher = (url: string) => fetch(url).then((res) => res.json());

function MyComponent() {
  const { data } = useSWR('/api/users', fetcher);

  const updateData = async () => {
    // Memperbarui cache sebelum fetch ulang
    mutate('/api/users', { name: 'John Doe' }, false);

    // Melakukan re-fetching data
    await mutate('/api/users');
  };

  return (
    <div>
      <p>Data: {JSON.stringify(data)}</p>
      <button onClick={updateData}>Update Data</button>
    </div>
  );
}

4. Kelebihan SWR

• Otomatis caching dan revalidasi
• Mendukung pagination dan infinite loading
• Polling otomatis untuk data real-time
• Optimistic UI updates dengan mutate

Cara saya fetching data sebelum menggunakan SWR:

import { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true;

    const fetchData = async () => {
      try {
        setIsLoading(true);
        const response = await fetch('/api/users');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        if (isMounted) {
          setData(result);
          setIsLoading(false);
        }
      } catch (err) {
        if (isMounted) {
          setError(err);
          setIsLoading(false);
        }
      }
    };

    fetchData();

    return () => {
      isMounted = false;
    };
  }, []);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading data: {error.message}</p>;

  return <div>{JSON.stringify(data)}</div>;
}

Setelah implementasi SWR:

import useSWR, { mutate } from 'swr';
import { useMemo } from 'react';
import { fetcher } from 'utils/axios';

export type ModuleType = {
  id?: number;
  label: string;
  name: string;
  allowed_actions: string[];
  status?: boolean;
};

type ModuleList = ModuleType[];

export const endpoints = {
  key: 'api/v1/modules'
};

export function useGetModules(search = '', page = 1, limit = 10) {
  const key = `${endpoints.key}?search=${search}&page=${page}&limit=${limit}`;

  const { data, error } = useSWR(key, fetcher, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  });

  return useMemo(
    () => ({
      lists: (data?.data?.modules as ModuleList) ?? [],
      totalPages: data?.data?.total_pages || 1,
      totalItems: data?.data?.total_items || 10,
      isLoading: !error && !data,
      isError: error
    }),
    [data, error]
  );
}

Kekurangan Cara Lama:

• Tidak Ada Caching Otomatis → Setiap kali komponen dirender ulang, data akan selalu di-fetch ulang dari server.
• Harus Mengelola State Secara Manual → Perlu membuat useState untuk menyimpan data, error, dan status loading.
• Tidak Ada Revalidasi Otomatis → Jika data berubah di server, komponen tidak akan tahu dan tidak akan memperbarui datanya.
• Tidak Ada Fetch Deduplication → Jika banyak komponen mem-fetch data yang sama, setiap komponen akan melakukan request terpisah.

Kesimpulan

SWR adalah solusi yang efisien untuk data fetching di React. Dengan caching otomatis dan fitur mutate, SWR membuat aplikasi lebih cepat dan responsif tanpa perlu konfigurasi kompleks. Jika ingin meningkatkan performa aplikasi dengan cara yang sederhana, SWR adalah pilihan yang tepat!

Sekian artikel keren saya kali ini, semoga bermanfaat dan terima kasih sudah membaca!