Memahami Konsep 'State' dalam Framework Frontend (React/Vue)

Variabel Biasa vs Variabel Ajaib

Saat kamu beranjak dari JavaScript murni (Vanilla JS) menuju framework modern seperti React.js atau Vue.js, satu istilah yang paling sering muncul adalah State (dibaca: Steyt). Apa itu State dan apa bedanya dengan variabel let atau const biasa?

Kelemahan Variabel JavaScript Biasa

Misalkan kamu membuat aplikasi konter (penghitung) klik sederhana. Kamu menyimpan angka 0 di dalam variabel let angka = 0;.

Saat tombol diklik, kamu menambahkan angkanya: angka = angka + 1. Nilai variabel di memory komputer sukses berubah menjadi 1, 2, dan 3. TAPI, layar HTML (monitor) tetap menampilkan angka 0!

Mengapa? Karena di JavaScript murni, mengubah nilai variabel tidak secara otomatis merombak/me-refresh (re-render) tampilan di layar. Kamu harus secara manual menyuruh DOM untuk merombaknya: document.getElementById('layar').innerText = angka;. Sangat melelahkan.

State: Variabel yang "Reaktif"

Di dalam React/Vue, State adalah variabel khusus tempat kamu menyimpan data/ingatan dari sebuah komponen.

Kekuatan magis dari State adalah sifatnya yang Reaktif. Kapanpun nilai di dalam State berubah, Framework akan BERTERIAK dan secara otomatis menggambar ulang (Re-render) tampilan HTML yang menggunakan data tersebut dalam hitungan milidetik.

// Contoh di React (menggunakan useState Hook)
import { useState } from 'react';

function KonterKlik() {
  // Membuat state bernama 'angka', nilai awalnya 0
  const [angka, setAngka] = useState(0);

  return (
    <div>
      <h1>Layar: {angka}</h1>
      {/* Saat tombol diklik, ubah state-nya. Layar akan OTOMATIS ter-update! */}
      <button => setAngka(angka + 1)}>Tambah</button>
    </div>
  );
}

Kapan Harus Menggunakan State?

Aturan praktisnya adalah: Jika sebuah data berubah berdasarkan interaksi User, dan perubahan data tersebut Hadir / Ditampilkan ke layar mata User, maka data itu WAJIB disimpan di dalam State.

Contoh penggunaan State di dunia nyata:

• Menyimpan teks yang sedang diketik user di kolom pencarian.
• Mengingat status Dark Mode (isDarkMode: true / false).
• Menyimpan daftar keranjang belanja (saat barang ditambah, ikon tas di pojok kanan atas otomatis ikut berubah angkanya).

State Management (Redux/Zustand)

Saat aplikasi membesar, membagikan data antar komponen akan menjadi pusing (karena State hanya hidup di dalam satu komponen pembuatnya). Untuk mengatasi hal ini, muncullah istilah Global State Management menggunakan library tambahan seperti Redux atau Zustand, yang fungsinya membuat satu "Gudang State Raksasa" yang bisa diakses oleh komponen manapun di seluruh halaman website.