Atasi Stale Closures dalam React Hooks
Anda membina pemasa dalam hook useEffect React. Anda mahu menyimpan dokumen secara automatik setiap lima saat. Pemasa berjalan, tetapi ia menyimpan dokumen kosong. Pengguna telah menaip sepuluh perenggan, tetapi pemasa tidak melihat apa-apa.
Ini adalah stale closure.
Hook useEffect menangkap pemboleh ubah daripada render pertama. Jika anda meninggalkan state di luar dependency array, pemasa akan terus terperangkap dalam keadaan lama. Ia menggunakan versi data anda yang lama.
Jika anda menambah state ke dalam dependency array, pemasa akan ditetapkan semula setiap kali pengguna menaip satu aksara. Ini merosakkan prestasi dan mengganggu logik pemasaan anda.
Anda boleh menyelesaikan masalah ini dengan Mutable Ref Pattern.
Gunakan hook useRef untuk menyimpan state terkini anda. Ini membolehkan pemasa anda mengakses data segar tanpa mencetuskan render baharu atau menetapkan semula interval.
Ikuti langkah-langkah ini:
- Cipta satu ref untuk menyimpan state anda.
- Gunakan
useEffectuntuk menyelaraskan ref dengan state anda. - Tetapkan interval anda dengan dependency array yang kosong supaya ia hanya berjalan sekali.
- Akses ref tersebut di dalam callback interval.
Pendekatan ini memisahkan pemasa anda daripada data anda. Tugasan latar belakang anda kekal stabil. Data anda kekal tepat.
Berhenti kehilangan data pengguna disebabkan pepijat senyap (silent bugs). Gunakan refs untuk memastikan tugasan asinkronus anda selaras dengan UI anda.
Sumber: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7