Fetching Data — CompileDaily Study

Penjelasan

Mengambil data dari API di React biasanya dilakukan lewat fetch() (atau library seperti axios) di dalam useEffect, dikombinasikan dengan state terpisah untuk data, loading, dan error — supaya UI bisa menampilkan indikator loading atau pesan error dengan tepat.

Contoh Konsep

import { useState, useEffect } from 'react';

function DaftarProduk() {
    const [produk, setProduk] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetch('https://api.contoh.com/produk')
            .then((res) => res.json())
            .then((data) => setProduk(data))
            .catch((err) => setError(err.message))
            .finally(() => setLoading(false));
    }, []);

    if (loading) return <p>Memuat...</p>;
    if (error) return <p>Error: {error}</p>;

    return (
        <ul>
            {produk.map((item) => <li key={item.id}>{item.nama}</li>)}
        </ul>
    );
}

Praktikum

Buat komponen DaftarArtikel dengan state artikel, loading, dan error. Di useEffect, fetch dari 'https://api.contoh.com/artikel', tangani sukses (isi state artikel) dan gagal (isi state error), lalu tampilkan kondisional sesuai ketiga state itu.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Selalu tulis dependency array [] di useEffect untuk fetch yang cuma perlu dijalankan sekali saat komponen muncul — kalau lupa (atau salah isi dependency-nya), fetch bisa terus berulang tanpa henti setiap kali komponen dirender ulang, membebani API tanpa perlu.