144. A First Look at Effects

Question 1

Apa itu useEffect dalam React?

Answer 1

useEffect adalah hook React yang digunakan untuk menangani side effects dalam komponen. Side effects adalah segala interaksi yang terjadi antara komponen dan dunia luar, seperti mengambil data dari API, mengatur timer, atau berinteraksi dengan elemen DOM di luar React.

Question 2

Kapan useEffect digunakan dalam sebuah komponen React?

Answer 2

useEffect digunakan untuk menjalankan side effects seperti:

Mengambil data dari API eksternal.
Mengatur timer atau interval.
Mengubah atau memanipulasi elemen DOM di luar kendali React.
Menyinkronkan state dengan sumber data eksternal.

Question 3

Apa yang dimaksud dengan side effect di React?

Answer 3

Side effect adalah segala interaksi antara komponen React dengan dunia luar, seperti:

Mengambil data dari API.
Menggunakan setTimeout atau setInterval.
Mengakses local storage.
Menambahkan atau membersihkan event listener.

Side effects tidak boleh ditempatkan di dalam logika render karena dapat mengganggu alur render murni React.

Question 4

Apa perbedaan antara useEffect dan event handlers di React?

Answer 4

Event Handlers:

Digunakan untuk merespons interaksi pengguna atau event spesifik (misalnya klik tombol).
Eksekusi dilakukan hanya ketika event yang dipantau terjadi.

useEffect:

Digunakan untuk menjalankan kode secara otomatis ketika komponen mount, update, atau unmount.
Cocok untuk sinkronisasi komponen dengan sistem eksternal, seperti mengambil data saat komponen pertama kali dirender.

Question 5

Pada momen apa useEffect dieksekusi dalam siklus hidup komponen?

Answer 5

useEffect dapat dieksekusi pada tiga momen utama:

Mounting: Ketika komponen pertama kali dirender ke layar.
Updating: Ketika state atau props berubah (bergantung pada dependency array).
Unmounting: Ketika komponen dihapus dari DOM.

Question 6

Apa fungsi dari dependency array dalam useEffect?

Answer 6

Dependency array adalah array opsional yang digunakan untuk menentukan kapan efek dijalankan kembali. Jika ada nilai dalam array yang berubah, efek akan dieksekusi ulang

Question 7

Apa itu cleanup function dalam useEffect dan kapan dijalankan?

Answer 7

Cleanup function adalah fungsi opsional yang dikembalikan dari useEffect dan digunakan untuk membersihkan side effects sebelum komponen di-re-render atau di-unmount. Cleanup ini berguna untuk:

Menghapus event listener yang didaftarkan.
Membersihkan interval atau timeout.
Menghindari kebocoran memori.

Question 8

Kapan kita tidak sebaiknya menggunakan useEffect?

Answer 8

Jangan menggunakan useEffect jika:

Tindakan dapat dilakukan melalui event handler (seperti mengambil data setelah tombol diklik).
Hanya untuk mengatur state secara langsung dari data yang tersedia di props (gunakan useMemo atau useCallback).

Overuse useEffect dapat menyebabkan logika yang sulit dipelihara dan efek yang tidak diinginkan.