Memahami Penggunaan useEffect dalam React: Pengantar, Fungsionalitas, dan Studi Kasus
React adalah library JavaScript yang populer untuk membangun antarmuka pengguna (UI) yang responsif dan interaktif. Salah satu fitur kunci dalam React adalah useEffect
, yang memungkinkan pengembang untuk mengelola efek samping dalam komponen fungsional.
Pengantar tentang useEffect
useEffect
adalah Hook dalam React yang digunakan untuk melakukan operasi sampingan dalam komponen fungsional. Efek samping dapat termasuk pengambilan data dari API, berlangganan event, manipulasi DOM, dan operasi lain yang tidak langsung terkait dengan penggambaran UI.
Fungsionalitas useEffect
1. Menjalankan Efek Samping
useEffect
memungkinkan Anda menjalankan kode setelah setiap perenderan komponen. Misalnya, memuat data dari server setelah komponen dirender.
2. Membersihkan Efek Samping
Anda juga dapat menggunakan useEffect
untuk membersihkan efek samping, seperti melepas langganan atau membersihkan resource ketika komponen dibongkar.
3. Mengelola Side Effects dengan Dependensi
Anda dapat menyediakan array dependencies sebagai argumen kedua dalam useEffect
. Ini memungkinkan efek tersebut hanya dijalankan jika nilai-nilai dalam array dependencies berubah.
Penggunaan useEffect
Mari kita lihat studi kasus penggunaan useEffect
dalam aplikasi React sederhana untuk mengambil dan menampilkan daftar pengguna dari API.
Komponen UserList.js
import React, { useState, useEffect } from 'react';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await response.json();
setUsers(data);
} catch (error) {
console.error('Error fetching users:', error);
}
};
fetchUsers();
}, []); // Empty dependency array means this effect runs once after the initial render
return (
<div className="user-list">
<h2>List of Users</h2>
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
};
export default UserList;
Penjelasan Penggunaan useEffect dalam Studi Kasus Ini:
-
Dalam komponen
UserList
, kita mendefinisikan sebuah stateusers
menggunakanuseState
untuk menyimpan daftar pengguna yang diambil dari API. -
Kita menggunakan
useEffect
untuk menjalankan operasi pengambilan data saat komponenUserList
dirender untuk pertama kali ([]
menandakan bahwa efek ini akan dijalankan hanya sekali setelah render pertama). -
Dalam
useEffect
, kita membuat fungsifetchUsers
yang menggunakanfetch
API untuk mengambil data pengguna dari URL tertentu. Setelah mendapatkan respons, data diset ke dalam stateusers
menggunakansetUsers
. -
Di akhir komponen, kita menampilkan daftar pengguna dalam elemen
ul
dengan menggunakanmap
pada arrayusers
.
Dengan menggunakan useEffect
, kita menjalankan operasi pengambilan data dari API setelah komponen UserList
dirender untuk pertama kali. Ini adalah contoh bagaimana useEffect
dapat digunakan untuk mengelola efek samping dalam aplikasi React, memastikan pengambilan data hanya terjadi saat diperlukan dan memberikan pengalaman pengguna yang mulus.