State dengan useState — CompileDaily Study

Penjelasan

State adalah data milik komponen yang BISA berubah seiring waktu (mis. hasil klik tombol) dan setiap perubahannya otomatis memicu React merender ulang tampilan. Dikelola lewat hook useState(nilaiAwal), yang mengembalikan sepasang [nilai, fungsiPengubah].

Contoh Konsep

import { useState } from 'react';

function Counter() {
    const [jumlah, setJumlah] = useState(0);

    return (
        <div>
            <p>Jumlah: {jumlah}</p>
            <button onClick={() => setJumlah(jumlah + 1)}>Tambah</button>
        </div>
    );
}

Praktikum

Buat komponen SaklarLampu dengan state boolean nyala (awalnya false) lewat useState. Tampilkan teks "Lampu Nyala" atau "Lampu Mati" sesuai state, dan tombol untuk membalik nilainya (setNyala(!nyala)).

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

JANGAN PERNAH mengubah state langsung (mis. jumlah = jumlah + 1) — SELALU pakai fungsi pengubahnya (setJumlah(...)), karena React hanya tahu perlu merender ulang komponen kalau perubahan dilakukan lewat fungsi setter itu, bukan lewat assignment biasa.