React: Membangun Antarmuka Pengguna · 4/9

State dengan useState

Memori yang bertahan melewati re-render, dan aturan bahwa pembaruan state tidak langsung terjadi.

Baca 30 menit

Setelah pelajaran ini kamu bisa

Menambahkan state ke sebuah component dengan `useState`
Menjelaskan kenapa pembaruan state tidak langsung terjadi
Memakai functional update, dan menyebutkan kapan itu wajib
Menjelaskan kenapa state harus diganti, jangan dimutasi

State adalah memori yang bertahan melewati re-render dan, saat berubah, justru memicunya. Variable biasa di dalam component di-reset setiap render, itu sebabnya ia tidak bisa menyimpan apa pun.

tsx

import { useState } from "react";

function Counter() {
  // [ the current value, a function to change it ]
  const [count, setCount] = useState(0);   // 0 is the initial value

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

useState mengembalikan array berisi tepat dua hal, jadi ia selalu di-destructure. Konvensi penamaannya [thing, setThing].

Pembaruan masuk queue, bukan langsung

Ini hal paling mengejutkan tentang useState, dan ia menyebabkan bug yang hampir ditulis semua orang sekali.

tsx

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

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    console.log(count);     // still the OLD value - 0 on the first click
  }
  // Result: count becomes 1, not 3.
}

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

  function handleClick() {
    setCount((c) => c + 1);   // "whatever it is, add one"
    setCount((c) => c + 1);
    setCount((c) => c + 1);
  }
  // Result: count becomes 3.
}

Coba sendiri

Queue yang menjelaskannya. Ini benar-benar cara React memproses pembaruan yang kamu minta.

// React collects updates during an event, then applies them all at once
// before the next render. That collection is the queue.
function processQueue(currentValue, queue) {
  let value = currentValue;
  for (const update of queue) {
    // An update is either a replacement value, or a function of the previous.
    value = typeof update === "function" ? update(value) : update;
  }
  return value;
}

const count = 0;   // the value THIS render closed over

console.log("--- setCount(count + 1) three times ---");
// `count` is 0 in all three, because the render's variable never changes.
const queueA = [count + 1, count + 1, count + 1];
console.log("queue:", JSON.stringify(queueA));
console.log("result:", processQueue(count, queueA), "<- each one replaces the last");
console.log("");

console.log("--- setCount(c => c + 1) three times ---");
const queueB = [(c) => c + 1, (c) => c + 1, (c) => c + 1];
console.log("queue: [fn, fn, fn]");
console.log("result:", processQueue(count, queueB), "<- each builds on the previous");
console.log("");

console.log("--- mixing them ---");
const queueC = [(c) => c + 1, 100, (c) => c + 1];
console.log("result:", processQueue(count, queueC), "<- the plain 100 discards what came before");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Alasannya kembali soal closure: count adalah const milik render *ini*. Ia tidak bisa berubah. setCount(count + 1) berarti "jadikan 1", diucapkan tiga kali. setCount(c => c + 1) berarti "tambah satu pada nilainya nanti", dan itu bisa disusun bertumpuk.

Ganti, jangan mutasi

React mendeteksi perubahan dengan membandingkan reference. Memutasi object atau array di tempat membuat reference-nya tetap sama, jadi React tidak melihat apa pun dan tidak re-render. Ini pelajaran reference dari modul 2, datang sebagai bug UI.

Coba sendiri

Pemeriksaan perubahan React yang sebenarnya, dalam satu baris. Jalankan dan lihat pembaruan mana yang ia sadari.

// This is the whole comparison React makes.
function willReRender(previous, next) {
  return previous !== next;
}

const guests = ["Ana", "Budi"];

console.log("--- mutating ---");
const mutated = guests;
mutated.push("Citra");
console.log("contents changed:", mutated.length === 3);
console.log("React re-renders:", willReRender(guests, mutated), "<- the screen goes stale");
console.log("");

console.log("--- replacing ---");
const original = ["Ana", "Budi"];
const replaced = [...original, "Citra"];
console.log("React re-renders:", willReRender(original, replaced));
console.log("");

console.log("--- the four patterns you need ---");
const list = [{ id: 1, done: false }, { id: 2, done: false }];

const added = [...list, { id: 3, done: false }];
const removed = list.filter((t) => t.id !== 1);
const updated = list.map((t) => (t.id === 2 ? { ...t, done: true } : t));
const sorted = [...list].sort((a, b) => b.id - a.id);   // copy first: sort mutates

console.log("add:   ", JSON.stringify(added.map((t) => t.id)));
console.log("remove:", JSON.stringify(removed.map((t) => t.id)));
console.log("update:", JSON.stringify(updated));
console.log("sort:  ", JSON.stringify(sorted.map((t) => t.id)));
console.log("original untouched:", JSON.stringify(list.map((t) => t.id)));

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Memilih apa yang masuk ke state

Jaga tetap minimal. Kalau sebuah nilai bisa dihitung dari state lain, hitung saja — pelajaran dua langkah lagi membahas ini.
Kelompokkan yang berubah bersama. Field yang berkaitan dalam satu object lebih baik daripada lima pemanggilan useState terpisah.
Jangan menaruh props ke dalam state. Itu menangkap nilai prop-nya sekali lalu mengabaikan pembaruan berikutnya. Sumber UI usang yang sangat umum.
Modelkan state sebagai union, bukan boolean. status: "loading" | "error" | "success" tidak bisa mewakili loading-dan-error sekaligus; empat boolean bisa.

Tugas praktik

Di proyek ini, buka features/lesson/runner/code-runner.tsx. Daftar setiap state yang dipegangnya dan jelaskan kenapa masing-masingnya perlu jadi state alih-alih variable biasa. Lalu temukan runningRef dan baca komentar yang menjelaskan kenapa ia sebuah ref dan bukan state — kamu akan sepenuhnya memahaminya setelah pelajaran ref.

Hasil yang diharapkan

Empat nilai state, masing-masing menggerakkan sesuatu yang terlihat di layar.

Cek pemahaman

Sebuah click handler memanggil setCount(count + 1) tiga kali, mulai dari 0. Berapa nilai count setelahnya?

31, karena ketiganya memasukkan nilai yang sama ke queue — pakai bentuk function0, karena pembaruan state diabaikan di dalam satu handler

Pilih jawaban dulu