React useEffect() Hook: Penggunaan, Bagaimana dan Kapan Menggunakannya

Pengantar Kait useEffect()

useeffect hook komponen kunci.Ini menangani tugas-tugas seperti pengambilan data, menyiapkan pendengar acara, atau memodifikasi DOM dan memungkinkan pengguna untuk melakukan efek samping menggunakan komponen fungsional. Ini juga mengontrol siklus hidup komponen.

Kaituseeffect memanfaatkan dua argumen, fungsi dan larik dependensi opsional.Fungsi yang diteruskan sebagai argumen pertama dieksekusi setelah rendering awal komponen dan sekali lagi setelah setiap pembaruan. Anda dapat menunjukkan variabel yang bergantung pada efek menggunakan larik dependensi. Proses baru dari efek dilakukan jika salah satu variabel array ketergantungan berubah.

Pada dasarnyauseeffect hook diciptakan untuk mengatasi tantangan yang dihadapi di bawah siklus hidup komponen kelas ES6.Namun, sekarang telah menjadi salah satu konsep reaksi inti.

Dengan ringkasan tentangapa itu useeffect di react , sekarang mari kita lihat sintaksnya.

Sintaks Dasar dari useEffect() Hook

useEffect mendukung dua argumen ; argumen kedua adalah opsional. Sintaksnya seperti di bawah ini:

useEffect(<fungsi>, <ketergantungan>)

Fungsi ini menyertakan logika efek samping. Ini memprovokasi eksekusi panggilan balik langsung setelah pembaruan DOM.

Ketergantungan berisi susunan ketergantungan opsional dari efek samping Anda, yaitu, nilai status dan properti. Perhatikan bahwause effect hook menjalankan callback hanya jika dependensi telah berubah selama rendering.

Sintaks melayani tujuan tunggal useEffect(). Ini memungkinkan Anda menempatkan logika efek samping di dalam fungsi panggilan balik dan kemudian menggunakan argumen dependensi untuk mengontrol kapan Anda perlu menjalankan efek samping.

Anda dapat mempertimbangkan sintaks berikut saat mengimplementasikan useEffect() Hook:

// impor useEffect

impor { useEffect } dari 'bereaksi';

function MyComponent() {

// menyebutnya di atas JSX yang dikembalikan

// meneruskan dua argumen padanya yaitu array dan fungsi

useEffect(() => {

// fungsi efek

kembali () => {

// fungsi pembersihan

};

}, [/* larik ketergantungan */]);

// logika rendering komponen

}

}

Lihatkursus teknologi gratiskami untuk mendapatkan keunggulan dalam persaingan.

Mounting dan Unmount Komponen dengan useEffect() Hook

Pemasangan

Tahap awal siklus hidup komponen React melibatkan pembuatan dan penyisipan komponen ke dalam DOM. Tahap daur hidup dari efek penggunaan reaksi ini mencakup metode daur hidup componentDidMount, yang dijalankan saat komponen terpasang.

Berikut adalah contoh pemasangan komponen menggunakan useEffect() hook.

componentDidMount() {

console.log(“Komponen berhasil dipasang”);

ini.setState({

dimuat: benar

})

}

Dalam contoh di atas, componentDidMount memungkinkan Anda menggunakan setState. Jadi, Anda dapat dengan mudah mengatur dan mengubah status dalam metode siklus hidup. Metode terkait menggunakan panggilan API, memanggil titik akhir jarak jauh, dan mengambil data.

Melepas

Metode siklus hidup react useeffect ini menangani pembersihan di DOM.Ini sepertifungsi pembersihan efek penggunaan yang menghapus komponen dari DOM.Ini disebut unmount di React. Unmount hanya menggunakan satu metode lifecycle, yaitu componentWillUnmount. Ini dipanggil saat Anda ingin menghapus komponen dari DOM.

componentWillUnmount() {

console.log(“Komponen berhasil dilepas”);

}

Menggunakan use effect() Hook untuk Menangani Perubahan Status

useeffect dijalankan setelah setiap render .Itu juga digunakan untuk menjalankan kode-kode tertentu sebagai pengakuan atas perubahan keadaan. Anda dapat mengontrol waktu eksekusi efek dengan meneruskan argumen kedua di useEffect() Hook. Argumen kedua berfungsi sebagai larik dependensi, yaitu, jika variabel terkait diubah, efeknya harus dijalankan kembali. Perhatikan bahwa status adalah salah satu jenis variabel.

Bagian berikut mengilustrasikan contoh untuk menjelaskan bagaimanause effect hook menangani perubahan status.

Misalnya, Anda mungkin ingin menjalankan efek samping berdasarkan nilai "hari". Misalkan Anda memiliki efek samping untuk menampilkan pesan ucapan tergantung pada nilai hari itu. Nilai hari ini disimpan dalam variabel status.

Setiap kali Anda memilih hari, status akan diperbarui. Perubahan nilai status memungkinkan Anda memperbarui pesan salam. Anda harus meneruskan variabel status ke useEffect hook sebagai subset dari larik ketergantungan.

useEffect(() =>

{

// Efek samping

}, [negara]);

Dalam contoh useeffect react native di atas , efek samping akan berjalan jika nilai variabel status diperbarui.

Jelajahi Kursus Rekayasa Perangkat Lunak Populer kami

Menggunakan useEffect() Hook dengan API dan Permintaan Jaringan

Anda dapat menggunakan hook 'useEffect()' dengan API dan permintaan jaringan untuk mengambil data dari server dan menangani error. Berikut adalah contoh cara menggunakan 'useEffect()' dengan API dan menangani kesalahan jaringan:

import React, { useState, useEffect } dari 'react';

function MyComponent() {

const [data, setData] = useState(null);

const [kesalahan, setError] = useState(null);

useEffect(() => {

fungsi async fetchData() {

mencoba {

respon const = menunggu pengambilan('https://api.example.com/data');

if (! respon.ok) {

throw new Error('Tanggapan jaringan tidak baik');

}

const json = menunggu respon.json();

setData(json);

} tangkap (kesalahan) {

setError(kesalahan);

}

}

ambilData();

}, []);

jika (kesalahan) {

return <div>Kesalahan: {error.message}</div>;

}

jika (!data) {

return <div>Memuat…</div>;

}

kembali (

<div>

<p>{data.message}</p>

</div>

);

}

Anda dapat memodifikasi contoh ini untuk menyertakan fungsionalitas tambahan apa pun yang Anda perlukan untuk menangani permintaan jaringan dan respons API.

Teknik Kait useEffect() tingkat lanjut

Salah satu teknik asli useeffect react yang canggih adalah menghafal.Ini adalah teknik pengoptimalan di mana output dari pemanggilan fungsi di-cache. Selanjutnya,fungsi pengembalian useeffect mengembalikannya ketika input yang sama diumpankan lagi.

Teknik useEffect() Hook lain yang terkenal adalah useMemo Hook. Ini memungkinkan Anda menghitung nilai dan menghafalnya. Sintaksnya adalah:

impor { useMemo } dari 'bereaksi'

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

useEffect() Ketergantungan Pengait

dependensi useEffect() Hook berisi daftar dependensi dari efek samping Anda sementara juga terdiri dari nilai status atau prop. Argumen dependensi memungkinkan Anda untuk menangkap beberapa peristiwa siklus hidup komponen seperti komponen dipasang atau nilai status/prop tertentu diperbarui.

Argumen dependensi memungkinkan Anda mengontrol waktu saat efek samping dipanggil, terlepas dari siklus rendering komponen.

Rendering Bersyarat dengan useEffect() Hook

useEffect Hook memungkinkan Anda untuk menempatkan kondisi di dalam hook. Ini sebuah contoh.

useEffect(() => {

if (harusEksekusi) {

// (daftar kondisi)

}

}, [harusEksekusi])

Anda perlu menyebutkan kondisi wajib yang ingin Anda jalankan di bawah fungsi shouldExecute.

gunakan effect() Hook vs ComponentDidMount() dan ComponentDidUpdate()

useEffect() Kait vs componentDidUpdate():

useEffect() Kait vs componentDidMount():

Kesalahan Umum dan Praktik Terbaik dengan useEffect() Hook.

Kesalahan Umum

1. Tidak mendefinisikan dependensi

useEffect berjalan setiap kali komponen dirender. Oleh karena itu, Anda harus menentukan nilai yang harus memicu render ulang. Jika tidak, fungsi useEffect Anda dapat menimbulkan masalah kinerja.

2. Tidak membersihkan setelah mengeksekusi hook useEffect

useEffect dapat mengembalikan fungsi pembersihan yang dijalankan saat komponen dilepas. Tidak membersihkan setelah useEffect dapat membuat kebocoran memori dan masalah lainnya. Jadi, penting untuk menggunakan fungsi pembersihan useeffect .

3. Menggunakan setState dalam fungsi useEffect tanpa ketergantungan

Jika Anda mengupdate status di useEffect, ini akan memicu render lain. Ini dapat menyebabkan loop tak terbatas. Untuk mencegah hal ini, Anda harus selalu mendefinisikan variabel status yang Anda perbarui sebagai dependensi dalam hook useEffect.

Jelajahi Kursus Gratis Pengembangan Perangkat Lunak Kami

Praktik terbaik:

• Jika Anda ingin menggunakan hook useEffect, pastikan hanya menggunakan satu per komponen. Dalam kasus beberapa hook useEffect, semuanya akan berjalan setiap kali komponen dirender. Jadi, itu dapat menciptakan masalah kinerja dan perilaku yang tidak terduga.
• Pastikan untuk tidak menggunakan hook useEffect di dalam kondisi, loop, atau fungsi bersarang. Jika Anda menggunakan State inside for loop, maka React akan membuat variabel state baru setiap kali loop berjalan. Dengan demikian, itu mengarah pada perilaku yang tidak terduga.
• Pastikan untuk tidak menggunakan hook useEffect secara berlebihan. Mereka dapat membuat kode Anda sulit dibaca dan dapat memengaruhi kinerja jika digunakan secara berlebihan.
• Anda hanya boleh memanggil hook useEffect dari fungsi React. Jika Anda memanggilnya dari komponen kelas, Anda akan melihat kesalahan.

Kesimpulan

Yang terbaik adalah menggunakan useeffect dalam reaksi jika Anda ingin mengakses properti dan status komponen dengan mudah tanpa menulis kode tambahan apa pun.Ini secara signifikan menyederhanakan efek samping dalam komponen karena membuatnya lebih mudah untuk mengeksekusi efek samping saat status atau prop berubah. Anda dapat mempertimbangkan aspek dan praktik terbaik yang dibahas di atas untuk memastikan bahwa komponen React Anda bekerja secara optimal.

Mempelajari keterampilan pengembangan perangkat lunak yang menuntut sangat penting di era sekarang. Anda dapat membekali diri Anda dengan keterampilan mutakhir ini dengan mengejar gelar Master of Science di bidang Ilmu Komputer dari LJMU . Kursus ini menjadikan Anda pengembang perangkat lunak ahli dengan memberikan keterampilan seperti Java, Python, dan spesialisasi di bidang terkait. Mempelajari secara menyeluruh aspek-aspek yang tercakup dalam kursus ini membantu Anda menjelajahi peluang kerja seperti pengembang javascript, insinyur perangkat lunak, dan insinyur backend.

Seiring dengan penguasaan keterampilan pengembangan perangkat lunak, upGrad juga membantu Anda meningkatkan karir Anda sebagai pengembang tumpukan penuh melalui kursus seperti Program PG Eksekutif dalam Pengembangan Stack Penuh dari IIITB dan Bootcamp Pengembangan Perangkat Lunak Stack Penuh . Program-program ini menyediakan platform pembelajaran imersif yang memungkinkan kandidat memperoleh keterampilan pengembangan penuh yang menuntut dan secara efektif membuka jalan menuju karier yang sukses!