Komponen Jadi "Hidup": Kenalan Sama State & Jurus useState di React!

Udah ngerti kan gimana cara ngasih "bekal" (data) ke komponen pake props? Props itu keren banget buat ngirim data dari parent ke child. Tapi, props itu sifatnya read-only di komponen child, gak bisa diubah sama si child itu sendiri.

Terus, gimana dong kalau kita mau komponen kita itu punya data internalnya sendiri yang bisa berubah-ubah karena interaksi pengguna atau proses lain, dan perubahan data itu otomatis ngubah tampilan komponennya? Misalnya, angka di tombol counter yang nambah tiap diklik, atau status "loading" yang ilang pas data udah ke-load.

Nah, buat kebutuhan kayak gini, React punya konsep yang namanya State! Dan di Functional Components, cara paling gampang buat ngelola state adalah pake "jurus sakti" bernama Hook useState.

Apa Itu State di React?

Secara sederhana, State adalah sebuah objek JavaScript biasa yang nyimpen data atau informasi spesifik milik sebuah komponen. Data ini bisa berubah seiring waktu (misalnya karena aksi pengguna, data dari API, atau timer).

Yang paling penting: Setiap kali nilai state sebuah komponen berubah, React bakal otomatis "ngegambar ulang" (re-render) komponen itu (dan anak-anaknya kalau perlu) biar tampilannya selalu nunjukin nilai state yang paling baru. Inilah yang bikin UI React jadi dinamis!

Beda State sama Props:

Anggap aja props itu kayak "instruksi" atau "bahan baku" yang dikasih dari luar, sedangkan state itu kayak "catatan" atau "kondisi internal" yang diurus sama komponen itu sendiri.

Hook useState: "Pengelola" State di Functional Component

Dulu, state itu cuma bisa dipake di Class Components. Tapi, sejak ada React Hooks, kita bisa pake state (dan fitur React lainnya) di Functional Components juga! Dan hook yang paling dasar buat ngelola state adalah useState.

• Apa itu Hook? Hook itu fungsi spesial di React yang ngebolehin kamu "nyantol" ke fitur-fitur React (kayak state dan lifecycle) dari functional component. Nama hook selalu diawali use (misal, useState, useEffect).

• Cara Pake useState:

  1. Impor useState dari React (kalau kamu kerja di file .js/.jsx yang belum ada import React from 'react'; di atasnya, meskipun di versi React baru kadang gak perlu impor React eksplisit lagi buat JSX, tapi buat Hooks biasanya tetep perlu):

     import React, { useState } from 'react'; 
     // Atau kalau React udah diimpor: import { useState } from 'react';

  2. Di dalem functional component-mu, panggil useState() buat deklarasiin satu "potongan" state.
     • useState() nerima satu argumen: nilai awal (initial state) buat state itu.
     • useState() ngembaliin sebuah array yang isinya dua hal:
       1. Nilai state saat ini.
       2. Fungsi buat ngupdate nilai state itu. (Konvensinya, nama fungsi ini diawali set diikuti nama state-nya dengan huruf besar di awal, misal setNamaState).
  3. Kita biasanya langsung pake destructuring assignment array buat ngambil dua nilai itu.

• Sintaks Dasar Deklarasi State dengan useState:

  const [namaState, setNamaState] = useState(nilaiAwal);

  • namaState: Variabel yang bakal nyimpen nilai state saat ini.
  • setNamaState: Fungsi yang bakal kita pake buat ngubah nilai namaState. Pas fungsi ini dipanggil dengan nilai baru, React bakal nge-re-render komponennya.
  • nilaiAwal: Nilai pertama buat namaState pas komponen pertama kali di-render.

Contoh Komponen Counter Sederhana Pake useState:

import React, { useState } from 'react';
 
function Counter() {
  // Deklarasi state 'hitungan' dengan nilai awal 0
  // hitungan: nilai state saat ini
  // setHitungan: fungsi buat ngupdate state hitungan
  const [hitungan, setHitungan] = useState(0); 
 
  // Fungsi handler buat nambah hitungan
  const tambahHitungan = () => {
    setHitungan(hitungan + 1); // Panggil fungsi setHitungan buat ngubah state
  };
 
  // Fungsi handler buat ngurangin hitungan
  const kurangHitungan = () => {
    if (hitungan > 0) { // Biar gak jadi negatif
      setHitungan(hitungan - 1);
    }
  };
 
  return (
    <div>
      <h2>Counter Sederhana</h2>
      <p>Nilai saat ini: {hitungan}</p> {/* Nampilin nilai state */}
      <button onClick={tambahHitungan}>Tambah (+)</button>
      <button onClick={kurangHitungan} style={{ marginLeft: '10px' }}>Kurang (-)</button>
    </div>
  );
}
 
export default Counter;

Penjelasan Contoh Counter:

1. Kita impor useState dari react.
2. const [hitungan, setHitungan] = useState(0);:
   • Kita bikin state namanya hitungan.
   • Nilai awalnya 0.
   • Kita dapet variabel hitungan (buat ngebaca nilai state) dan fungsi setHitungan (buat ngubahnya).
3. tambahHitungan(): Pas dipanggil (tombol "+" diklik), dia manggil setHitungan(hitungan + 1). Ini ngasih tau React, "Hei, nilai hitungan sekarang ganti ya jadi nilai lama + 1". React bakal ngejadwalin re-render.
4. kurangHitungan(): Mirip, tapi buat ngurangin.
5. Di JSX, {hitungan} nampilin nilai hitungan yang paling baru. Setiap kali setHitungan dipanggil dan nilainya berubah, bagian {hitungan} ini bakal otomatis ke-update di layar!

Aturan Penting Soal State dan useState

• Panggil Hooks (kayak useState) cuma di Level Atas Fungsi Komponen:

  • Jangan pernah manggil useState (atau hook lain) di dalem loop, di dalem kondisi if, atau di dalem fungsi biasa yang di-nesting. Hooks harus selalu dipanggil di level paling atas dari functional component-mu, sebelum return JSX. Ini biar React bisa ngelacak urutan hooks dengan bener setiap kali komponen re-render.

• Jangan Ubah State Secara Langsung:

  • SALAH: hitungan = hitungan + 1; atau objekState.properti = nilaiBaru;
  • Kamu HARUS selalu pake fungsi setter yang dikasih useState (kayak setHitungan) buat ngubah state. Kenapa? Karena cuma dengan manggil fungsi setter inilah React tau kalau state-nya udah berubah dan dia perlu nge-re-render komponen. Kalau kamu ubah langsung, React gak bakal "sadar" dan UI-mu gak bakal ke-update.

• Update State itu Asinkron (Asynchronous):

  • Pas kamu manggil setHitungan(hitungan + 1), nilai hitungan itu gak langsung berubah saat itu juga di baris kode berikutnya. React "ngejadwalin" update state dan re-render.
  • Kalau kamu butuh ngelakuin sesuatu berdasarkan nilai state yang baru, biasanya kamu lakuin itu di useEffect (hook lain yang bakal kita bahas), atau kalau update state-nya bergantung sama nilai state sebelumnya, ada cara nulis yang lebih aman:

    // Cara aman buat update state yang bergantung nilai sebelumnya
    setHitungan(prevHitungan => prevHitungan + 1); 
    // prevHitungan di sini dijamin nilai hitungan yang paling baru sebelum update ini

  Ini topik yang agak advance, tapi bagus buat diketahui.

• Tiap useState Buat Satu "Potongan" State:

  • Kalau komponenmu punya beberapa data internal yang gak saling berhubungan erat, kamu bisa (dan seringkali lebih baik) pake beberapa panggilan useState buat masing-masing data itu, daripada bikin satu objek state gede.

  function FormProfil() {
    const [nama, setNama] = useState('');
    const [email, setEmail] = useState('');
    const [setujuSyarat, setSetujuSyarat] = useState(false);
    // ...
  }

State Bisa Berupa Tipe Data Apa Aja

Nilai awal (dan nilai selanjutnya) yang kamu kasih ke useState bisa berupa tipe data JavaScript apa aja:

• String: useState('')
• Number: useState(0)
• Boolean: useState(false)
• Array: useState([])
• Objek: useState({ key: 'nilai' })

Kalau state-mu berupa array atau objek, pas kamu mau ngupdate-nya, inget buat bikin array atau objek BARU, jangan ngemodifikasi array/objek yang lama secara langsung (ini terkait konsep immutability yang penting di React buat deteksi perubahan).

Contoh Update State Objek (Cara yang Benar):

const [pengguna, setPengguna] = useState({ nama: "Budi", usia: 20 });
 
const handleUltah = () => {
  // SALAH: pengguna.usia++; setPengguna(pengguna); (mutasi langsung)
  
  // BENAR: Bikin objek baru dengan usia yang diupdate
  setPengguna(prevPengguna => ({
    ...prevPengguna, // Salin semua properti lama pake spread operator (...)
    usia: prevPengguna.usia + 1 // Update properti usia
  }));
};

State dan hook useState ini adalah kunci utama buat bikin komponen React jadi bener-bener interaktif dan dinamis. Dengan state, komponenmu bisa "inget" sesuatu, bisa "bereaksi" terhadap input, dan bisa "ngubah dirinya sendiri" di layar.

Awalnya mungkin kerasa beda sama cara ngelola data di Vanilla JS, tapi begitu kamu udah "klik" sama alur update state dan re-render di React, kamu bakal ngerasain betapa enaknya ngebangun UI yang kompleks dengan cara ini.

Latihan bikin komponen-komponen kecil yang punya state sendiri. Coba bikin tombol, input, atau apa aja yang bisa ngubah state dan liat tampilannya berubah!