Frontend Academy · Pelajaran

Hook useState: State dan Render Ulang

Panggil useState untuk menambahkan state lokal ke komponen, perbarui state dengan fungsi setter, dan pahami kapan serta mengapa React melakukan render ulang.

Hook useState: State dan Render Ulang adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu Status?

Status adalah data yang berubah seiring waktu dan seharusnya menyebabkan UI diperbarui saat perubahan itu terjadi. Berbeda dari variabel biasa, perubahan status memicu React untuk merender ulang komponen dengan nilai baru.

Sintaks useState

useState(initialValue) mengembalikan tupel: nilai saat ini dan fungsi pengatur. Segera destrukturisasi hasilnya.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // initial value: 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

TypeScript: Menentukan Tipe useState

TypeScript menyimpulkan tipe dari nilai awal. Jika nilai awalnya ambigu (null atau larik kosong), tambahkan parameter tipe secara eksplisit.

const [count, setCount] = useState(0);           // inferred: number
const [name, setName]  = useState('');            // inferred: string
const [user, setUser]  = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicit

Render Ulang saat Status Berubah

Memanggil fungsi pengatur menjadwalkan render ulang. React memanggil fungsi komponen Anda lagi dengan nilai status yang baru. JSX yang dikembalikan menggantikan hasil render sebelumnya dalam DOM virtual.

Pembaruan Status Bersifat Asinkron

Pembaruan status dikelompokkan dan diterapkan sebelum render berikutnya, bukan secara langsung. Jangan membaca status yang baru diperbarui dalam penangan kejadian yang sama — nilai baru belum tersedia sampai render berikutnya.

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

function handleClick() {
  setCount(count + 1);
  console.log(count); // still 0 — update hasn't applied yet
}

Pembaruan Fungsional

Jika status baru bergantung pada status sebelumnya, gunakan bentuk fungsional dari fungsi pengatur. Ini menghindari bug penutupan yang kedaluwarsa.

// Risky (stale closure in async callbacks):
setCount(count + 1);

// Safe (functional update):
setCount(prev => prev + 1);

// Important for buttons that fire rapidly:
function increment() {
  setCount(c => c + 1); // always uses the latest value
}

Status dengan Objek

Jika status berupa objek, selalu buat objek baru — jangan ubah objek yang sudah ada. React membandingkan berdasarkan referensi; perubahan langsung tidak akan memicu render ulang.

const [user, setUser] = useState({ name: 'Alice', age: 30 });

// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!

// CORRECT: new object
setUser({ ...user, age: 31 });

Beberapa Variabel Status

Panggil useState beberapa kali untuk variabel status yang tidak saling bergantung. Ini lebih bersih daripada satu objek status besar ketika nilainya tidak berubah secara bersamaan.

const [name, setName]   = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);

Inisialisasi Tertunda

Jika status awal memerlukan perhitungan yang mahal, teruskan fungsi ke useState. Fungsi tersebut hanya berjalan pada render pertama, bukan pada setiap render ulang.

// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());

// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());

Kapan Tidak Menggunakan Status

Tidak setiap variabel perlu menjadi status. Nilai turunan (total = items.reduce(…)) sebaiknya dihitung selama perenderan, bukan disimpan dalam status. Status yang diturunkan dari properti biasanya merupakan tanda rekayasa berlebihan.

Mengangkat Status

Jika dua komponen saudara perlu berbagi status, angkat status tersebut ke leluhur bersama dan teruskan ke bawah sebagai properti. Ini adalah pola dasar pengelolaan status React sebelum menggunakan konteks atau penyimpanan.

Pemeriksaan Singkat

Mengapa Anda sebaiknya menggunakan bentuk fungsional setCount(prev => prev + 1), bukan setCount(count + 1)?

Ringkasan: useState

useState mengembalikan [value, setter]. Nilai awal menentukan tipe (atau gunakan generik eksplisit). Setter memicu render ulang. Gunakan pembaruan fungsional ketika status baru bergantung pada status lama. Untuk objek: selalu sebarkan ke objek baru, jangan pernah mengubahnya langsung. Gunakan inisialisasi tertunda untuk perhitungan yang mahal. Angkat status ke leluhur bersama ketika komponen saudara perlu berbagi status.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Hook useState: State dan Render Ulang” gratis?

Ya — teks lengkap “Hook useState: State dan Render Ulang” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Hook useState: State dan Render Ulang”?

Panggil useState untuk menambahkan state lokal ke komponen, perbarui state dengan fungsi setter, dan pahami kapan serta mengapa React melakukan render ulang. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Hook useState: State dan Render Ulang” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy