📚 SERI BELAJAR REACT · ARTIKEL 3 DARI 16

React Itu Hidup! 🔥
Kenalan Sama State
dan useState Hook

Kenapa tombol "Like" bisa berubah warna? Kenapa counter bisa naik sendiri? Jawabannya satu: state. Tanpa state, React cuma pajangan statis. Dengan state, React jadi hidup.

#useState #StateManagement #ReactHooks #BelajarReact #ZeroToZorro

⏱️

Estimasi Baca

8–10 Menit

🎯

Level

Pemula

📅

Diperbaharui

Mei 2026

Coba bayangin kamu beli mesin minuman otomatis. Kamu masukin koin, tekan tombol, dan… mesinnya nggak bereaksi sama sekali. Layar tetap blank. Jumlah koin nggak berubah. Minuman nggak keluar. Frustasi, kan?

Nah, itulah gambaran sebuah React app tanpa useState hook. Kamu bisa bikin tampilan keren, tapi begitu user berinteraksi — klik, ketik, scroll — tampilan itu nggak akan bergerak satu piksel pun. Karena di sinilah React state management berperan: ia yang membuat UI kamu responsif, dinamis, dan terasa "hidup". Di artikel ketiga dari seri React From Zero to Zorro ini, kita bakal bongkar habis konsep state dan useState sampai kamu benar-benar paham dan bisa langsung praktek.

📐 Definisi Inti

"State adalah memori milik sebuah komponen."

State menyimpan data yang bisa berubah seiring waktu, dan setiap kali state berubah, React akan otomatis merender ulang komponen tersebut untuk menampilkan data terbaru ke layar.

Apa Itu State? Analogi Sebelum Kode 🧠

Bayangkan kamu punya papan skor pertandingan basket. Setiap kali tim mencetak poin, angka di papan berubah. Papan itu tahu skornya saat ini, dan bisa memperbarui tampilannya.

Dalam dunia React, papan skor itu adalah komponen. Angka skor yang tersimpan adalah state. Dan proses "update angka → layar berubah" itulah yang React urus secara otomatis.

Beda dengan props (yang kita bahas di artikel sebelumnya) yang datangnya dari luar dan bersifat read-only — state adalah data internal komponen yang bisa diubah dari dalam komponen itu sendiri.

🔥

Fakta Menarik

Sebelum React Hooks diperkenalkan di versi 16.8 (Februari 2019), state hanya bisa digunakan di class component. Berkat useState hook, sekarang functional component pun bisa punya state — dan ini mengubah cara seluruh komunitas React menulis kode.

📊 Props vs State — Bedanya di Mana?

Aspek	Props	State
Asal Data	Dari komponen induk (parent)	Dari dalam komponen itu sendiri
Bisa Diubah?	❌ Tidak (read-only)	✅ Ya, lewat setter function
Trigger Re-render?	Ya (jika parent re-render)	Ya (setiap kali state berubah)
Analogi	Hadiah dari orang tua	Dompet milik sendiri

Cara Pakai useState Hook React: Step by Step ⚙️

Oke, cukup teorinya. Sekarang mari kita lihat bagaimana useState hook bekerja dalam kode nyata. Kita mulai dari sintaks dasarnya dulu, kemudian langsung bikin mini-project.

Import useState dari React

Sebelum bisa pakai useState, kamu harus import dulu. Ini wajib dan selalu jadi langkah pertama.

import React, { useState } from 'react';

Deklarasikan state di dalam komponen

Pola penggunaannya selalu sama: const [nilaiState, setNilaiState] = useState(nilaiAwal). Kamu bebas memberi nama variabel, tapi konvensinya pakai prefix set untuk fungsi updater.

// Sintaks dasar useState
const [count, setCount] = useState(0);
//     ↑ nilai state    ↑ fungsi pengubah    ↑ nilai awal

Gunakan state di JSX dan ubah via event

Tampilkan nilai state langsung di JSX, dan panggil fungsi setter saat ada event (klik, input, dll). Setiap kali setter dipanggil, komponen otomatis re-render.

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

  return (
    <div>
      <p>Kamu sudah klik {count} kali</p>
      <button onClick={() => setCount(count + 1)}>
        Klik Aku! 🖱️
      </button>
    </div>
  );
}

💡

Tips Penting

Jangan pernah mengubah state secara langsung seperti count = count + 1. Ini tidak akan memicu re-render! Selalu gunakan fungsi setter: setCount(count + 1).

useState Hook: Contoh Nyata yang Langsung Bisa Kamu Coba 🚀

Teori tanpa praktek itu seperti resep masakan yang nggak pernah dimasak. Yuk kita buat dua contoh konkret yang sering muncul di proyek nyata:

Contoh 1: Toggle Dark Mode 🌙

State bisa menyimpan nilai boolean — cocok untuk tombol toggle. Satu klik, tampilan berganti!

import { useState } from 'react';

function DarkModeToggle() {
  const [isDark, setIsDark] = useState(false);

  const style = {
    background: isDark ? '#1a1a2e' : '#ffffff',
    color:      isDark ? '#e2e8f0' : '#1e293b',
    padding: '20px',
    borderRadius: '10px',
  };

  return (
    <div style={style}>
      <h2>{isDark ? '🌙 Mode Gelap' : '☀️ Mode Terang'}</h2>
      <button onClick={() => setIsDark(!isDark)}>
        Ganti Mode
      </button>
    </div>
  );
}

Contoh 2: Form Input Nama 📝

State juga bisa menyimpan string. Ini adalah pola "controlled input" — salah satu teknik paling fundamental di React untuk React state management form.

import { useState } from 'react';

function FormNama() {
  const [nama, setNama] = useState('');

  return (
    <div>
      <input
        type="text"
        value={nama}
        onChange={(e) => setNama(e.target.value)}
        placeholder="Masukkan namamu..."
      />
      {nama && <p>Halo, {nama}! 👋</p>}
    </div>
  );
}

⚡

Insight Penting

Satu komponen bisa punya banyak useState! Tidak ada batasan jumlahnya. Pisahkan setiap data independen ke dalam useState tersendiri agar kode lebih mudah dibaca dan di-maintain.

Jebakan Batman: Kesalahan Umum useState yang Wajib Kamu Hindari ⚠️

Semua orang pernah tersandung hal-hal ini waktu pertama belajar useState hook. Lebih baik tahu duluan supaya kamu nggak buang waktu debugging berjam-jam.

🔍 Analisis: 3 Kesalahan Umum dan Cara Memperbaikinya

❌ Kesalahan #1: Mutasi langsung

count = count + 1; // SALAH! Re-render tidak terpicu

setCount(count + 1); // BENAR ✅

❌ Kesalahan #2: Update state object secara parsial

setUser({ nama: 'Budi' }); // Ini menghapus properti lain!

setUser({ ...user, nama: 'Budi' }); // BENAR ✅ (spread operator)

❌ Kesalahan #3: Menggunakan nilai state yang basi (stale closure)

setCount(count + 1); // Bisa bermasalah di update beruntun

setCount(prev => prev + 1); // AMAN ✅ (functional update)

⚠️

Perhatian

useState (dan semua Hooks) hanya boleh dipanggil di level teratas komponen atau custom Hook — tidak boleh di dalam kondisi if/else, loop, atau fungsi bersarang. Ini adalah aturan emas "Rules of Hooks" dari React!

📚 Bagian dari Seri

Seri Belajar React: React From Zero to Zorro

16 artikel lengkap dari dasar hingga mahir — gratis dan terstruktur

📋 Lihat Daftar Isi Lengkap →

✅ Kesimpulan

Kamu Sekarang Paham useState Hook React — Berikutnya?

Di artikel ini kita sudah belajar bahwa React state management dimulai dari memahami state sebagai "memori komponen". Kita sudah tahu:

✓ Perbedaan fundamental antara state dan props

✓ Sintaks dan cara kerja useState hook secara step-by-step

✓ Contoh nyata: counter, toggle dark mode, dan controlled form input

✓ 3 kesalahan umum dan cara menghindarinya (termasuk stale closure!)

Artikel berikutnya, kita akan naik level: bagaimana kalau dua komponen berbeda perlu berbagi state? Itulah topik Lifting State Up yang akan bikin pola pikirmu tentang React makin matang. Sampai jumpa di artikel 4! 🚀

💬 Yuk Ikut Diskusi!

Ada bagian yang masih bikin bingung? Atau udah langsung coba kodenya dan berhasil? Ceritain di kolom komentar di bawah! Dan kalau artikel ini bermanfaat, bantu share ke teman-teman yang juga lagi belajar React. Satu share-mu bisa jadi motivasi buat mereka! 🙏

🏷️ Label Artikel:

#BelajarReact #ZeroToZorro #useStateHook #ReactStateManagement #ReactHooks #PemulaProgramming #ReactJS #FrontendDeveloper

🧭 Navigasi Seri React From Zero to Zorro

← Artikel Sebelumnya · 02

Bedah Anatomi React: JSX, Component, dan Props Itu Apa Sih?

Baca Artikel →

Artikel Selanjutnya · 04 →

Ngobrol Antar Komponen: Lifting State Up dan Komunikasi Parent-Child

Lanjut Baca →