useEffect: apa itu, hook efek samping dan siklus hidup di React

Apa itu useEffect di React

useEffect — adalah hook yang ditambahkan di React 16.8 untuk menjalankan efek samping di komponen fungsional. Yang dimaksud dengan efek samping adalah operasi yang tidak terkait langsung dengan rendering UI: permintaan HTTP ke API, langganan event, bekerja dengan timer, manipulasi DOM, pencatatan log dan integrasi dengan pustaka pihak ketiga.

Sebelum munculnya hooks, semua operasi ini harus ditempatkan di metode siklus hidup komponen kelas: componentDidMount untuk inisialisasi, componentDidUpdate untuk bereaksi terhadap perubahan props, componentWillUnmount untuk pembersihan. useEffect menggabungkan ketiga skenario dalam satu API terpadu, di mana array dependensi menentukan kapan efek harus dijalankan. Ini menyederhanakan logika dan mengurangi duplikasi kode, terutama dalam skenario dengan langganan.

Menurut React DevTools Usage Survey (2024), useEffect adalah hook terpopuler kedua setelah useState, digunakan di 89% aplikasi React. Sebagian besar pengembang menggunakannya untuk memuat data, sinkronisasi dengan sistem eksternal, dan mengelola langganan event DOM.

import { useEffect } from 'react';

function UserProfile({ userId }) {
    useEffect(() => {
        fetch(`/api/users/${userId}`)
            .then(res => res.json())
            .then(data => setUser(data));
    }, [userId]);
}

Bagaimana cara kerja useEffect: siklus hidup efek

useEffect menjalankan fungsi efek yang diberikan setelah React selesai merender dan memperbarui DOM. Ini adalah perbedaan utama dari perhitungan selama rendering: efek tidak memblokir penggambaran, yang sangat penting untuk kinerja UX. Jika efek dijalankan secara sinkron, pengguna akan melihat antarmuka «membeku» saat memuat data.

Siklus hidup efek tipikal terdiri dari tiga fase. Saat mounting komponen, React menjalankan efek. Pada setiap pembaruan, jika setidaknya satu dependensi dalam array berubah, React pertama-tama menjalankan fungsi pembersihan efek sebelumnya, lalu efek baru. Saat unmount komponen, hanya fungsi pembersihan yang dijalankan.

Menurut React Team — useEffect RFC (2024), implementasi internal useEffect menggunakan antrean efek samping di pohon fiber. Setelah konfirmasi perubahan (commit phase), React menelusuri antrean ini dan memanggil fungsi efek sesuai urutan deklarasinya di komponen. Setiap simpul fiber menyimpan referensi ke efek sebelumnya untuk pembersihan dan eksekusi ulang yang benar.

Array dependensi useEffect

Array dependensi — argumen kedua useEffect — menentukan kapan efek harus dijalankan ulang. React membandingkan setiap nilai dalam array dengan render sebelumnya menggunakan Object.is. Jika setidaknya satu nilai berubah, efek dijalankan ulang. Jika array kosong ([]), efek hanya dijalankan sekali setelah mounting.

Pemilihan dependensi yang tepat — bagian tersulit dari bekerja dengan useEffect. Array harus mencakup semua variabel dan fungsi yang digunakan di dalam efek dan dapat berubah antar render. Melewatkan dependensi menyebabkan stale closures — efek «melihat» nilai usang dari render sebelumnya. Menambahkan dependensi yang tidak perlu menyebabkan eksekusi ulang berlebihan dan potensi bug.

// Dependensi mengontrol kapan efek dijalankan ulang
useEffect(() => {
    document.title = `User: ${user.name}`;
}, [user.name]); // jalankan ulang hanya saat user.name berubah

// eslint-disable-next-line react-hooks/exhaustive-deps
// Jika Anda melewatkan dependensi, Anda mendapatkan data usang

React menyediakan plugin eslint-plugin-react-hooks dengan aturan exhaustive-deps, yang secara otomatis memeriksa kelengkapan array dependensi. Menurut Meta Engineering Blog (2024), mengaktifkan plugin ini mengurangi jumlah bug terkait hooks sebesar 72%. Disarankan untuk memperbaiki semua peringatan exhaustive-deps, bukan menekannya dengan komentar, kecuali dalam kasus langka dengan logika kustom.

useEffect tanpa dependensi dan dengan array kosong

Jika Anda tidak memberikan array dependensi sama sekali, useEffect akan dijalankan setelah setiap render. Ini mungkin berguna untuk sinkronisasi dengan DOM atau pencatatan log, tetapi seringkali merupakan kesalahan: efek terlalu sering dijalankan, yang mengakibatkan penurunan kinerja. Dalam kebanyakan kasus, Anda harus memberikan array kosong (sekali saat mounting) atau array dengan props/state tertentu.

Array kosong ([]) berarti efek tidak bergantung pada nilai apa pun dan dijalankan secara ketat satu kali. Ini analog dengan componentDidMount di komponen kelas. Namun perlu diingat: jika di dalam efek digunakan props atau state tetapi tidak disebutkan dalam array dependensi, efek akan menggunakan nilai awalnya dan tidak akan pernah melihat pembaruan. Ini disebut stale capture dan sering menjadi sumber bug yang sulit dilacak.

Pembersihan efek di useEffect

Fungsi pembersihan (cleanup) — adalah fungsi yang dapat dikembalikan oleh useEffect dari callback-nya. React memanggilnya saat unmount komponen dan sebelum menjalankan ulang efek saat dependensi berubah. Cleanup diperlukan untuk membatalkan langganan, timer, permintaan, dan sumber daya apa pun yang harus dibebaskan.

Contoh tipikal — langganan WebSocket. Saat mounting, koneksi dibuat; saat pembaruan dependensi — dibuat ulang (cleanup menutup yang lama, efek membuka yang baru); saat unmount — ditutup. Tanpa cleanup, setiap remounting komponen akan membuat koneksi WebSocket baru, yang menyebabkan kebocoran memori dan banyak koneksi.

useEffect(() => {
    const socket = new WebSocket('wss://api.example.com');
    socket.onmessage = event => setData(event.data);

    // Fungsi pembersihan — berjalan saat unmount dan sebelum eksekusi ulang
    return () => {
        socket.close();
    };
}, []);

Menurut React Documentation (2025), AbortController — pendekatan modern untuk membatalkan permintaan fetch di cleanup. Jika efek melakukan permintaan HTTP dan komponen di-unmount sebelum selesai, permintaan terus berjalan, dan setState setelah unmount menyebabkan kesalahan. Buat AbortController di dalam efek dan panggil controller.abort() di cleanup untuk membatalkan permintaan.

Kesalahan umum dengan useEffect

Kesalahan paling umum — melewatkan dependensi. Misalnya, efek menggunakan prop userId, tetapi array dependensi kosong. Akibatnya, efek dijalankan sekali dengan nilai awal userId dan tidak pernah bereaksi terhadap perubahannya. Pengembang melihat komponen menerima userId baru, tetapi data tidak diperbarui. eslint-plugin-react-hooks dengan aturan exhaustive-deps mendeteksi bug semacam itu secara otomatis.

• Perulangan tak terbatas — pembaruan state di dalam efek menyebabkan render ulang, yang memicu efek lagi. Solusi: periksa array dependensi atau gunakan bentuk fungsional setter.
• Race condition — jika userId berubah dengan cepat, permintaan untuk userId pertama dapat selesai setelah permintaan untuk userId kedua, dan data akan menampilkan hasil yang salah. Solusi: gunakan flag cancelled atau AbortController.
• Efek berlebihan — menggabungkan logika yang tidak terkait dalam satu useEffect. React merekomendasikan memisahkan logika ke beberapa efek, bahkan jika mereka memiliki array dependensi yang sama.
• Pembersihan terlupakan — tidak berhenti berlangganan event, membersihkan timer, atau membatalkan permintaan menyebabkan kebocoran memori dan kesalahan setState setelah unmount.

// ❌ Race condition — tanpa pembatalan
useEffect(() => {
    fetch(`/api/user/${userId}`).then(res => setUser(res));
}, [userId]);

// ✅ Diperbaiki dengan AbortController
useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/user/${userId}`, { signal: controller.signal })
        .then(res => setUser(res));
    return () => controller.abort();
}, [userId]);

Untuk mengatasi masalah perulangan tak terbatas, hindari menempatkan logika yang memperbarui state berdasarkan state sebelumnya di dalam useEffect. Gunakan bentuk fungsional setState atau lakukan perhitungan di luar efek. Jika efek berlangganan storage atau event browser, pastikan instance pendengar dibuat sekali, bukan setiap render.