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:

1. Dalam komponen UserList, kita mendefinisikan sebuah state users menggunakan useState untuk menyimpan daftar pengguna yang diambil dari API.

2. Kita menggunakan useEffect untuk menjalankan operasi pengambilan data saat komponen UserList dirender untuk pertama kali ([] menandakan bahwa efek ini akan dijalankan hanya sekali setelah render pertama).

3. Dalam useEffect, kita membuat fungsi fetchUsers yang menggunakan fetch API untuk mengambil data pengguna dari URL tertentu. Setelah mendapatkan respons, data diset ke dalam state users menggunakan setUsers.

4. Di akhir komponen, kita menampilkan daftar pengguna dalam elemen ul dengan menggunakan map pada array users.

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.