Pengenalan React Hooks untuk Pemula

Selamat datang di dunia React Hooks! Jika Anda baru mengenal React atau ingin beralih dari class components, Hooks adalah konsep fundamental yang perlu dikuasai. Tutorial ini akan memandu Anda memahami dua Hooks paling dasar: useState dan useEffect, lengkap dengan contoh praktis dan interaktif.

Apa itu React Hooks?

React Hooks (diperkenalkan di React 16.8) memungkinkan Anda "mengaitkan" state dan fitur lifecycle React ke dalam functional components. Sebelumnya, fitur ini hanya tersedia di class components. Penggunaan Hooks membuat kode React Anda menjadi lebih ringkas, mudah dibaca, digunakan ulang, dan diuji.

Prasyarat

Disarankan Anda sudah familiar dengan:

• HTML & CSS Dasar
• JavaScript (ES6+): variabel, fungsi, array, objek.
• Konsep Dasar React: Components, Props, JSX.

Hook #1: useState - Mengelola State

useState adalah Hook untuk menambahkan variabel state ke functional component. State adalah data yang dapat berubah seiring waktu dan memengaruhi apa yang dirender oleh komponen.

useState dipanggil dengan nilai awal state sebagai argumen. Ia mengembalikan sebuah array berisi dua elemen:

1. Nilai state saat ini.
2. Sebuah fungsi untuk memperbarui nilai state tersebut (sering disebut "setter function").

Sintaks & Contoh Dasar

// 1. Import useState
import React, { useState } from 'react';

function CounterComponent() {
  // 2. Panggil useState dengan nilai awal (misal: 0)
  //    Gunakan array destructuring untuk mendapatkan nilai state dan fungsi setter
  const [count, setCount] = useState(0);

  return (
    

      {/* 3. Gunakan nilai state dalam JSX */}
      
Nilai saat ini: {count}

      {/* 4. Panggil fungsi setter (setCount) untuk mengubah state, misal saat tombol diklik */}
      
        Tambah 1
      
      
    
  );
}
                

Pada contoh di atas:

• count menyimpan nilai state (dimulai dari 0).
• setCount adalah fungsi untuk mengubah nilai count. Saat dipanggil, React akan menjadwalkan render ulang komponen dengan nilai count yang baru.

Contoh Interaktif: Counter

Klik tombol di bawah untuk melihat useState beraksi:

Kode React (sedikit lebih baik dengan updater function):

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // Lebih aman menggunakan updater function jika state baru bergantung pada state lama
  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return (
    

      
Jumlah Klik: {count}
      

        - Kurangi
        + Tambah
      
    
  );
}

export default Counter;
                

Hook #2: useEffect - Menjalankan Side Effects

Side effects adalah operasi apa pun yang memengaruhi sesuatu di luar lingkup fungsi komponen itu sendiri. Contoh umum side effects dalam React meliputi:

• Mengambil data dari API (fetch).
• Berlangganan ke sumber data eksternal (misal: WebSocket, event listener).
• Memanipulasi DOM secara langsung (biasanya dihindari, tapi kadang perlu).
• Mengatur timer (setTimeout, setInterval).

Hook useEffect menyediakan cara untuk menjalankan side effects ini dari dalam functional component.

Sintaks & Dependency Array

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [userId, setUserId] = useState(1); // Contoh state lain

  // useEffect menerima 2 argumen:
  // 1. Fungsi callback yang berisi kode efek
  // 2. (Opsional) Array dependensi
  useEffect(() => {
    // --- Kode Efek Dimulai ---
    console.log(`Mulai mengambil data untuk user ID: ${userId}`);
    fetch(`https://jsonplaceholder.typicode.com/todos/${userId}`)
      .then(response => response.json())
      .then(jsonData => {
        console.log('Data diterima:', jsonData);
        setData(jsonData);
      });
    // --- Kode Efek Selesai ---

    // (Opsional) Return fungsi cleanup
    return () => {
      console.log(`Cleanup sebelum efek berikutnya untuk user ID: ${userId} atau unmount`);
      // Misal: batalkan fetch jika komponen unmount sebelum selesai
    };

  }, [userId]); // <-- Array Dependensi: Efek ini HANYA berjalan ulang jika 'userId' berubah

  return (
    

      Load User Berikutnya (ID: 2)
      
      {data ? 
{JSON.stringify(data, null, 2)}
 : 
Loading...
}
    
  );
}
                

Array Dependensi sangat penting:

• useEffect(callback) (tanpa array): Efek berjalan setelah setiap render.
• useEffect(callback, []) (array kosong): Efek berjalan hanya sekali setelah render pertama (mirip `componentDidMount`).
• useEffect(callback, [dep1, dep2]): Efek berjalan setelah render pertama dan setiap kali nilai `dep1` atau `dep2` berubah.

Fungsi Cleanup (yang di-return) bersifat opsional. Ia dijalankan sebelum komponen di-unmount, atau sebelum efek dijalankan lagi karena dependensi berubah. Ini penting untuk membersihkan resources (seperti timer, subscriptions) agar tidak terjadi memory leak.

Contoh Interaktif: Mengubah Judul Dokumen

Gunakan counter di bawah ini lagi. Kali ini, useEffect akan digunakan untuk memperbarui judul tab browser Anda sesuai dengan nilai counter. Perhatikan judul tab saat Anda mengubah nilai.

Kode React untuk contoh ini:

import React, { useState, useEffect } from 'react';

function DocumentTitleChanger() {
  const [count, setCount] = useState(0);

  // Efek ini bergantung pada 'count'
  useEffect(() => {
    // Side effect: mengubah judul dokumen
    document.title = `Jumlah klik: ${count}`;
    console.log(`Judul diubah: ${document.title}`);

    // Tidak perlu cleanup dalam kasus sederhana ini
  }, [count]); // Jalankan ulang efek HANYA jika 'count' berubah

  return (
    

      
Jumlah Klik: {count}
      

        - Kurangi
        + Tambah
        
      
    
  );
}
                 

Kesimpulan

React Hooks useState dan useEffect adalah fondasi penting dalam pengembangan React modern dengan functional components.

• Gunakan useState untuk mengelola data internal komponen yang bisa berubah.
• Gunakan useEffect untuk berinteraksi dengan dunia luar komponen (API, DOM, timers, subscriptions) dan kontrol eksekusinya dengan dependency array.

Dengan memahami kedua Hook ini, Anda sudah siap untuk membangun komponen React yang lebih dinamis dan interaktif. Teruslah bereksperimen dan jelajahi Hook lainnya saat Anda membutuhkannya!

Selamat belajar dan mengoding!