Melepaskan Diri daripada Perangkap: Memperbaiki Stale Closures dalam React Hooks
Stale closures menyebabkan kehilangan data secara senyap dalam React.
Anda membina papan pemuka dengan pemasa latar belakang. Anda menggunakan setInterval di dalam hook useEffect untuk menyimpan data secara automatik setiap 5 saat.
Pepijat berlaku apabila selang tersebut dijalankan. Ia menyimpan dokumen kosong walaupun pengguna telah menaip satu halaman penuh. Selang tersebut kekal terperangkap dalam keadaan lama. Ia menggunakan versi state anda yang lama.
Masalahnya
Apabila useEffect dijalankan, ia menangkap pemboleh ubah dalam skopnya.
- Jika anda tidak memasukkan state ke dalam dependency array, selang tersebut akan menggunakan state daripada render pertama.
- Jika anda menambah state ke dalam dependency array, React akan memulakan semula selang tersebut pada setiap tekanan kekunci. Ini menjejaskan prestasi dan merosakkan pemasaan anda.
Penyelesaian: Corak Mutable Ref
Anda mesti memisahkan pemasa daripada data. Gunakan hook useRef untuk mengekalkan rujukan tetap kepada state terkini anda. Ini mengelakkan render semula dan memastikan selang anda stabil.
Cara melaksanakannya:
- Cipta satu ref untuk menyimpan state terkini anda.
- Gunakan
useEffectuntuk mengemas kini ref tersebut setiap kali state anda berubah. - Mulakan selang anda dengan dependency array yang kosong supaya ia hanya berjalan sekali sahaja.
- Akses ref tersebut di dalam callback selang anda.
Kaedah ini memastikan tugasan latar belakang anda sentiasa menggunakan data yang segar. Ia memastikan UI anda pantas dan data anda selamat.
Sumber: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7