Sign in Subscribe

Biar React kita gak boros memori, yuk belajar cleanup useEffect yang pas.

Biar React kita gak boros memori, yuk belajar cleanup useEffect yang pas.
Photo by Saung Digital/Unsplash

Pernahkah aplikasi React kita terasa lambat, lag, atau bahkan crash tanpa tahu kenapa? Rasanya kok memori makin membengkak padahal kodenya udah rapi jali. Nah, mungkin ini saatnya kita ngintip lebih dalam ke dunia useEffect dan salah satu fitur superpowernya cleanup. Kita bahas bareng yuk biar React kita gak boros memori dan aplikasi kita bisa ngebut terus!

Apa Itu useEffect dan Kenapa Penting Banget

Oke kita mulai dari basicnya dulu ya. Buat teman teman developer React pasti udah akrab banget sama yang namanya useEffect. Ini itu kayak jembatan penghubung antara dunia React yang deklaratif dan dunia luar yang imperatif. Kita pakai useEffect buat ngelakuin side effects alias efek samping di dalam komponen kita. Misalnya nih kita mau ambil data dari API, ngatur event listener, atau mungkin subscription ke WebSocket.

useEffect ini punya dua "waktu" utama untuk jalan. Pertama dia bakal jalan setelah komponen di render atau di update. Kedua dia bakal jalan lagi kalau ada perubahan di dependency array nya yang kita kasih. Kelihatan asik banget kan? Tapi ada tapinya nih kalau kita gak hati hati justru useEffect ini bisa jadi biang kerok yang bikin aplikasi kita boros memori.

Masalah Memory Leak Itu Gak Asik Banget

Coba bayangin kita punya aplikasi yang awalnya mulus dan cepat. Tapi setelah beberapa saat dipakai buka tutup halaman tertentu kok rasanya makin berat ya? Browser jadi makan RAM banyak banget. Itulah yang namanya memory leak. Intinya memori yang seharusnya udah gak dipakai lagi dan bisa dibersihin sama JavaScript garbage collector malah masih dipegang erat erat sama aplikasi kita.

Dalam konteks useEffect memory leak sering terjadi kalau kita nambahin event listener, ngatur timer, atau bikin subscription tapi lupa buat "cabut" atau "matiin" mereka pas komponennya udah gak dipakai lagi atau udah di unmount. Jadi meskipun komponennya udah gak ada di layar, si listener, timer, atau subscription itu masih jalan di belakang layar. Boros memori kan jadinya? Pastinya bikin pengalaman pengguna jadi kurang asik.

Kita gak mau kan aplikasi kita bikin user frustasi karena lambat atau sering crash? Makanya penting banget buat kita belajar cara "bersih bersih" useEffect yang pas.

Si Penyelamat Cleanup Function di useEffect

Untungnya React udah nyediain solusi yang elegan banget buat masalah ini. Namanya cleanup function. Ini adalah fungsi yang kita return dari dalam useEffect. Kapan fungsi ini bakal jalan? Ada dua kondisi utamanya. Pertama dia bakal jalan pas komponen kita mau di unmount dari DOM. Kedua dia bakal jalan sebelum useEffect dijalankan lagi kalau ada perubahan di dependency array.

Konsepnya sederhana banget kok. Kalau kita ngelakuin sesuatu di dalam useEffect yang butuh "dicabut" atau "dimatiin" setelahnya, kita tinggal return sebuah fungsi yang isinya adalah kode buat "nyabut" atau "matiin" itu. Ini memastikan bahwa setiap efek samping yang kita buat punya pasangannya buat membersihkan diri. Jadi memori aplikasi kita tetap terjaga dan efisien.

Mari kita bahas beberapa skenario praktisnya biar makin jelas dan langsung bisa kita terapkan di kode kita. Ini dia beberapa contoh umum yang sering kita temuin.

Skenario Pertama Event Listeners

Kita sering banget kan nambahin event listener misalnya buat ngedeteksi ukuran jendela berubah atau scroll?

javascript
import React, { useEffect, useState } from 'react';function WindowSizeLogger() {
  const [width, setWidth] = useState(window.innerWidth);useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);window.addEventListener('resize', handleResize);// Ini cleanup function kita
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Dependency array kosong, jadi cuma jalan sekali saat mount
  // dan cleanup saat unmountreturn (
    
      Ukuran jendela saat ini {width}px
    
  );
}

Coba kita perhatiin. Tanpa cleanup function, setiap kali komponen WindowSizeLogger di mount, kita bakal nambahin event listener baru. Kalau komponennya di unmount tapi listenernya gak dihapus, listener itu bakal tetap aktif meskipun gak ada lagi komponen yang butuh. Lama lama browser kita bakal punya banyak sekali listener yang gak berguna dan ini bisa bikin boros memori banget. Dengan return () => { window.removeEventListener('resize', handleResize); }; kita memastikan listenernya dihapus saat komponennya pergi. Asik kan?

Skenario Kedua Timers

setTimeout dan setInterval juga sering jadi penyebab memory leak lho. Kalau kita gak bersihin mereka, mereka bisa terus berjalan di belakang layar meskipun komponennya udah gak ada.

javascript
import React, { useEffect, useState } from 'react';function CountdownTimer() {
  const [count, setCount] = useState(10);useEffect(() => {
    if (count <= 0) return; // Hentikan timer kalau sudah nolconst timerId = setInterval(() => {
      setCount(prevCount => prevCount - 1);
    }, 1000);// Ini cleanup function kita
    return () => {
      clearInterval(timerId); // Penting! Hapus timer saat komponen unmount
    };
  }, [count]); // Dependency array, jalan lagi kalau count berubahreturn (
    
      Hitungan mundur {count} detik
      {count === 0 && Waktu habis!}
    
  );
}

Di contoh CountdownTimer, kalau kita navigasi keluar dari komponen ini tanpa clearInterval(timerId), si setInterval bakal terus jalan tiap detik. Meskipun komponennya udah gak ada di DOM, state count bakal terus di update di sebuah "zombie component" yang udah gak ada. Ini bisa menyebabkan kesalahan di konsol dan tentu saja memory leak. Makanya clearInterval di cleanup itu krusial banget.

Skenario Ketiga Data Fetching dan AbortController

Ini nih salah satu yang paling sering kita temuin saat berurusan sama API. Kadang kita ambil data tapi keburu komponennya di unmount sebelum datanya selesai di fetch. Nah ini bisa bikin warning di konsol tentang "Can't perform a React state update on an unmounted component". Gak asik kan?

javascript
import React, { useEffect, useState } from 'react';function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);useEffect(() => {
    const controller = new AbortController(); // Buat AbortController baru
    const signal = controller.signal; // Ambil signalnyaasync function fetchUser() {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(https://api.example.com/users/${userId}, { signal });
        if (!response.ok) {
          throw new Error('Gagal mengambil data user');
        }
        const data = await response.json();
        setUser(data);
      } catch (err) {
        if (err.name === 'AbortError') {
          console.log('Fetch dibatalkan'); // Permintaan dibatalkan, bukan error
        } else {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    }fetchUser();// Ini cleanup function kita
    return () => {
      controller.abort(); // Batalkan fetch saat komponen di unmount atau dependency berubah
    };
  }, [userId]); // Dependency array, jalan lagi kalau userId berubahif (loading) return Memuat user...;
  if (error) return Error: {error};
  if (!user) return Tidak ada user ditemukan.;return (
    
      {user.name}
      Email: {user.email}
    
  );
}

Dengan AbortController, kita bisa membatalkan permintaan fetch yang sedang berjalan. Saat komponen UserProfile di unmount atau userId berubah, cleanup function kita akan memanggil controller.abort(). Ini mengirimkan sinyal ke permintaan fetch untuk berhenti. Jadi kita gak mencoba update state di komponen yang udah gak ada dan menghindari memory leak atau error. Ini solusi yang modern dan powerful banget.

Skenario Keempat Subscriptions (misalnya WebSockets)

Kalau aplikasi kita pakai WebSockets atau library lain yang butuh subscription, ini juga wajib banget kita bersihin.

javascript
import React, { useEffect, useState } from 'react';
// Misalkan ini adalah simulasi library socket kita
const socketService = {
  subscribe: (topic, callback) => {
    console.log(Berlangganan ke topik: ${topic});
    const interval = setInterval(() => {
      callback(Pesan dari ${topic} @ ${new Date().toLocaleTimeString()});
    }, 2000);
    return () => {
      clearInterval(interval);
      console.log(Berhenti berlangganan dari topik: ${topic});
    };
  }
};function ChatRoom({ topic }) {
  const [messages, setMessages] = useState([]);useEffect(() => {
    const unsubscribe = socketService.subscribe(topic, (newMessage) => {
      setMessages(prevMessages => [...prevMessages, newMessage]);
    });// Ini cleanup function kita
    return () => {
      unsubscribe(); // Penting! Berhenti berlangganan saat komponen unmount
    };
  }, [topic]); // Dependency array, jalan lagi kalau topic berubahreturn (
    
      Obrolan di Topik: {topic}
      
        {messages.map((msg, index) => (
          {msg}
        ))}
      
    
  );
}

Mirip kayak timer, kalau kita gak panggil unsubscribe() di cleanup function, subscription ke WebSocket atau layanan lain bisa terus aktif meskipun komponennya udah gak ada. Ini jelas buang buang resource jaringan dan memori. Jadi unsubscribe() di cleanup itu penting banget buat menjaga aplikasi kita tetap sehat dan efisien.

Tips Tambahan Biar Kode Makin Oke dan Asik

Selain dari contoh contoh di atas ada beberapa tips lagi nih yang bisa bikin kita makin jago dalam mengelola useEffect dan cleanup.

Reaktivitas Cleanup dengan Dependency Array

Perlu kita ingat kalau cleanup function itu gak cuma jalan pas komponen di unmount. Dia juga jalan sebelum useEffect di re run karena ada perubahan di dependency array. Ini berarti cleanup kita harus spesifik untuk efek dari useEffect sebelumnya. Misalnya nih kita ubah userId di komponen UserProfile. Cleanup function yang lama bakal jalan dulu membatalkan fetch yang lama, baru useEffect jalan lagi dengan userId yang baru dan memulai fetch yang baru. Ini desain yang powerful banget.

Custom Hooks untuk Reusability

Kalau kita punya logika useEffect dengan cleanup yang sering dipakai berulang ulang di beberapa komponen, kita bisa ekstrak jadi custom hook. Ini bikin kode kita lebih rapi mudah di maintain dan reusable. Contohnya nih kita bisa bikin useEventListener atau useInterval.

javascript
// useEventListener.js
import { useEffect } from 'react';function useEventListener(eventType, callback, element = window) {
  useEffect(() => {
    element.addEventListener(eventType, callback);
    return () => {
      element.removeEventListener(eventType, callback);
    };
  }, [eventType, callback, element]);
}export default useEventListener;// Cara pakainya di komponen
import React, { useState, useCallback } from 'react';
import useEventListener from './useEventListener';function MyComponent() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });// Gunakan useCallback biar 'handleMouseMove' stabil dan gak bikin useEffect berulang
  const handleMouseMove = useCallback((event) => {
    setMousePosition({ x: event.clientX, y: event.clientY });
  }, []);useEventListener('mousemove', handleMouseMove);return (
    
      Posisi mouse: X {mousePosition.x} Y {mousePosition.y}
    
  );
}

Dengan custom hook, kita bisa mengisolasi logika efek dan cleanuppnya. Ini membuat komponen utama kita lebih fokus pada UI dan lebih bersih. Selain itu useCallback juga penting banget di sini buat menjaga handleMouseMove tetap sama di setiap render kalau dependency array nya gak berubah. Jadi useEventListener gak perlu di re run terus menerus. Ini penting buat optimasi.

Hati Hati dengan Dependency Array

Jangan sampai kita lupa masukin variabel yang dipakai di dalam useEffect ke dalam dependency array nya. Kalau lupa, useEffect bisa pakai nilai yang "stale" atau basi dari render sebelumnya. Tapi jangan juga masukin terlalu banyak hal kalau memang gak perlu. Kita cuma perlu masukin variabel dari luar scope useEffect yang berubah dan dipakai di dalamnya. ESLint biasanya jago banget ngasih tahu kalau ada yang salah di dependency array kita. Dengerin saran dari ESLint ya. Itu asik banget buat nangkep potensi bug.

Jangan Cleanup Kalau Gak Perlu

Gak semua useEffect butuh cleanup function kok. Misalnya nih useEffect yang cuma buat logging atau ngubah judul halaman. Kalau gak ada resource yang perlu dilepas atau efek samping yang perlu dihentikan, ya gak perlu bikin cleanup function. Fokuskan cleanup untuk hal hal yang memang punya potensi memory leak atau efek samping yang persisten. Kita harus pintar pintar nih memilahnya.

Kenapa Cleanup Ini Penting Banget Buat Kita

Memahami dan menerapkan cleanup di useEffect itu bukan cuma soal codingan yang rapi tapi ini tentang membangun aplikasi yang berkualitas tinggi. Ini beberapa alasannya.

Performa Aplikasi Jadi Lebih Baik Dengan memory leak yang diminimalisir, aplikasi kita bakal lebih ringan dan cepat. User experience juga jadi lebih asik.

Lebih Stabil dan Minim Bug Kita menghindari error yang muncul karena update state di komponen yang udah gak ada atau event listener yang jalan tanpa kontrol. Ini bikin aplikasi lebih stabil.

Kode Lebih Mudah Dielaborasi Kode yang bersih dengan cleanup yang jelas itu lebih mudah dibaca dipahami dan di maintain sama developer lain termasuk diri kita sendiri di masa depan.

Menjadi Developer React yang Profesional Menguasai aspek ini menunjukkan bahwa kita mengerti betul cara kerja React dan bagaimana membangun aplikasi yang efisien. Ini nilai plus banget buat kita.

Jadi sekarang kita udah tahu kan betapa pentingnya cleanup function di useEffect. Ini bukan cuma fitur tambahan tapi sebuah bagian integral dari manajemen siklus hidup komponen React yang efisien. Mari kita terapkan di setiap project kita biar aplikasi yang kita bangun selalu optimal dan memberikan pengalaman terbaik bagi penggunanya. Selamat ngoding teman teman semoga artikel ini bermanfaat dan bikin ngoding React kita makin asik!