𝗞𝗲𝗹𝘂𝗮𝗿 𝗱𝗮𝗿𝗶 𝗝𝗲𝗯𝗮𝗸𝗮𝗻: 𝗠𝗲𝗺𝗽𝗲𝗿𝗯𝗮𝗶𝗸𝗶 𝗦𝘁𝗮𝗹𝗲 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗱𝗮𝗹𝗮𝗺 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀
Stale closures menyebabkan hilangnya data secara diam-diam di React.
Anda membangun sebuah dashboard dengan timer latar belakang. Anda menggunakan setInterval di dalam hook useEffect untuk menyimpan data secara otomatis setiap 5 detik.
Bug terjadi saat interval dijalankan. Ia menyimpan dokumen kosong meskipun pengguna telah mengetik satu halaman penuh. Interval tersebut tetap terjebak di masa lalu. Ia menggunakan versi state lama Anda.
Masalahnya
Saat useEffect berjalan, ia menangkap variabel-variabel di dalam cakupannya (scope).
- Jika Anda tidak memasukkan state ke dalam dependency array, interval akan menggunakan state dari render pertama.
- Jika Anda menambahkan state ke dalam dependency array, React akan memulai ulang interval pada setiap ketukan tombol. Hal ini merusak performa dan mengacaukan pengaturan waktu Anda.
Solusinya: Pola Mutable Ref
Anda harus memisahkan timer dari data. Gunakan hook useRef untuk menyimpan referensi konstan ke state terbaru Anda. Ini menghindari re-render dan menjaga interval Anda tetap stabil.
Cara mengimplementasikannya:
- Buat sebuah ref untuk menyimpan state terbaru Anda.
- Gunakan useEffect untuk memperbarui ref tersebut setiap kali state Anda berubah.
- Mulai interval Anda dengan dependency array kosong agar hanya berjalan satu kali.
- Akses ref tersebut di dalam callback interval Anda.
Metode ini memastikan tugas latar belakang Anda selalu menggunakan data terbaru. Ini menjaga UI Anda tetap cepat dan data Anda tetap aman.
Sumber: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7