React useEffect: Cara Penggunaan dan Contoh Nyata

Aadmin11 Mei 2026

Pengenalan

Dalam pengembangan aplikasi React, kita seringkali perlu melakukan efek samping saat komponen di-render. React useEffect adalah hook yang dirancang untuk membantu kita mengelola efek samping ini dengan cara yang efisien. Dalam artikel ini, kita akan membahas cara penggunaan useEffect serta memberikan contoh nyata untuk mempermudah pemahaman.

Apa Itu React useEffect?

Hook useEffect digunakan untuk menjalankan efek samping dalam komponen fungsional React. Efek samping bisa mencakup data fetching, subscribing ke event, atau manipulasi DOM. useEffect mirip dengan lifecycle methods yang ada di komponen kelas seperti componentDidMount, componentDidUpdate, dan componentWillUnmount.

Cara Penggunaan useEffect

Berikut ini adalah cara umum untuk menggunakan useEffect :

import React, { useEffect } from 'react';

const ExampleComponent = () => {
    useEffect(() => {
        // Kode efek samping di sini

        return () => {
            // Cleanup jika diperlukan
        };
    }, [/* Dependency array */]);

    return Hello, World!;
};

Contoh Nyata

Untuk memberikan gambaran yang lebih jelas, mari kita lihat contoh penggunaan useEffect untuk melakukan pengambilan data dari API:

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

const DataFetchingComponent = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch('https://api.example.com/data');
            const result = await response.json();
            setData(result);
            setLoading(false);
        };

        fetchData();
    }, []); // Kosong berarti hanya pada mount

    if (loading) return Loading...;

    return (
        
            {data.map(item => (
                {item.name}
            ))}
        
    );
};

Poin Penting dalam penggunaan useEffect

Dependency Array: Array yang berisi variabel yang memicu useEffect untuk dijalankan kembali. Jika dibiarkan kosong, efek hanya akan dijalankan sekali setelah komponen dipasang.
Cleanup Function: Jika efek menghasilkan resource yang perlu dibersihkan, kembalikan fungsi dari dalam useEffect untuk melakukan pembersihan.
Hindari Infinite Loops: Pastikan untuk tidak mengubah state yang ada dalam dependency array, hal ini bisa menyebabkan infinite loop.

Kesimpulan

React useEffect adalah alat yang sangat berguna untuk menangani efek samping dalam komponen fungsional. Dengan memahami cara kerjanya, kita bisa meningkatkan performa aplikasi dan pengalaman pengguna. Untuk pengembangan lebih lanjut dan pengetahuan mendalam mengenai React, Anda bisa membaca artikel komprehensif kami di Panduan Lengkap React untuk Pemula 2025.