Jika Anda seorang pengembang React yang belum belajar tentang hook React, sekaranglah saatnya. Posting ini akan melalui useEffect React Hook secara detail. Ini adalah kait yang setara dengan pisau Swiss Army. Ini memecahkan berbagai masalah, seperti cara mendapatkan data saat komponen dipasang, cara menjalankan kode saat status atau prop berubah, cara mengatur timer atau interval, dan seterusnya.
UseEffect digunakan untuk hampir semua hal yang ingin Anda "lakukan" dalam komponen React yang tidak mengembalikan JSX (semua jenis efek samping). Anda mungkin juga memiliki beberapa useEffects per komponen.
Semua kekuatan ini ada harganya: kecuali Anda memahami cara kerjanya, ini mungkin membingungkan. Dalam posting ini, kita akan melihat berbagai contoh sehingga Anda dapat memahami model konseptual dan menerapkannya pada kode Anda sendiri.
Bereaksi Hooks - Apa yang coba dipecahkan?
Hooks pertama kali diperkenalkan di React versi 16.8 dan sekarang digunakan oleh banyak proyek React. Hooks mengatasi masalah pengulangan kode antar komponen. Mereka ditulis tanpa menggunakan kelas. Ini tidak berarti bahwa React meninggalkan kelas; kait hanyalah metode alternatif.
React memungkinkan Anda dengan cepat membuat komponen canggih dengan logika stateful. Sulit untuk memisahkan komponen-komponen ini karena kelas bergantung pada React Lifecycle Methods. Di sinilah React Hooks masuk.
Mereka memungkinkan Anda untuk membagi komponen menjadi fungsi yang lebih kecil. Alih-alih membagi kode menjadi bagian-bagian yang lebih kecil berdasarkan metode Siklus Hidup, Anda sekarang dapat mengatur dan memisahkan kode menjadi unit yang lebih kecil tergantung pada fungsinya.
Apa itu useEffect Hook?
Hooks adalah fungsi yang memungkinkan Anda mengakses status dan kemampuan reaksi lainnya tanpa harus menulis kelas ES6. API kait reaksi memiliki kait yang disebut useEffect. Jika Anda mengenal siklus hidup reaksi, kait useEffect sama dengan komponenDidMount, komponenDidUpdate, dan komponenWillUnmount metode siklus hidup digabungkan.
Menurut dokumentasi React Hooks, itu dibuat untuk memecahkan beberapa masalah dengan metode siklus hidup komponen kelas ES6.
Sintaksis
Argumen pertama adalah fungsi panggilan balik, yang dijalankan secara default setelah setiap render. Parameter kedua adalah larik Dependency opsional yang menginstruksikan Hook untuk melakukan panggilan balik hanya jika status target berubah.
Hook membandingkan status masing-masing dependensi dan status saat ini. Jika kedua nilai tidak cocok, Hook akan memanggil callback yang ditentukan dalam parameter pertama. Array dependensi mengubah perilaku panggilan balik yang biasa dan menjamin bahwa Hook mengabaikan semua komponen lain dalam cakupan komponen.
Penggunaan dasar
Untuk menyimpan pesan, saya menggunakan React useState dalam contoh kode di atas. Setelah itu, saya mengambil variabel status pesan saya dan mencetaknya di layar. Namun, sekarang saya ingin menggunakanEffect untuk mengubah pesan sesaat setelah komponen dipasang.
Saya telah memasukkan efek saya di belakang baris useState setelah mengimpor useEffect dari framework React. Parameter pertama untuk useEffect adalah sebuah fungsi. Saat pengendali fungsi ini dijalankan, ia akan menangani semua efek samping yang Anda berikan. Fungsi tersebut adalah fungsi panggilan balik yang dipanggil ketika salah satu peristiwa siklus hidup komponen React terjadi.
Kapan menggunakannya?
Kait useEffect mungkin berguna dalam berbagai situasi. Berikut ini adalah yang paling krusial:
- Kita dapat mengubah parameter ini dari sisi klien ketika kita ingin mengambil data tergantung pada argumen yang diberikan. Ini akan dipanggil kembali setelah parameter diperbarui dengan data baru.
- Jika kita ingin mengambil data dari titik akhir API dan menampilkannya di sisi klien. Saat komponen kita dirender, fungsi atau handler yang diberikan ke hook useEffect dieksekusi, dan data dalam status komponen diambil. Status ini kemudian digunakan dalam komponen antarmuka pengguna.
- Ketika komponen Anda bergantung pada data dari dunia luar dan kami tidak dapat memastikan bahwa data akan tiba, kami harus menggunakanEffect (mungkin server di bawah sana). Daripada membuang masalah dan mencegah komponen lain ditampilkan, letakkan di hook useEffect.
Gunakan kasus
Jika komponen dirender ulang setelah dijalankan pertama kali, komponen tersebut tidak akan dieksekusi.
Setiap kali komponen merender atau merender ulang, itu harus selalu dieksekusi.
Secara default, program hanya berjalan satu kali. Setelah itu, jika nilai prop berubah, jalankan:
Untuk aktivitas asinkron, selalu gunakan useEffect.
blok kode useEffect adalah penanda yang jelas dari pekerjaan asinkron untuk sesama pengembang Anda. Dimungkinkan untuk membuat kode asinkron tanpa menggunakan useEffect, tetapi ini bukan "Metode Bereaksi," dan ini meningkatkan kompleksitas dan risiko kesalahan.
Menggunakan useEffect alih-alih menulis kode asinkron yang dapat menghentikan UI adalah teknik yang terkenal di komunitas React, terutama cara tim React membangunnya untuk melakukan efek samping.
Keuntungan lain dari menggunakannya adalah pengembang dapat dengan mudah meninjau kode dan segera mendeteksi kode yang dijalankan "di luar aliran kontrol", yang menjadi penting hanya setelah siklus render pertama. Selain itu, blok-blok tersebut cocok untuk diekstraksi menjadi Hooks kustom yang dapat digunakan kembali dan bahkan lebih semantik.
Sebuah contoh
Menggunakan kode useEffect, tambahkan angka per detik.
Kesimpulan
Memahami prinsip-prinsip desain yang mendasari dan praktik terbaik dari useEffect Hook, dalam pandangan saya, adalah keterampilan penting untuk dipelajari jika Anda ingin menjadi pengembang React tingkat berikutnya.
Singkatnya, useEffect Hook menerima fungsi yang mencakup logika penuh imperatif yang berpotensi mempengaruhi. Array ketergantungan, yang merupakan parameter kedua, dapat digunakan untuk mempengaruhi eksekusi. Saat menanganinya, Anda juga perlu menulis kode pembersihan menggunakan fungsi pengembalian.
Beri tahu kami di komentar jika artikel itu bermanfaat.
Tinggalkan Balasan