Kapan Component "Lahir" dan "Pulang"? - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Apa Maksudnya "Lahir" dan "Pulang" di React?

Dalam React, setiap komponen punya siklus hidup. Bayangkan seperti manusia:

• Lahir  → Saat komponen pertama kali muncul di layar.
• Hidup  → Saat komponen beraktivitas dan bisa berubah.
• Pulang  → Saat komponen dihapus dari layar.

Siklus ini sangat penting karena memengaruhi cara kita mengelola data, event, dan sumber daya (seperti API atau interval waktu).

2. Lifecycle di Functional Component (pakai useEffect)

Di functional component, kita menggunakan useEffect untuk menangani siklus hidup komponen.

import { useEffect } from "react";

const KomponenLahir = () => {
  useEffect(() => {
    console.log("Halo dunia! Komponen lahir!");
    return () => console.log("Dadah~ Komponen pulang!");
  }, []);

  return <h1>Ini Komponen!</h1>;
};

 Saat pertama kali muncul, useEffect akan dijalankan.  Saat komponen hilang, fungsi return dalam useEffect akan dipanggil.

3. Lifecycle di Class Component (pakai componentDidMount & componentWillUnmount)

Kalau pakai class component, kita harus pakai lifecycle method.

import React, { Component } from "react";

class KomponenLahir extends Component {
  componentDidMount() {
    console.log("Halo dunia! Komponen lahir!");
  }

  componentWillUnmount() {
    console.log("Dadah~ Komponen pulang!");
  }

  render() {
    return <h1>Ini Komponen!</h1>;
  }
}

 componentDidMount() → Dipanggil saat komponen pertama kali tampil.   

componentWillUnmount() → Dipanggil saat komponen dihapus.

4. Contoh Kasus: Timer yang Harus Dibersihkan

Misalnya, kita ingin menampilkan timer dalam komponen. Tapi kalau tidak dihentikan saat komponen hilang, timer tetap jalan di belakang layar dan bisa bikin aplikasi berat!

a. Functional Component (dengan useEffect)

import { useState, useEffect } from "react";

const Timer = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((c) => c + 1);
    }, 1000);

    return () => clearInterval(interval); // Hentikan interval saat komponen dihapus
  }, []);

  return <h1>Timer: {count}</h1>;
};

b. Class Component (dengan componentWillUnmount)

import React, { Component } from "react";

class Timer extends Component {
  state = { count: 0 };

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ count: this.state.count + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval); // Hentikan interval saat komponen dihapus
  }

  render() {
    return <h1>Timer: {this.state.count}</h1>;
  }
}

5. Kesimpulan

 React punya siklus hidup: "lahir" (mounting), "hidup" (updating), dan "pulang" (unmounting).  Di functional component, gunakan useEffect untuk mengelola siklus hidup.  Di class component, gunakan componentDidMount dan componentWillUnmount. Pastikan selalu membersihkan efek samping seperti timer atau event listener saat komponen dihapus!

Dengan memahami siklus hidup komponen, kita bisa membuat aplikasi React yang lebih efisien dan bebas dari kebocoran memori!