React.js

Memahami Fungsi Clean Up UseEffect Dengan Kasus Nyata

Reza Daulay

13 Feb 2024 • 3 min read

Fungsi cleanup di React useEffect sangat berguna untuk mencegah dari hal yang tidak kita inginkan, semisal pemanggilan API yang sudah tidak diperlukan ataupun memory leak. Memanfaatkan fungsi cleanup kita dapat mengoptimasi aplikasi kita. Mari kita bahas lebih dalam.

Sebelumnya kalian wajib memahami apa itu useEffect, kalian bisa membaca postingan kami soal UseEffect disini.

Apa Itu UseEffect Di React

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.

Contoh Penggunaan UseEffect.

function App(props) {
  const [name, setName] = useState ('');
  useEffect(() => {
    doAction();
  }, []);
}

doAction() akan selalu dipanggil ketika component pertama kali di render

function App(props) {
  const [name, setName] = useState ('');
  useEffect(() => {
    doAction();
  }, [name]);
}

doAction() hanya akan dipanggil ketika state name di update

function App(props) {
  const [email, setEmail] = useState ('');
  const [name, setName] = useState ('');
  useEffect(() => {
    doAction();
  }, [email, name]);
}

doAction() akan dipanggil ketika state email atau name di update

Jadi Apa itu Fungsi Clean Up?

Seperti namanya, fungsi ini berfungsi untuk membersihkan segala proses di useEffect yang tidak kita perlukan lagi ketika component akan dilepas (unmount).

function App(props) {
  const [name, setName] = useState ('');
  useEffect(() => {
    doAction();
    return () => {
        clearAction();
    };
  }, []);
}

Ketika kita tidak lagi menggunakan component App, secara otomatis akan memanggil clearAction

Contoh Kasus Nyata

Kita membuat sebuah apps dengan 2 halaman, satu halaman post dan satu lagi halaman comment.

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

function PostPage() {
    const [posts, setPosts] = useState([]);
    const currentUserId = 3;

    useEffect(() => {
      axios.get('https://jsonplaceholder.typicode.com/post?limit=100').then(resp => {
        console.log('hanya ambil post yang memiliki user id = 3')
        const data = resp.data.filter(post => post.userId === currentUserId);
        setPosts(data)
      })
    },[]);

    return (
      <div className={`table-wrapper`}>
        <table className={`fl-table`}>
            <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
            </tr>
            </thead>
            <tbody>
            {posts.map(post => (
                <tr key={post.id}>
                <td>{ post.id }</td>
                <td>{ post.title }</td>
                </tr>
            ))}
            </tbody>
        </table>
      </div>
    )
  }
  
  export default PostPage

PostPage.jsx

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

function Commentpage() {
    const [comments, setComments] = useState([]);

    useEffect(() => {
      axios.get('https://jsonplaceholder.typicode.com/comments?limit=100').then(resp => {
        setComments(resp.data)
      })
    },[]);

    return (
      <div className={`table-wrapper`}>
        <table className={`fl-table`}>
            <thead>
            <tr>
                <th>Name</th>
                <th>Body</th>
            </tr>
            </thead>
            <tbody>
            {comments.map(comment => (
                <tr key={comment.id}>
                <td>{ comment.name }</td>
                <td>{ comment.body }</td>
                </tr>
            ))}
            </tbody>
        </table>
      </div>
    )
  }
  
  export default Commentpage

Commentpage.jsx

Mari kita fokus ke PostPage.jsx perhatikan bagian berikut,

  useEffect(() => {
      axios.get('https://jsonplaceholder.typicode.com/post?limit=100').then(resp => {
        console.log('hanya ambil post yang memiliki user id = 3')
        const data = resp.data.filter(post => post.userId === currentUserId);
        setPosts(data)
      })
  },[]);

Coding diatas akan melakukan task memanggil api post lalu melakukan proses filter dimana hanya data post dengan userId sama dengan nilai currentUserId yang akan disimpan di state posts. Semua proses ini akan tetap berjalan walaupun kita telah mentutup halaman post dan beralih kehalaman comment. Biar lebih mudah mehamaniya lihat video berikut.

Cara Menggunakan Fungsi Clean Up

Pada video penjelasan diatas kita bisa melihat proses filter pada halaman post tetap berjalan, walaupun kita telah berpindah halaman. Kita bisa mencegah ini menggunakan Fungsi Clean pada Use Effect react.

Sesuaikan bagian useEffect dengan contoh dibawah ini,

...
  useEffect(() => {
      const controller = new AbortController();
      axios.get('https://jsonplaceholder.typicode.com/posts?limit=100',  {
        signal: controller.signal
     }).then(resp => {
        console.log('hanya ambil post yang memiliki user id = 3')
        const data = resp.data.filter(post => post.userId === currentUserId);
        setPosts(data)
      }).catch(e => console.log(e))
      return () => {
        console.log('unmounted')
        // batalkan request saat component akan unmount
        controller.abort();
      };

  },[]);
...

PostPage.jsx

Disini kita menambahkan AbortController dengan abort controller ini kita dapat membatalkan satu atau lebih http request. Perhatikan bagian ini,

  return () => {
    console.log('unmounted')
    // batalkan request saat component akan unmount
    controller.abort();
  };

Bagian code inilah yang dimaksud fungsi clean up pada useEffect react, dan kita telah menambahkan prosedur pembatalan http request ke API ketika component akan dilepas (unmount).

Mari kita coba kembali,

Kesimpulan

Dengan menambahkan clean up pada useEffect react kita dapat mencegah memory leak dan mencegah aplikasi kita melakukan proses yang sudah tidak diperlukan lagi. Ini adalah salah satu tips optimasi yang wajib ditambahkan di aplikasi yang sedang kalian develop. Jika masih belum paham, kalian dapat bertanya dan berdiskusi di channel Diskord Asinkron Indonesia, klik linknya dibawah ya.