Materi
Variabel lokal tidak cukup untuk data yang berubah karena interaksi. Ada dua penghalang: variabel lokal dibuat ulang dari awal setiap kali komponen dirender, dan mengubah variabel lokal tidak membuat React merender ulang. State mengatasi keduanya: nilainya disimpan React di antara render, dan mengubahnya memicu render baru.
import { useState } from "react";
export default function Porsi() {
const [porsi, setPorsi] = useState(1);
return (
<>
<p>{porsi} porsi</p>
<button onClick={() => setPorsi(porsi + 1)}>Tambah porsi</button>
</>
);
}useState menerima nilai awal dan mengembalikan pasangan: nilai state untuk render ini dan fungsi pengubahnya. Konvensinya [sesuatu, setSesuatu]. Memanggil setPorsi menyimpan nilai baru dan memicu render ulang; pada render berikutnya useState mengembalikan nilai yang tersimpan, bukan nilai awal lagi.
Fungsi yang namanya diawali use disebut Hook. Hook hanya boleh dipanggil di tingkat teratas komponen, sebelum return apa pun, dan tidak di dalam if, perulangan, atau fungsi bersarang. React mengenali setiap state dari urutan pemanggilan Hook, jadi urutan itu harus sama di setiap render.
State melekat pada setiap salinan komponen di layar. Dua <Porsi /> yang dirender berdampingan punya state masing-masing; mengubah yang satu tidak menyentuh yang lain. State juga privat: komponen induk tidak bisa membacanya.
