React UseEffect

---

useEffect adalah Hook lain yang disediakan oleh React yang memungkinkan Anda menjalankan efek samping dalam komponen fungsional. Efek samping ini bisa berupa berlangganan data, memanipulasi DOM secara langsung, atau melakukan tugas-tugas lain yang memerlukan "membersihkan" ketika komponen di-unmount atau ketika nilai-nilai tertentu berubah.

Step-by-Step React useEffect

1. Import useEffect from React:

import React, { useEffect } from 'react';

1. Menjalankan useEffect:

useEffect(() => {
    // Kode untuk useEffect misal fetchdata atau apapun di sini
}, [dependencies]);

• Fungsi di dalam useEffect akan dijalankan setiap kali komponen dirender.
• dependencies adalah array yang berisi nilai-nilai yang jika berubah, akan memicu rerender dan eksekusi ulang efek tersebut.

1. Clean useEffect React:

useEffect(() => {
    // Kode untuk _useEffect_ di sini

    return () => {
        // Kode untuk membersihkan _useEffect_
    };
}, [dependencies]);

• Fungsi yang dikembalikan oleh useEffect akan dijalankan saat komponen di-unmount atau sebelum eksekusi ulang efek baru.

Best Practice

• Gunakan useEffect untuk mengelola efek samping: Misalnya, berlangganan data, menyesuaikan judul halaman, atau memperbarui state global.

• Hati-hati dengan dependencies: Pastikan dependencies yang Anda masukkan adalah yang benar-benar diperlukan untuk memicu eksekusi efek yang diinginkan.

• Jangan lakukan pekerjaan berat di dalam useEffect: Gunakan useEffect untuk tugas-tugas ringan. Untuk tugas yang lebih kompleks, pertimbangkan untuk memisahkannya ke dalam fungsi terpisah.

• Gunakan clean-up function untuk membersihkan efek: Jika efek samping Anda memerlukan pembersihan, pastikan untuk melakukannya di dalam clean-up function yang dikembalikan oleh useEffect.

contoh useEffect untuk fetchData dari api :

useEffect(() => {
    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            setData(data);

        })
        .catch(error => {
            setError(error);

        });
}, []);

• setData adalah bagian dari useState .kita pindahkan datanya ke state, artinya setData digunakan untuk menerima Data dari api yang kita fetch