Memahami Fungsi Clean Up UseEffect Dengan Kasus Nyata
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
.
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).
Contoh Kasus Nyata
Kita membuat sebuah apps dengan 2 halaman, satu halaman post dan satu lagi halaman comment.
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,
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.
Silahkan Login/Sign Up
😞 Discord eklusif buat member asinkron.com
Jangan khawatir silahkan Daftar GRATIS 😎
*Link discord akan dikirim ke email yang anda gunakan untuk mendaftar.