Jebakan UseEffect untuk React Programmer

Oh, saya ingat betapa senangnya komunitas React ketika mereka muncul di versi 16.8. Pengembang terobsesi dengan mereka — mereka bereksperimen dengan pengait khusus dan bersedia menulis ulang semua Classkomponen dan memulai dari halaman baru.

Ada banyak contoh di internet di mana orang menunjukkan betapa hebatnya hook dan bagaimana hook menyederhanakan hidup kita dengan memungkinkan penggalian logika umum. Namun, kita harus ingat bahwa hook dapat membuat kode kita sangat tidak dapat dibaca dan tidak dapat diprediksi jika kita menyalahgunakannya.

Jangan salah paham, saya suka pengait, dan saya punya banyak pengait khusus yang sering saya gunakan. Namun sayangnya, di tempat kerja, saya sering melihat bagaimana programmer React baru berjuang untuk memahami mengapa useEffectmenyebabkan infinity loop atau bagaimana menangani array ketergantungannya dengan benar.

Berikut adalah kesulitan paling umum yang dapat Anda hadapi saat menggunakan useEffect.

Biarkan ESLint membantu Anda

Salah satu hal penting tentang useEffectadalah array ketergantungan. Ini mendefinisikan bagaimana useEffectakan berperilaku — pemicu pada pemasangan komponen, mengubah beberapa nilai di negara bagian, atau bahkan pada setiap rerender.

Terkadang useEffectberperilaku tidak terduga karena dependensi yang salah. Untuk menghindari situasi ini, gunakan eslint-plugin-react-hooks karena kami tidak ingin berbohong tentang ketergantungan.

Misalnya, saya memiliki komponen dasar, yang mendapatkan teks dari alat peraga dan mencoba mengambil artikel dari teks yang diberikan. Saya ingin mendapatkan data saat komponen pertama kali dipasang. Untuk itu, saya perlu useEffectdengan array ketergantungan kosong.

Memanggil getArticlesdari useEffectmembuat peringatan karena getArticlesmenggunakan nilai dari alat peraga.

Terlalu banyak.

Oke, jadi kami tidak berbohong tentang dependensi dan setuju untuk menambahkan semua variabel dan fungsi yang diperlukan ke dalam daftar. Dan apa yang kita dapatkan?

Oh, peringatan lain!

Jadi, karena pesan kami, fungsi kami dibuat ulang pada setiap perenderan ulang yang dapat memicu useEffectpengait; bukan itu yang kita butuhkan, jadi pertanyaannya adalah — bagaimana cara memperbaikinya?

Kami memiliki opsi berikut di sini:

1. Untuk mendefinisikan fungsi di dalam useEffect.
2. Untuk membungkus fungsi dalam sebuah useCallbackkait.

Putaran tak terhingga

Sayangnya, situasi ini sangat sering terjadi. Misalnya, di dalam useEffect, kami mencoba mengubah beberapa nilai di negara bagian berdasarkan nilai sebelumnya dan harus menambahkan nilai ini ke larik dependensi.

Dan kemudian, kami mendapatkan loop tak terhingga karena useEffectdipicu setelah setiap rendering ulang, dan mendeteksi bahwa nilai dari status diubah, sehingga mencoba mengubahnya berulang kali. Kedengarannya sederhana dan logis, tetapi ini merupakan jebakan bagi banyak programmer.

Apa yang bisa kita lakukan?

1. Perbarui status melalui fungsi dari useStatepengait useEffecttanpa ketergantungan apa pun.
2. Gunakan dispatch dari useReducerhook untuk memperbarui status.

Cara paling mudah untuk mengontrol status komponen adalah dengan menggunakan useStatehook, tetapi jika status Anda menjadi lebih rumit, Anda harus mencobanya useReducer. Sintaksnya sangat mirip dengan useState, tetapi Anda memiliki fungsi di mana Anda dapat menentukan bagaimana status komponen akan berubah dalam kasus yang berbeda.

Pertama, lebih mudah untuk mendefinisikan bagaimana keadaan berubah tergantung pada tindakan. Kedua, gunakan dispatchfungsi yang tidak diubah selama render ulang. Ini bermanfaat ketika Anda menggunakan array ketergantungan.

Penting untuk diingat

1. useRefdan dispatchtidak berubah selama render ulang. Itu sebabnya Anda dapat menggunakannya dengan aman useEffectdan useCallbacktanpa stres memprovokasi rendering ulang yang tidak perlu.
2. Anda dapat memiliki useEffectpengait sebanyak yang Anda butuhkan; lebih baik tidak memperumit masalah dan tidak mencoba menempatkan semua kemungkinan logika dalam satu putaran. Sulit untuk membaca dan menguji.
3. Urutan useEffectkait adalah import. Mereka akan dipicu satu demi satu.
4. Fungsi dan variabel yang didefinisikan dari komponen (bukan dari props) tidak akan pernah memicu useEffecthook, dan Anda tidak perlu menambahkannya ke array dependensi.
5. Jika useEffectpengait Anda membutuhkan fungsi dalam larik ketergantungan, dan Anda tidak dapat mendefinisikannya di dalam useEffecttubuh, maka bungkus dengan useCallback. Jika berasal dari props, pembungkusan itu harus dilakukan di tempat fungsi didefinisikan.

Juga, lihat dokumentasi React . Versi ini fantastis. Anda dapat menemukan banyak informasi bermanfaat.

Itu semua tentang mengelola useEffectdependensi. Saya harap tips ini akan membantu.