Lifecycle pada react

lifecycle merupakan fase yang akan dilalui saat aplikasi react dipanggil. Fase itu diantara lain yaitu

• Mounting
• Updating
• Unmounting

Namun secara teknikal lifecycle ini hanya terdapat pada class component. Meskipun demikian functional component dapat membuat function lifecycle layaknya pada class component

Fase pada lifecycle

seperti yang sudah disebutkan bahwa lifecycle memiliki 3 fase dan berikut penjelasan mengenai fase tersebut

1. Fase Mounting Fase ini ketika sebuah component dibuat dan ditambahkan pada DOM(Document Object Model). Fase mounting hanya berjalan satu kali

2. Fase Updating Fase berikutnya yaitu updating, Fase tersebut akan terjadi jika ada perubahan pada props ataupun state yang terdapat pada component. Fase ini bisa berulang kali terjadi jika ada perubahan.

3. Fase Unmounting Fase terakhir yaitu unmounting. fase yang terakhir dialami pada component ketika component dihapus pada DOM. Fase ini dapat digunakan untuk menghapus initial state ataupun melakukan restore variable ke kondisi semula

Methods

Disetiap fase lifecycle pada react, react akan memanggil beberapa function yang ada pada component tersebut.

Fase Mounting

Fase ini akan memanggil constructor, static getDerivedStateFromProps, render dan componentDidMount

Constructor

method ini dapat digunakan untuk melakukan inisialisasi sebuah state atau bind sebuah function

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = 0;

    this.setStateCustom = this.setStateCustom.bind(this);
  }
}

getDerivedStateFromProps

Beberapa kasus ketika sebuah data dipassing ke state melalui props, pada child component perlu mengupdate state ataupun mengelola terlebih dahulu pada data tersebut. Untuk mengatasi hal tersebih getDerivedStateFromProps ini diperlukan

Method ini memiliki dua parameter yaitu props dan state

class Child extends React.Component {
  static getDerivedStateFromProps(props, state) {
    return {
      state: props.count + 1,
    };
  }
}

Render

method ini dipanggil setelah method getDerivedStateFromProps

componentDidMount

Method terakhir yang dipanggil yaitu componentDidMount. method ini dipanggil setelah semua element telah ditambahkan pada DOM. Dalam method ini dapat digunakan untuk melakukan fetching api dan mengupdate ke state ataupun untuk melakukan update store redux

class Child extends React.Component {
  componentDidMount() {
    fetch("example.com/api/v1/books");
  }
}

Fase Updating

fase updateing akan memanggil method berikut

• static getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeupdate
• componentDidUpdate

getDerivedStateFromProps

method ini akan dipanggil pertamakali ketika component memasuki fase updating. method ini dapat digunakan untuk merefleksikan props ke state component sekarang.

shouldComponentUpdate

method sebenernya jarang digunakan tapi memberikan kelengkapan pada lifecycle untuk melakukan optimasi performance pada component. Sejatinya method ini digunakan untuk mencegah component untuk melakukan render ulang ketika ada props atau state yang berubah

method ini memiliki 2 parameter yaitu nextProps dan nextState dan mengembalikan data boolean. kembalian ini digunakan sebagai trigger untuk melakukan render ulang atau tidak.

class Child extends React.Component {
  shouldComponentupdate(nextProps, nextState) {
    return nextProps.state === this.props.state;
  }
}

getSnapshotBeforeUpdate

method ini digunakan untuk mengambil props dan state yang belum mengalami update pada component. fungsi method ini dapat digunakan untuk melakukan scroll layar ataupun item

dan return dari method ini dapat diakses melalui method componentDidUpdate

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.currentScroll = 0;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    window.scrollTo({ top: this.currentScroll, behavior: "smooth" });

    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot === null) {
      console.log("snapshot from getSnapshotBeforeUpdate is " + snapshot);
    }
  }
}

componentDidUpdate

method terakhir dari fase updateing, dapat digunakan untuk membuat sideEffect seperti fetching ataupun memperbarui state

class Child extends React.Component {
    componentDidUpdate(prevProps, prevStatem snapshot){

    }
}

parameter snapshot tersedia jika pdata komponent tersebut terdapat method getSnapshotBeforeUpdate

Fase Unmounting

fase terakhir dari lifecycle react. fase ini merupakan fase dimana sebuah element pada component akan dihapus dari dalam DOM. dalam fase ini akan ada 1 method yang dijalankan yaitu componentWillUnmount. method ini dijalankan sebelum element benar benar dihapus dari DOM.

Dalam method ini dapat digunakan untuk melakukan cleanup store redux, cancel network, ataupun unsubscribe dari sebuah subscribtion

class Child extends React.Component {
  componentWillUnmount() {
    console.log("unmounting");
  }
}

Lifecycle pada functional component react

Pada functional component tidak ada lifecycle secara khusus layaknya class component. meskipun demikina functional component dapat membuat versinya sendiri sebagai berikut

lifecycle pada functional compoenent

import React from "react"

export default fucntion App(){
    const [state, setState] = Reaact.useState(0)

    // componentDidMount
    useEffect(()=>{
        console.log("componentDidMount")
        setState(1)

        // componentWillUnmount
        return ()=>{
            console.log("componentWillUnmount")
            setState(0)
        }
    },[])

    // componentDidUpdate
    useEffet(()=>{
        console.log("componentDidUpdate")
    })
    // atau bisa juga
     useEffet(()=>{
        console.log("componentDidUpdate")
    },[state])

    return (
        <p>hello</p>
    )
}

ketika sebuah state ditambahkan ke array dependecies useEffect, maka component tersebut memiliki lifecycle componentDidUpdate yang mana akan merender ulang component tersebut

References:

• Lifecycle Diagram