B. useEffect

useEffect adalah salah satu hook penting dalam React yang memungkinkan kita untuk menangani side effects dalam function component. Side effects adalah tindakan yang terjadi di luar lingkup pembaruan tampilan normal, seperti berlangganan data, memanggil API, memperbarui DOM, dan sejenisnya.

1. Penggunaaan useEffect

format penulisan

useEffect(fn, deps)

Note

• fn merupakan function yang akan kita berikan ke dalam useEffect agar dipanggil setelah komponen selesai melakukan render.
• deps adalah Array berisi identifier baik variabel atau fungsi yang akan menyebabkan fn dipanggil lagi saat nilai identifier tersebut mengalami perubahan.
• Pada Nextjs 13, gunakan client component jika menggunakan useEffect dengan menambahkan kode 'use client'

Warning

Peringatan! fungsi fn tidak boleh async. Jika perlu fungsi async bikin fungsi lain di luar effect kemudian panggil di dalam effect.

Berikut ini contoh sederhana dari useEffect

Contoh useEffect

'use client'
import { useEffect } from "react";

const Home = () => {
  useEffect(() => {
    console.log("effect berjalan");
  }, []);
  return <div>Belajar useEffect</div>;
};

export default Home;

Pada kode di atas, jika komponen di render maka komponen akan menjalankan kode yang ada di dalam useEffect dalam hal ini adalah console.log("effect berjalan").

2. useEffect tanpa array dependency

Jika kita membuat useEffect tanpa memberikan array depedency maka useEffect akan dipanggil terus menerus setiap kali komponen di render, baik render pertama maupun re-render berikutnya. Seperti contoh berikut.

Contoh useEffect tanpa array depedency

"use client";
import { useEffect, useState } from "react";

const Home = () => {
  let [count, setCount] = useState(0);
  useEffect(() => {
    setCount((c) => c + 1);
    console.log('useEffect berjalan')
  });
  return <div>{count}</div>;
};

export default Home;

Pada kode di atas, kita membuat useEffect tanpa memberikan array depedency, maka yang terjadi adalah useEffect akan berjalan terus menerus. Hal ini tidak disarankan karena akan membuat aplikasi menjadi crash.

Jalankan pada browser

3. useEffect dengan array dependency kosong

Jika kita memberikan array kosong pada depedency maka useEffect hanya akan dijalankan sekali saja pada render pertama.

Contoh useEffect dengan array kosong

"use client";
import { useEffect, useState } from "react";

const Home = () => {
  let [count, setCount] = useState(0);
  useEffect(() => {
    setCount((c) => c + 1)
    console.log('useEffect berjalan')
  },[]);
  return <div>{count}</div>;
};

export default Home;

Pada kode diatas, useEffect akan dijalankan sekali ketika render pertama yang akan mengupdate nilai dari count.

Jalankan pada browser

4. useEffect dengan array dependency

contoh useEffet dengan array depedency

"use client";
import { useEffect, useState } from "react";
import InputText from "./component/InputText";

const Home = () => {
  let [count, setCount] = useState(0);
  let [text, setText] = useState("");
  useEffect(() => {
    setCount((c) => c + 1);
    console.log("useEffect berjalan");
  }, [text]);
  return (
    <>
      <div>{count}</div>
      <InputText
        value={text}
        id="text"
        name="text"
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
    </>
  );
};

export default Home;

Jalankan pada browser

contoh useEffet dengan array depedency

"use client";
import { useEffect, useState } from "react";
import InputText from "./component/InputText";
import Button from "./component/Button";

const Home = () => {
  let [count, setCount] = useState(0);
  let [text, setText] = useState("");
  let [change, setChange] = useState(false);
  useEffect(() => {
    setCount((c) => c + 1);
    console.log("useEffect berjalan");
  }, [text, change]);
  return (
    <>
      <div>{count}</div>
      <InputText
        value={text}
        id="text"
        name="text"
        onChange={(e) => {
          setText(e.target.value);
        }}
      />

      <Button
        title="ubah count"
        colorSchema="red"
        variant="solid"
        onClick={() => {
          setChange(!change);
        }}
      />
    </>
  );
};

export default Home;

Jalankan pada browser

5. Clean Up Function