Apa Itu State?

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 22 dari 42.

Semua yang telah kita bahas sejauh ini bersifat tetap: data masuk, halaman muncul, dan tidak ada yang berubah. Aplikasi nyata mengingat hal-hal yang berubah: jumlah suka, menu yang terbuka, teks di kotak pencarian. Ingatan itu disebut state.

React memberikan state kepada komponen melalui hook useState:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

Satu baris, tiga bagian:

count: nilai saat ini
setCount: fungsi yang mengubahnya
useState(0): nilai awal

Aturan utamanya: jangan pernah menetapkan nilai ke state secara langsung. count = 5 menimbulkan error karena count adalah const. Bahkan jika nilainya bisa berubah, React tidak akan mengetahuinya. setCount(5) mengubah state dan merender ulang komponen. Render ulang itulah yang memperbarui layar.

Coba sendiri

Pelajaran ini tidak memiliki tantangan kode.