Panduan Dasar React Hooks: Memahami useState dan useEffect

Evolusi Terbesar dalam Sejarah React

Dulu, menulis logika rumit di React (seperti mengambil data API atau menyimpan state) memaksa kita menggunakan sintaks Class Component yang sangat kaku, penuh dengan kata this, dan susah dipecah-pecah.

Lalu muncullah React Hooks. Hooks adalah fungsi khusus yang memungkinkan kita "mengaitkan" (hook into) fitur-fitur sakti React ke dalam Functional Component yang simpel. Dari belasan Hooks yang ada, kamu hanya perlu menguasai 2 ini untuk bisa membuat aplikasi yang berjalan.

1. useState: Gudang Ingatan Komponen

Seperti yang dibahas pada artikel sebelumnya, useState adalah cara komponen React mengingat sebuah data dan langsung me-refresh layar ketika data itu berubah.

import { useState } from 'react';

function LampuRuangan() {
  // state 'menyala' berisi nilai boolean (awalnya false)
  // setMenyala adalah fungsi untuk mengubah nilai tersebut
  const [menyala, setMenyala] = useState(false);

  return (
    <div>
      <h1>Lampu sedang {menyala ? 'Menyala' : 'Mati'}</h1>
      <button => setMenyala(!menyala)}>Tekan Saklar</button>
    </div>
  );
}

2. useEffect: Sang Agen Eksekusi (Side Effects)

Ini adalah Hook yang paling sering membuat pemula stuck. useEffect digunakan untuk melakukan Side Effects (Efek Samping)—yaitu operasi yang terjadi di luar proses menggambar UI. Contoh utamanya: Mengambil data dari API (Fetch), mengatur Timer (setInterval), atau mengubah judul tab browser.

Aturan Emas useEffect (Perhatikan Array Kosong di Belakang!):

import { useState, useEffect } from 'react';

function DaftarUser() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // Fungsi ini HANYA akan dipanggil 1 KALI saat komponen pertama kali muncul di layar
    fetch('https://api.example.com/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []); // <-- Array kosong (Dependency Array) ini sangat krusial!

  return <div>Ada {users.length} User</div>;
}

Jika kamu lupa menaruh array kosong [] di akhir useEffect, kodemu akan melakukan Infinite Loop! Ia akan mengambil data API berulang-ulang ribuan kali dalam satu detik dan membuat komputermu (serta server API-nya) meledak crash!