State di React (useState) | Dasar ReactJS untuk Pemula | Mahir.dev | Mahir.dev Academy

State di React (useState) | Dasar ReactJS untuk Pemula | Mahir.dev | Mahir.dev Academy

Fitur	Props	State
Sumber Data	Dikirim dari komponen parent (luar)	Dikelola di dalem komponen itu sendiri (internal)
Bisa Diubah?	Read-only oleh komponen penerima (child)	Bisa diubah oleh komponen itu sendiri (pake fungsi khusus)
Tujuan Utama	Konfigurasi dan data untuk komponen child	Ngelola data yang berubah-ubah dan spesifik buat komponen itu
Alur Data	Dari atas ke bawah (parent ke child)	Internal di komponen, perubahan memicu re-render

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):
  javascript
```
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:
jsx
```
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.

jsx

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;

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:
  javascript
```
// 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.
jsx
```
function FormProfil() {
  const [nama, setNama] = useState('');
  const [email, setEmail] = useState('');
  const
```

javascript

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
  }));
};