Aplikasi modern memerlukan pengambilan data dinamis dari REST API. React menyediakan hook useEffect untuk menangani side-effects seperti data fetching, polling, subscribe, dan memanipulasi DOM secara manual.

Struktur Dasar useEffect

Hook useEffect menerima dua argumen: sebuah fungsi callback side-effect dan sebuah array dependensi (dependency array).

import { useEffect } from 'react';

useEffect(() => {
  // side-effect logic di sini
  
  return () => {
    // optional: cleanup logic di sini
  };
}, [dependency]); // array dependensi

Implementasi Fetching Data Produk

Berikut contoh component React yang menarik data dari mock API produk menggunakan fetch API:

import { useState, useEffect } from 'react';

interface Product {
  id: number;
  title: string;
  price: number;
}

export default function ProductList() {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    setLoading(true);
    fetch('https://fakestoreapi.com/products?limit=5')
      .then(res => res.json())
      .then(data => {
        setProducts(data);
        setLoading(false);
      })
      .catch(err => {
        console.error("Gagal menarik data:", err);
        setLoading(false);
      });
  }, []); // Array kosong berarti request hanya dipicu 1x saat load awal (mount)

  if (loading) return <p className="p-4">Sedang memuat data...</p>;

  return (
    <div className="p-6 bg-white dark:bg-zinc-900 rounded-xl">
      <h2 className="text-xl font-bold mb-4">Daftar Produk Baru</h2>
      <ul className="space-y-2">
        {products.map(product => (
          <li key={product.id} className="p-3 border rounded-lg flex justify-between">
            <span>{product.title}</span>
            <span className="font-bold text-indigo-600">${product.price}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

Referensi Belajar Resmi

• Dokumentasi useEffect Resmi React
• MDN Web Docs: Fetch API