Aplikasi React dibina daripada komponen, dan setiap komponen menjalani kitaran hayat. Ia muncul di skrin. Ia bertindak balas terhadap maklumat baharu. Akhirnya, ia hilang. Abaikan ritma tersebut dan harganya adalah nyata. Kebocoran memori (memory leaks) akan mula berlaku. Prestasi render akan merosot. Pengguna menekan butang yang tidak lagi bertindak balas kerana komponen yang terikat padanya telah di-unmount sepuluh minit yang lalu, tetapi event listener masih aktif. Memahami kitaran hayat komponen bukanlah sekadar latihan akademik. Ia adalah asas dalam menulis perisian yang kekal boleh dipercayai semasa penggunaan sebenar.
Bayangkan kewujudan komponen dalam tiga peringkat. Pembangun sering menggambarkannya sebagai kelahiran, pertumbuhan, dan kematian. React memanggilnya mounting, updating, dan unmounting. Setiap peringkat mempunyai tugas khusus, dan setiap satunya memberi anda saat yang tepat untuk menjalankan kod atau membersihkannya.
Tiga Fasa
Mounting adalah kelahiran. Komponen dicipta dan dimasukkan ke dalam DOM pelayar buat kali pertama. Ini adalah jendela penyediaan (setup) anda. Jika komponen memerlukan data jauh, inilah masanya anda memintanya. Jika ia memerlukan initial state yang dikira daripada props, anda melakukannya di sini. Dalam era komponen kelas, ini adalah domain componentDidMount. Dengan komponen fungsi moden, anda mengendalikannya dengan useEffect dan tatasusunan kebergantungan (dependency array) yang kosong. Perincian utamanya ialah blok kod ini berjalan sekali sahaja, sejurus selepas React meletakkan elemen tersebut ke dalam halaman. Ini menjadikannya ideal untuk penyediaan sekali sahaja seperti mengambil profil pengguna atau membaca nilai daripada localStorage.
Updating adalah pertumbuhan. Komponen yang telah di-mount tidak hanya duduk diam. Props tiba daripada induk (parent). State berubah daripada interaksi pengguna. Induk itu sendiri melakukan re-render, memaksa anak (child) untuk mengikutinya. React kemudian melakukan re-render pada komponen untuk memastikan UI sentiasa selari dengan data anda. Fasa ini berulang banyak kali sepanjang hayat komponen. Setiap kali kebergantungan berubah, effect anda akan berjalan semula, dan komponen memberikan output baharu kembali ke dalam DOM. Oleh kerana fasa ini dicetuskan dengan begitu kerap, di sinilah kebanyakan masalah prestasi bermula. Kerja yang tidak perlu di sini akan bertimbun dengan cepat.
Unmounting adalah kematian. Komponen meninggalkan skrin, mungkin kerana pengguna beralih ke halaman lain atau conditional render telah dimatikan. Pada ketika ini, komponen dimusnahkan, tetapi dunia luar tidak selalunya menyedarinya. Pemasa (timers) terus berjalan. WebSocket terus mendengar. Event listener pada objek window kekal terikat. Jika anda tidak membersihkannya, ia akan memegang rujukan kepada komponen yang telah mati dan menyebabkan kebocoran memori. Pelayar membazirkan kitaran (cycles) pada "hantu". React memberikan anda fungsi pembersihan (cleanup function) supaya anda boleh menghentikan selang masa (intervals), menutup sambungan, dan membuang listener sebelum komponen hilang buat selama-lamanya.
Daripada Kaedah Kelas kepada Hooks
Selama bertahun-tahun, jurutera React menguruskan fasa-fasa ini melalui komponen kelas. Logik dipecahkan merentasi kaedah-kaedah yang berbeza. Anda mengambil data di dalam componentDidMount, bertindak balas terhadap perubahan prop di dalam componentDidUpdate, dan "menyapu lantai" di dalam componentWillUnmount. Masalahnya ialah logik yang berkaitan akhirnya bersepah. Satu ciri tunggal, seperti sambungan sembang langsung (live chat), memerlukan kod dalam tiga kaedah kitaran hayat yang berbeza hanya untuk menyambung, menyemak perubahan bebenang (thread), dan memutuskan sambungan.
Hooks mengubah perkara itu. Hook useEffect dalam komponen fungsi membolehkan anda mengumpulkan logik mengikut tujuan dan bukannya mengikut fasa kitaran hayat. Walau bagaimanapun, model mentalnya tetap selari jika anda tahu di mana hendak mencari.
Untuk mengendalikan mounting, tulis useEffect(() => { ... }, []). Tatasusunan kebergantungan yang kosong memberitahu React bahawa effect ini tidak mempunyai kebergantungan luaran, jadi ia hanya berjalan selepas render awal. Ini menggantikan componentDidMount.
Untuk mengendalikan updates, sertakan nilai khusus yang perlu diperhatikan oleh React: useEffect(() => { ... }, [dependency]). Apabila dependency berubah antara render,