Halo Authemers jumpa lagi di Tutorial React JS dari 0 untuk Pemula. Pada bab sebelumnya Authemers sudah belajar tentang JSX HTML, komponen dan props, dua konsep penting yang menjadi fondasi React. Komponen membantu kita membangun UI dari potongan kecil yang bisa digunakan kembali, sementara props memungkinkan kita mengirim data ke dalam komponen.

Namun sampai titik ini, aplikasi yang kita buat masih bersifat statis. Artinya, tampilan hanya menampilkan data tanpa bisa berubah berdasarkan interaksi pengguna.

Padahal dalam dunia web modern, hampir semua aplikasi bersifat interaktif. Pengguna bisa menekan tombol, mengisi form, memilih menu, atau melakukan berbagai aksi lain yang mengubah tampilan aplikasi.

Di sinilah konsep state mulai digunakan.

State adalah cara React menyimpan data yang bisa berubah selama aplikasi berjalan. Ketika state berubah, React secara otomatis memperbarui tampilan UI agar selalu sesuai dengan data terbaru.

Dengan kata lain, state membuat aplikasi React menjadi hidup.

Apa Itu State dalam React?

Secara sederhana, state adalah data yang dimiliki oleh sebuah komponen dan dapat berubah seiring waktu.

Berbeda dengan props yang hanya menerima data dari luar, state dikelola langsung oleh komponen itu sendiri.

Contohnya:

• jumlah klik pada tombol
• isi input dari pengguna
• status login pengguna
• item dalam keranjang belanja
• data yang diambil dari API

Semua data yang bisa berubah seperti ini biasanya disimpan dalam state.

Jika kita kembali ke analogi sebelumnya tentang membangun UI dengan komponen seperti balok lego, maka state adalah data yang menentukan bagaimana balok tersebut terlihat saat ini.

Mengenal Hook useState

Untuk membuat state di React, kita menggunakan sebuah fitur bernama Hook.

Hook adalah fungsi khusus yang disediakan oleh React untuk menambahkan berbagai kemampuan ke dalam komponen.

Hook pertama yang hampir selalu dipelajari oleh developer React adalah useState.

Hook ini digunakan untuk:

• membuat state
• menyimpan nilai state
• mengubah nilai state

Cara menggunakannya cukup sederhana.

Pertama kita perlu mengimpor useState dari React.

import { useState } from "react"

Setelah itu kita bisa membuat state di dalam komponen.

Contohnya:

function App(){

  const [count, setCount] = useState(0)

  return(
    <div>
      <h1>Jumlah klik: {count}</h1>
    </div>
  )
}

export default App

Mari kita pahami bagian paling penting dari kode ini.

const [count, setCount] = useState(0)

Baris ini melakukan tiga hal sekaligus:

1. Membuat state bernama count
2. Membuat fungsi untuk mengubah state yaitu setCount
3. Menentukan nilai awal state yaitu 0

Artinya pada awal aplikasi dijalankan, nilai count adalah 0.

Mengubah State dengan useState

State menjadi menarik ketika kita mulai mengubah nilainya berdasarkan interaksi pengguna.

Misalnya kita ingin membuat tombol yang menambah jumlah klik.

Contoh:

import { useState } from "react"

function App(){

  const [count, setCount] = useState(0)

  return(
    <div>
      <h1>Jumlah klik: {count}</h1>

      <button onClick={() => setCount(count + 1)}>
        Klik Saya
      </button>
    </div>
  )
}

export default App

Mari kita lihat apa yang terjadi di sini.

Ketika tombol ditekan, React menjalankan kode berikut:

setCount(count + 1)

Artinya nilai count akan bertambah satu.

React kemudian secara otomatis merender ulang komponen dan menampilkan nilai terbaru.

Hasilnya:

Jumlah klik: 1
Jumlah klik: 2
Jumlah klik: 3

Setiap kali tombol ditekan, angka akan terus bertambah.

Inilah contoh interaksi sederhana yang dibuat menggunakan state.

Mengapa State Sangat Penting?

Dalam aplikasi nyata, hampir semua fitur bergantung pada state.

Misalnya:

Form login

State menyimpan nilai email dan password yang diketik pengguna.

Keranjang belanja

State menyimpan daftar produk yang dipilih.

Dashboard

State menyimpan data statistik yang ditampilkan.

Filter pencarian

State menyimpan kata kunci yang dimasukkan pengguna.

Tanpa state, aplikasi React hanya akan menjadi halaman statis tanpa interaksi.

Karena itu state sering disebut sebagai sumber kebenaran (source of truth) dalam komponen React.

Contoh Proyek: Counter Sederhana

Mari kita buat contoh kecil yang sering digunakan untuk memahami state, yaitu counter.

import { useState } from "react"

function App(){

  const [count, setCount] = useState(0)

  return(
    <div>
      <h1>Counter React</h1>

      <p>Jumlah saat ini: {count}</p>

      <button onClick={() => setCount(count + 1)}>
        Tambah
      </button>

      <button onClick={() => setCount(count - 1)}>
        Kurangi
      </button>
    </div>
  )
}

export default App

Ketika aplikasi dijalankan, pengguna bisa menekan tombol Tambah atau Kurangi untuk mengubah nilai counter.

React akan langsung memperbarui tampilan tanpa perlu menyentuh DOM secara manual.

Inilah kelebihan React dibandingkan pendekatan JavaScript tradisional.

Aturan Penting Saat Menggunakan State

Saat menggunakan state, ada beberapa aturan yang perlu diperhatikan.

Jangan Mengubah State Secara Langsung

Contoh yang salah:

count = count + 1

React tidak akan mendeteksi perubahan ini.

Sebagai gantinya kita harus menggunakan fungsi setter.

setCount(count + 1)

State Bersifat Lokal

State hanya berlaku untuk komponen tempat ia dibuat.

Jika komponen lain membutuhkan data tersebut, biasanya kita mengirimnya menggunakan props.

Perubahan State Memicu Render Ulang

Setiap kali state berubah, React akan merender ulang komponen tersebut.

Inilah yang membuat tampilan selalu sinkron dengan data.

Analogi State dalam Kehidupan Nyata

Agar lebih mudah dipahami, bayangkan state seperti panel kontrol dalam sebuah aplikasi.

Misalnya sebuah dashboard kendaraan.

Panel tersebut menampilkan informasi seperti:

• kecepatan
• bahan bakar
• suhu mesin

Ketika nilai tersebut berubah, tampilan panel juga ikut berubah.

State dalam React bekerja dengan cara yang sama.

State menyimpan kondisi terbaru aplikasi, dan React memastikan UI selalu menampilkan kondisi tersebut.

Menggabungkan State dan Komponen

Ketika aplikasi semakin besar, biasanya kita memiliki banyak komponen yang memiliki state masing-masing.

Contohnya:

App
 ├── Navbar
 ├── Cart
 ├── ProductList
 └── Footer

Komponen Cart mungkin memiliki state untuk jumlah produk, sementara ProductList memiliki state untuk daftar produk yang ditampilkan.

Dengan cara ini React dapat mengelola aplikasi yang kompleks dengan struktur yang tetap rapi.

Penutup

Pada bab ini kita mulai mengenal konsep yang membuat React menjadi interaktif, yaitu state.

State adalah data yang dapat berubah selama aplikasi berjalan dan menentukan bagaimana tampilan UI ditampilkan kepada pengguna.

Untuk membuat state di React, kita menggunakan hook bernama useState.

Hook ini memungkinkan kita:

• menyimpan nilai dalam komponen
• mengubah nilai tersebut
• memperbarui tampilan secara otomatis ketika data berubah

Dengan memahami state dan useState, Authemers sudah mempelajari salah satu konsep paling penting dalam React.

Pada bab berikutnya kita akan membahas bagaimana React menangani event dari pengguna, seperti klik tombol, input form, dan berbagai interaksi lainnya. Dari sinilah aplikasi React mulai terasa seperti aplikasi web modern yang benar-benar dinamis.