UseEffect, useLayoutEffect, dan useEffectEvent: Perbandingan Hook Pengambilan Data di React

React hooks adalah cara ampuh untuk mengelola efek samping dalam komponen React. Tiga hook yang paling umum untuk menangani efek samping adalah useEffect, useLayoutEffect, dan useEffectEvent. Setiap pengait memiliki kasus penggunaannya yang unik, jadi memilih pengait yang tepat untuk pekerjaan itu sangatlah penting.

Kait useEffect

Itu gunakanEffect kait adalah a kait mendasar di React yang memungkinkan Anda melakukan efek samping seperti manipulasi DOM, operasi asinkron, dan pengambilan data dalam komponen fungsional. Hook ini adalah fungsi yang mengambil dua argumen, fungsi efek dan array ketergantungan.

Fungsi efek berisi kode yang melakukan efek samping, dan array ketergantungan menentukan kapan fungsi efek dijalankan. Jika array ketergantungan kosong, fungsi efek hanya berjalan satu kali pada render awal komponen. Jika tidak, fungsi efek akan berjalan setiap kali salah satu nilai dalam array ketergantungan berubah.

Berikut ini contoh cara menggunakan hook useEffect untuk mengambil data:

import React from"react";
functionApp() {
const [data, setData] = React.useState([]);
 React.useEffect(() => {
 fetch("")
 .then((response) => response.json())
 .then((data) => setData(data));
 }, []);
return (

"app">
 {data.map((item) => (
{item.title}</div>
 ))}
 </div>
 );
}
exportdefault App;

Kode ini menunjukkan sebuah Aplikasi komponen yang mengambil data dari API eksternal menggunakan kait useEffect. Fungsi efek useEffect mengambil data sampel dari JSONPlaceholder API. Ini kemudian mem-parsing respon JSON dan mengatur data yang diambil ke data negara.

Dengan status data, komponen Aplikasi merender judul milik setiap item di negara bagian.

Karakteristik dari useEffect Hook

• Ramah asinkron: Ini mendukung operasi asinkron secara asli, sehingga memudahkan pengambilan data.
• Berjalan setelah rendering: Hook useEffect mengeksekusi efeknya setelah aplikasi merender komponen, memastikan hook tidak memblokir UI.
• Membersihkan: Ini menyediakan cara terintegrasi untuk melakukan pembersihan dengan mengembalikan suatu fungsi. Hal ini khususnya berguna ketika bekerja dengan pendengar atau langganan.

Kait useLayoutEffect

Itu gunakanLayoutEffect kait mirip dengan gunakanEffect hook tetapi berjalan secara sinkron setelah semua mutasi DOM. Artinya, ini berjalan sebelum browser dapat mengecat layar, sehingga cocok untuk tugas-tugas yang membutuhkan ketelitian kontrol atas tata letak dan gaya DOM, seperti mengukur ukuran elemen, mengubah ukuran elemen, atau menganimasikannya posisi.

Di bawah ini adalah contoh cara menggunakan hook useLayoutEffect untuk mengubah lebar a tombol elemen:

import React from"react";
functionApp() {
const button = React.useRef();
 React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
 button.current.style.width = `${width + 12}px`;
 }, []);
return (

"app">
Click Me</button>
 </div>
 );
}
exportdefault App;

Blok kode di atas menambah lebar elemen tombol sebesar 12 piksel menggunakan kait useLayoutEffect. Ini memastikan lebar tombol bertambah sebelum tombol ditampilkan di layar Anda.

Karakteristik Kait useLayoutEffect

• Sinkronis: Ini dijalankan secara serempak, berpotensi memblokir UI jika operasi di dalamnya berat.
• DOM membaca/menulis: Ini paling cocok untuk membaca dan menulis langsung ke DOM, terutama jika Anda memerlukan perubahan sebelum browser melakukan pengecatan ulang.

Kait useEffectEvent

Itu gunakanEffectEvent hook adalah React hook yang menyelesaikan masalah dependensi gunakanEffect kait. Jika Anda familiar dengan useEffect, Anda pasti tahu bahwa array ketergantungannya bisa jadi rumit. Terkadang, Anda harus memasukkan lebih banyak nilai ke dalam array ketergantungan yang benar-benar diperlukan.

Misalnya:

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the url
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = (url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 };
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url, onConnected]);
return<div>div>;
}
exportdefault App;

Kode ini menunjukkan Aplikasi komponen yang mengelola koneksi ke layanan eksternal. Itu Menghubung fungsi terhubung ke URL tertentu, sedangkan koneksi log fungsi mencatat detail koneksi. Terakhir, diTerhubung fungsi memanggil koneksi log berfungsi untuk mencatat pesan koneksi berhasil ketika perangkat terhubung.

Hook useEffect memanggil fungsi connect, lalu menyiapkan fungsi callback onConnected untuk dijalankan ketika perangkat memicu acara onConnected. Panggilan balik ini mencatat pesan koneksi. Ini mengembalikan fungsi pembersihan yang aktif ketika komponen dilepas. Fungsi pembersihan ini bertanggung jawab untuk memutuskan sambungan perangkat.

Array ketergantungan memiliki url variabel dan diTerhubung fungsi. Komponen App akan membuat fungsi onConnected pada setiap render. Hal ini akan menyebabkan fungsi useEffect berjalan secara berulang, yang akan terus merender ulang komponen Aplikasi.

Ada beberapa cara untuk menyelesaikan masalah loop useEffect. Namun, cara paling efisien untuk melakukannya tanpa menambahkan lebih banyak nilai yang tidak perlu ke array ketergantungan Anda adalah dengan kait useEffectEvent.

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the URL
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = React.useEffectEvent((url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 });
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url]);
return<div>div>;
}
exportdefault App;

Dengan menggabungkan fungsi onConnected dengan hook useEffectEvent, hook useEffectEvent selalu dapat membaca nilai terbaru dari pesan Dan opsi masuk parameter sebelum meneruskannya ke kait useEffect. Artinya useEffect tidak perlu bergantung pada fungsi onConnected atau nilai yang diteruskan ke fungsi tersebut.

Kait useEffectEvent berguna ketika Anda ingin useEffect Anda bergantung pada nilai tertentu, meskipun efek memicu peristiwa yang memerlukan nilai lain yang tidak ingin Anda gunakan sebagai dependensi di dalamnya gunakanEffect.

Karakteristik Kait useEffectEvent

• Ini paling cocok untuk efek samping yang dipicu oleh peristiwa.
• Itu gunakanEffectEvent hook tidak berfungsi dengan event handler seperti itu diKlik, dalam perubahan, dll.

Kait useEffectEvent masih bersifat eksperimental dan belum tersedia Bereaksi kait versi 18.

Kapan Menggunakan Kait Yang Mana?

Masing-masing kait pengambilan data di atas cocok untuk situasi yang berbeda:

• Mengambil data: useEffect adalah pilihan yang sangat baik.
• Manipulasi DOM langsung: Jika Anda perlu membuat perubahan sinkron pada DOM sebelum pengecatan ulang, pilih useLayoutEffect.
• Operasi ringan: Untuk operasi yang tidak berisiko memblokir UI, Anda dapat dengan bebas menggunakan useEffect.
• Efek samping yang dipicu oleh peristiwa: Gunakan kait useEffectEvent untuk membungkus acara dan kait useEffect untuk menjalankan efek samping.

Tangani Efek Samping Secara Efisien

React hooks membuka banyak kemungkinan, dan memahami perbedaan antara useEffect, useLayoutEffect, dan useEffectEvent hooks dapat berdampak signifikan terhadap cara Anda menangani efek samping dan DOM manipulasi. Penting untuk mempertimbangkan persyaratan dan implikasi spesifik hook ini untuk membuat aplikasi ramah pengguna.