Reactjs Data Fetching Useeffect Swr React Query

Definisi

Mengambil data eksternal di React: pola dasar pakai useEffect + fetch + state (loading/error/data). Library SWR / React Query menambahkan caching, revalidation, dan dedupe tanpa boilerplate.

Kapan dipakai

Pola useEffect cukup untuk kasus sederhana. Pakai SWR/React Query bila butuh cache, refetch otomatis, atau mutasi terkelola. Di Next.js, Server Component bisa fetch di server (lihat file 108).

Cara kerja

manual

jsx

const [data, setData] = useState(null);
const [err, setErr] = useState(null);