Tutorial React Dasar Part 3: Menguasai Hook useEffect & Cara Mengambil Data REST API

Assalamualaikum Wr. Wb.

Tutorial React Dasar Part 3: Menguasai Hook useEffect & Cara Mengambil Data REST API | Bikin Aplikasi Dinamis dengan Loading State yang Rapi | Di Part 2 sebelumnya, kita sudah belajar membuat komponen kartu produk yang interaktif menggunakan Props dan useState. Namun, semua data yang kita tampilkan kemarin masih berupa data statis yang ditulis langsung di dalam kode (*hardcoded*). Pada aplikasi web dunia nyata, data produk, artikel blog, maupun profil pengguna diambil secara dinamis dari database melalui REST API backend. Di React, siklus pengambilan data dan efek samping komponen dikendalikan oleh Hook paling sakti, yaitu useEffect. Kali ini admin akan membagikan panduan step-by-step mengonsumsi API menggunakan fetch dan menangani status Loading serta Error yang dijamin work 100%.

1. Mengenal Hook useEffect & Dependency Array

useEffect memberi tahu React bahwa komponen perlu mengeksekusi suatu aksi tertentu setelah tampilan layar selesai dirender:

• useEffect(() => { ... }, []) : Dependency Array Kosong. Kode di dalamnya hanya akan dieksekusi 1 kali saja tepat saat komponen pertama kali muncul di layar (*mount*). Ini adalah tempat terbaik untuk memanggil API.
• useEffect(() => { ... }, [idUser]) : Kode akan dieksekusi ulang setiap kali nilai variabel idUser berubah.
• useEffect(() => { ... }) : Tanpa kurung siku; dieksekusi terus-menerus pada setiap render (hindari untuk pemanggilan API karena bisa menyebabkan *infinite loop*).

Siklus useEffect mengambil data dari REST API publik dan menampilkannya dengan status 200 OK

2. 3 State Wajib Saat Mengambil Data API

Agar pengalaman pengguna (*UX*) tidak terasa kaku atau layar putih kosong, selalu siapkan 3 state utama:

• Data State (data): Menampung array/objek hasil respon API.
• Loading State (loading): Menampilkan teks/animasi pemuatan saat request jaringan sedang berlangsung.
• Error State (error): Menangkap pesan kegagalan jika koneksi internet terputus atau server backend mati.

3. Full Source Code Komponen Pengambil Data (src/App.jsx)

Buka file src/App.jsx di projek Vite Anda, lalu salin implementasi lengkap pemanggilan API publik JSONPlaceholder berikut:

// File: src/App.jsx
import { useState, useEffect } from 'react';

function App() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fungsi async internal untuk fetching data
    async function fetchUsers() {
      try {
        setLoading(true);
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        
        if (!response.ok) {
          throw new Error('Gagal mengambil data dari server!');
        }

        const dataJson = await response.json();
        setUsers(dataJson); // Simpan hasil ke state
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false); // Matikan status loading
      }
    }

    fetchUsers();
  }, []); // [] memastikan pemanggilan API hanya 1 kali saat buka halaman

  // 1. Tampilan saat data masih dalam proses download
  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '50px', color: '#38bdf8', fontFamily: 'Arial' }}>
        <h2>⏳ Sedang memuat data pengguna...</h2>
      </div>
    );
  }

  // 2. Tampilan jika terjadi kesalahan koneksi
  if (error) {
    return (
      <div style={{ textAlign: 'center', padding: '50px', color: '#ef4444', fontFamily: 'Arial' }}>
        <h2>⚠️ Terjadi Error: {error}</h2>
      </div>
    );
  }

  // 3. Tampilan sukses render list data
  return (
    <div style={{ padding: '30px', backgroundColor: '#0f172a', minHeight: '100vh', fontFamily: 'Arial, sans-serif' }}>
      <h1 style={{ color: '#f8fafc', textAlign: 'center', marginBottom: '25px' }}>
        Daftar Pengguna (Live API Data)
      </h1>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '16px', maxWidth: '900px', margin: '0 auto' }}>
        {users.map((user) => (
          <div key={user.id} style={{ backgroundColor: '#1e293b', padding: '18px', borderRadius: '8px', border: '1px solid #334155', color: '#cbd5e1' }}>
            <h3 style={{ margin: '0 0 6px 0', color: '#38bdf8' }}>{user.name}</h3>
            <p style={{ margin: '0 0 4px 0', fontSize: '13px' }}>📧 {user.email}</p>
            <p style={{ margin: '0', fontSize: '13px', color: '#94a3b8' }}>🏢 {user.company.name}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

4. Aturan Wajib: Selalu Sertakan Atribut key

Saat menggunakan fungsi .map() untuk mencetak deretan elemen dari array, pastikan selalu menyematkan properti unik key={user.id} pada tag pembungkus terluar. Hal ini membantu algoritma Virtual DOM React melacak perubahan baris data secara efisien tanpa harus merender ulang seluruh daftar.

Itulah panduan praktis menguasai useEffect dan pemanggilan REST API di React. Saya sendiri selalu menyusun alur fetching dengan blok try-catch-finally seperti ini agar aplikasi web tetap tangguh dan memberikan informasi status yang jelas kepada pengguna di segala situasi.

Sekian tutorial kali ini, silahkan share artikel ini jika anda rasa bermanfaat untuk teman atau sahabat yang sedang mempelajari integrasi data di React.

Semoga Bermanfaat ^_^

Terima Kasih.

Wassalamualaikum Wr. Wb.

Sumber gambar: Koleksi Pribadi / Screenshot Praktik React API Fetch