Hook Efek useEffect di React

Untuk bekerja dengan efek digunakan hook useEffect. Mari kita lihat cara kerjanya.

Pertama, impor hook kita:

App.jsximport { useEffect } from 'react';

Mari buat komponen App yang berisi judul:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

Anggaplah kita perlu melakukan suatu tindakan setelah rendering, misalnya, mengatur warna latar belakang seluruh halaman. Dalam kasus ini, sistem eksternalnya adalah DOM browser.

Mari terapkan hook kita:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = 'hijau';
  }, []);
  
  ...
}

Pada parameter kedua, array dependensi diteruskan. Ini termasuk nilai-nilai yang digunakan oleh fungsi-fungsi komponen. Untuk sementara kita biarkan kosong. Dalam hal ini, warna akan diatur menjadi hijau hanya sekali setelah rendering. Tidak boleh menghilangkan parameter kedua sama sekali, karena komponen Anda mungkin masuk ke dalam loop tak terbatas.