ReactJS — Metode Siklus Hidup Komponen

Komponen React memiliki siklus hidup peristiwa yang mereka lalui sejak dibuat hingga dihancurkan. Peristiwa siklus hidup ini memungkinkan pengembang untuk terhubung ke siklus hidup komponen di berbagai titik dan melakukan tindakan tertentu.

Berikut adalah metode daur hidup utama dari komponen React, bersama dengan penjelasan singkat masing-masing dan contoh penggunaannya:

constructor(): Metode ini dipanggil sebelum komponen dipasang (dimasukkan ke dalam DOM). Ini digunakan untuk menginisialisasi status dan mengikat event handler.

Contoh:

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Contoh:

componentDidMount() {
  axios.get('/items')
    .then(response => this.setState({ items: response.data }));
}

Contoh:

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

Contoh:

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    axios.post('/update-count', { count: this.state.count });
  }
}

Contoh:

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

render() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}

Berikut adalah ringkasan dari metode daur hidup komponen utama React:

• constructor(): Menginisialisasi status dan mengikat event handler. Dipanggil sebelum komponen dipasang.
• componentDidMount(): Memicu tindakan atau panggilan API setelah komponen dirender. Dipanggil setelah komponen dipasang.
• shouldComponentUpdate(): Mengembalikan boolean yang menunjukkan apakah komponen harus diperbarui atau tidak. Dipanggil sebelum komponen dirender ulang.
• componentDidUpdate(): Memicu tindakan atau panggilan API setelah komponen diperbarui. Dipanggil setelah komponen diperbarui.
• componentWillUnmount(): Membersihkan resource atau event listener. Dipanggil tepat sebelum komponen dihancurkan.
• render(): Merender JSX untuk sebuah komponen. Dipanggil setiap kali komponen perlu dirender ulang.