useEffect: Side Effect — CompileDaily Study

Penjelasan

useEffect dipakai untuk menjalankan "side effect" — kode yang berinteraksi dengan dunia di LUAR proses render React murni, mis. fetch data ke API, mengatur timer, atau manipulasi DOM langsung. Argumen kedua (dependency array) menentukan KAPAN effect-nya dijalankan ulang: [] berarti cuma sekali saat komponen pertama muncul, [dep] berarti dijalankan ulang tiap dep berubah.

Contoh Konsep

import { useState, useEffect } from 'react';

function JudulDinamis({ jumlahPesan }) {
    useEffect(() => {
        document.title = `Kamu punya ${jumlahPesan} pesan baru`;
    }, [jumlahPesan]); // dijalankan ulang tiap jumlahPesan berubah

    useEffect(() => {
        console.log('Komponen pertama kali muncul');
    }, []); // cuma sekali

    return <p>Cek judul tab browser</p>;
}

Praktikum

Buat komponen dengan useEffect yang mencetak "Komponen dimuat" ke console HANYA SEKALI saat komponen pertama muncul (dependency array kosong).

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Lupa mengisi dependency array (menulis useEffect(() => {...}) TANPA argumen kedua sama sekali) membuat effect-nya dijalankan ULANG SETIAP KALI komponen dirender — beda jauh dari [] yang cuma sekali. Ini kesalahan sangat umum yang bisa memicu infinite loop kalau effect-nya juga mengubah state.