useEffect untuk Panggil API - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Kenapa Harus Pakai useEffect?

Ketika kita ingin mengambil data dari API di React, kita nggak bisa langsung panggil API di dalam komponen begitu saja. Kenapa? Karena setiap kali komponen dirender ulang, API bisa dipanggil berulang kali. Nah, untuk mengatasi hal ini, kita pakai useEffect.

2. Cara Menggunakan useEffect untuk Panggil API

Hook useEffect memungkinkan kita untuk menjalankan kode tertentu setelah komponen dirender. Berikut contoh sederhana menggunakan fetch:

import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error("Error fetching data:", error));
  }, []); // Dependency array kosong agar hanya dipanggil sekali saat mount

  return (
    <div>
      <h1>Data dari API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

3. Pakai Axios? Bisa Juga!

Jika menggunakan Axios, kodenya jadi lebih simpel:

import { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get("https://api.example.com/data")
      .then(response => setData(response.data))
      .catch(error => console.error("Error fetching data:", error));
  }, []);

  return (
    <div>
      <h1>Data dari API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

4. Apa yang Terjadi di Balik Layar?

Saat useEffect dijalankan:

• Komponen dirender pertama kali
• API dipanggil
• Data diterima dan disimpan ke state dengan setData
• Komponen diperbarui dengan data yang baru

5. Cleanup: Jangan Lupa Beres-Beres!

Jika API request berjalan terlalu lama atau komponen tiba-tiba di-unmount, kita bisa membatalkan request menggunakan AbortController:

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  fetch("https://api.example.com/data", { signal })
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => {
      if (error.name !== "AbortError") {
        console.error("Error fetching data:", error);
      }
    });

  return () => controller.abort(); // Membersihkan request saat komponen unmount
}, []);

6. Kesimpulan

• Gunakan useEffect untuk mengambil data dari API di React.
• Gunakan dependency array [] agar request hanya dipanggil sekali.
• Pakai Axios kalau mau lebih praktis.
• Jangan lupa cleanup request agar aplikasi tetap optimal.

Dengan useEffect, kita bisa memastikan API dipanggil dengan efisien tanpa menyebabkan efek samping yang nggak diinginkan. Selamat ngoding!