Materi
Sebagian kode tidak dipicu oleh klik, tetapi oleh tampilnya komponen itu sendiri: mengganti judul tab browser, berlangganan kabar dari objek di luar React, atau menyambung ke server. Kode seperti itu ditulis di Effect. useEffect menerima fungsi yang dijalankan React di akhir commit, setelah layar diperbarui.
import { useEffect, useState } from "react";
export default function PesananMasuk() {
const [baru, setBaru] = useState(0);
useEffect(() => {
document.title = baru + " pesanan baru";
}, [baru]);
return <button onClick={() => setBaru(baru + 1)}>Pesanan masuk</button>;
}Argumen kedua, larik dependensi, menentukan kapan Effect dijalankan ulang. Tanpa larik, Effect berjalan setelah setiap render. Dengan larik kosong [], Effect hanya berjalan saat komponen pertama kali tampil (mount). Dengan [a, b], Effect berjalan saat mount dan setiap kali a atau b berubah dibanding render sebelumnya. Setiap nilai props atau state yang dibaca Effect masuk ke larik itu.
Effect yang memasang sesuatu juga harus melepasnya. Fungsi yang dikembalikan Effect disebut fungsi pembersih: berlangganan dipasangkan dengan berhenti berlangganan, menyambung dengan memutus. React memanggil pembersih setiap kali sebelum Effect dijalankan ulang, dan sekali lagi saat komponen dilepas dari layar. Dalam Strict Mode di tahap pengembangan, React sengaja menjalankan satu siklus pasang dan bersihkan tambahan untuk menguji pembersih itu.
Tidak semua hal membutuhkan Effect. Nilai yang bisa dihitung dari props atau state, seperti total belanja atau nama lengkap, dihitung langsung saat render. Menyimpannya ke state lewat Effect menambah satu render dan membuka peluang nilai yang tidak sinkron.
