Fungsi useEffect

useEffect biasanya digunakan untuk menjalankan fungsi pada komponen saat mounting atau saat komponen diupdate.

Dalam useEffect, kita dapat menambahkan dependency array untuk mengontrol kapan useEffect dijalankan.

componentDidMount

Akan dijalankan pada saat render pertama.

import React from 'react'

const App = (props) => {
  const [Update, setUpdate] = useState(false)

  useEffect(() => {
    console.log("komponen akan selalu di update")
  }, [])

  return (
    <button onClick={(e)=> setUpdate(!Update)}>Update</button>
  )
}

export default App

componentDidUpdate

Fungsi ini akan kita panggil jika kita ingin re-render komponen yang bergantung pada state.

import React from 'react'

const App = (props) => {
  const [Bayar, setBayar] = useState(false)

  useEffect(() => {
    console.log(Bayar && "Saya Sudah Bayar")

  }, [Bayar])

  return (
    <button onClick={(e)=> setBayar(!Bayar)}>Update</button>
  )
}

export default App

componentWillUnmount

Fungsi dimana kita ingin membersihkan sesuatu setelah terjadinya render.

import React from 'react'

const Simple = () => {
  useEffect(() => {
    console.log("Use Effect");
    return () => {
      console.log("UnMount");
    }
  }, [])

  return (
    <div>Simple</div>
  )
}

export default Simple

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

function Count() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`You clicked ${count} times`)
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click Me
      </button>
    </div>
  );
}

export default Count;

Dalam contoh di atas, kita menjalankan function yang menjalakan console.log setiap kali nilai count berubah. Dependensi array [count] digunakan untuk mengontrol kapan function dijalankan.