React Menengah: Hooks, API & Routing (Edisi Tanpa Nangis)

Halo lagi, Pejuang Kode! ⚔️

Di episode sebelumnya (artikel Basic), kita udah mainan LEGO (Komponen), kirim-kiriman surat (Props), dan ngatur mood (State). Kalau kamu belum baca, cek dulu gih. Aku tungguin.

Udah? Sip. Sekarang kita naik level. 🚀

Hari ini menu kita Level Menengah. Kedengeran serem? Kagak. Kita bahas santuy aja. Kita bakal ngobrolin:

1. Hooks (khususnya useEffect) - Mantra ajaib buat efek samping.
2. API Fetching - Ngambil data dari internet (karena web statis itu garing).
3. Routing - Pindah halaman tanpa refresh (sihir!).

Ambil kopi dulu. Yuk gaskeun. ☕

1. useEffect: Bersih-bersih Abis Pesta

Kita tahu useState itu buat ingatan. Tapi gimana kalau kamu mau ngelakuin sesuatu di luar urusan tampilan? Kayak ganti judul tab browser, pasang timer, atau ngambil data?

Itu namanya “Side Effect” (Efek Samping). Di React, kita tanganin pake useEffect.

Bayangin useEffect itu kayak pesen makanan. Kamu panggil pelayan (memicu efek), nunggu makanan (proses async), dan mungkin bayar/tip pas udah kelar (cleanup).

import { useState, useEffect } from "react";

const Timer = () => {
  const [detik, setDetik] = useState(0);

  useEffect(() => {
    // Ini jalan SETELAH komponen tampil (render)
    const interval = setInterval(() => {
      setDetik(s => s + 1);
    }, 1000);

    // Ini fungsi "Cleanup" (opsional)
    // Jalan pas komponen ilang (unmount)
    return () => clearInterval(interval);
  }, []); // <--- Array dependensi (nanti dijelasin)

  return <p>Timer: {detik}</p>;
};

Array Dependensi [] itu penting banget:

• [] (Kosong): Jalan SEKALI doang pas komponen lahir (mount). Kayak “Halo Dunia”.
• [angka]: Jalan tiap kali si angka berubah. Kayak stalker yang mantau angka.
• Gak ada array: Jalan TIAP render. Rusuh. Jangan lakuin ini kecuali kamu tau alasannya.

2. API Fetching: Minta Data ke Internet

Kebanyakan aplikasi butuh data beneran. Cuaca, film, harga krypto… Di React, biasanya kita ambil data di dalem useEffect (karena itu side effect!).

Bayangin kamu di restoran.

1. Mount: Kamu duduk.
2. Effect: Kamu panggil pelayan (“Mas, minta menu data dong”).
3. State: Sambil nunggu, kamu liatin loading spinner.
4. Update: Makanan dateng -> Kamu makan (Update State pake data itu).

const DaftarUser = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Kita gak bisa bikin useEffect jadi async langsung, jadi bikin fungsi bantu
    const ambilData = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users"
        );
        const data = await response.json();
        setUsers(data); // Simpen makanannya
        setLoading(false); // Stop muter-muter
      } catch (error) {
        console.error("Kokinya angus masaknya!", error);
      }
    };

    ambilData();
  }, []); // Jalan sekali pas awal

  if (loading) return <p>Lagi ngambil data...</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

Gampang kan? Cuma request -> tunggu -> update state.

3. Routing: Mesin Teleportasi

Zaman dulu (MPA - Multi Page App), kalau klik link, browser bakal jadi putih, reload semua, download CSS/JS ulang. Lama.

Aplikasi React biasanya SPA (Single Page App). Kita pake Router (kayak react-router-dom) buat “pura-pura” navigasi. Kelihatannya pindah halaman, padahal React cuma nuker komponen doang secara instan. Cepet.

Bayangin kayak Teleportasi vs Jalan Kaki.

• Link Biasa (<a>): Jalan keluar pintu, masuk gedung lain. (Reload).
• Router Link (<Link>): Teleportasi instan ke ruangan sebelah. (Gak Reload).

(Catatan: Karena blog ini pake Astro, cara routingnya beda dikit, tapi di aplikasi React murni kayak Create-React-App, kamu bakal pake ini):

// Daripada pake <a href="/about">About</a>
import { Link } from "react-router-dom";

<Link to="/about">Tentang Kami</Link>;

Dan di file utama:

<Routes>
  <Route path="/" element={<Beranda />} />
  <Route path="/about" element={<Tentang />} />
</Routes>

Dia cuma mantau URL dan mutusin “Oh, URL-nya /about? Yaudah gue tampilin komponen <Tentang />.”

Penutup

Kita udah bahas banyak!

• useEffect: Buat ngurusin side effect dan siklus hidup.
• Fetching: Ngambil data API di dalem useEffect.
• Routing: Nuker komponen biar kayak pindah halaman.

Kamu bukan pemula lagi sekarang. Kamu udah jadi… Developer React Menengah. 🎉

Selanjutnya: Topik Lanjutan (Advanced). Kita bakal bahas Performa (biar aplikasi gak lemot kayak kentang), Context (state global), dan Custom Hooks.

Tetep ngoding, jangan lupa minum! 💧