Intermediate · Level 7: React FundamentalsIntermediate45 menitBahasa Indonesia

`useState` Dasar

Memakai state sebagai memory kecil milik component untuk menyimpan value yang berubah.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan state sebagai memory component
Membuat state dengan useState
Mengubah state lewat setter function

ReactuseStateState

Isi lesson

6 blok

1.
Component perlu mengingat value yang berubahBelum selesaiWajib
2.
Counter kecil dengan useStateBelum selesaiWajib
3.
Jangan ubah state langsungBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Component perlu mengingat value yang berubah

Wajib

Di module sebelumnya, component menerima data lewat props. Props datang dari luar component. State berbeda: state adalah memory kecil di dalam component untuk value yang bisa berubah saat user berinteraksi.

Contoh sederhana: jumlah counter, status panel terbuka, teks input, atau item yang sedang dipilih. Jika value perlu berubah dan perubahan itu harus membuat UI render ulang, biasanya value itu menjadi state.

Bagian ini memengaruhi progres lesson.

Counter kecil dengan useState

Wajib

tsx

import { useState } from "react";

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

  return (
    <section>
      <p>Jumlah klik: {count}</p>
      <button type="button" onClick={() => setCount(count + 1)}>
        Tambah
      </button>
    </section>
  );
}

`count` adalah value state saat ini. `setCount` adalah function untuk meminta React mengganti value itu dan render ulang UI.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Jangan ubah state langsung

State tidak diubah dengan assignment seperti `count = count + 1`. Gunakan setter dari `useState`, misalnya `setCount(count + 1)`, agar React tahu UI perlu dirender ulang.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Buat counter dan toggle dengan useState

Latihan memakai dua state kecil: count untuk angka dan isOpen untuk status panel.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

6 cek otomatis4 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kapan value paling tepat dijadikan state?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

State adalah memory kecil milik component.
`useState` mengembalikan value state dan setter function.
Setter function meminta React mengganti state dan render ulang.
Jangan mengubah state langsung dengan assignment.
Berikutnya, kamu akan menghubungkan state dengan event handler.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Component perlu mengingat value yang berubah.

Memuat progres Review module