Pengenalan

Dengan menggunakan ReactJS kita membuat komponen dengan React.createClass(). Komponen yang telah dibuat tersebut harus memiliki method render. Komponen ini selama hidupnya mengalami serangkaian fase atau lifecycle (React Component Lifecycle). ReactJS menyediakan fungsi-fungsi yang dapat dipanggil ketika komponen berada pada fase hidupnya tertentu. Fungsi-fungsi ini disebut lifecycle methods.

Dengan memahami React component lifecycle kita dapat melakukan aksi-aksi tertentu, misalnya pada saat komponen baru saja dibuat atau ketika komponen hendak dihapus. Bahkan, dengan fungsi-fungsi lifecycle kita dapat menentukan apakah komponen seharusnya diperbaharui (render ulang) atau tidak ketika terjadi perubahan di state maupun props komponen.

React Component Lifecycle

Untuk lebih mudah dipahami kita perlu membedakan fase-fase tersebut menjadi: fase inisiasi (dimana komponen baru saja dibuat), fase-fase ketika state dan props berubah, serta fase saat komponen dihapus (unmounting).

Inisiasi

  • GetDefaultProps
  • GetInitialState
  • ComponentWillMount
  • Render
  • ComponentDidMount

Dua fungsi pertama, yakni getDefaultProps dan getInitialState hanya akan dipanggil satu kali, yaitu pada saat komponen pertama kali di-render.

Fungsi getInitialState berfungsi untuk memberikan nilai awal state yang dapat diakses dari dalam komponen dengan menggunakan this.state.

class MyComponent extends React.Component {
    constructor() {
        super()
        this.state = {
            name: 'anakbit'
        }
    }
}

Tidak jauh berbeda dengan getInitialState, getDefaultProps berfungsi untuk memberikan nilai awal props yang dapat diakses dari dalam komponen dengan menggunakan this.props.

class MyComponent extends React.Component {}

MyComponent.defaultProps = {
    name: 'anakbit'
}

Dua fungsi lainnya yang hanya akan dipanggil ketika komponen diinisiasi adalah componentWillMount dan componentDidMount.

ComponentWillMount dipanggil sebelum fungsi render dieksekusi. Melakukan perubahan pada fungsi ini tidak akan memicu re-render.

Fungsi render mengembalikan markup komponenn, yang bisa merupakan sebuah child component, null, ataupun false (jika anda tidak ingin me-render apapun).

Di bagian fase ini state dan props di interpretasi untuk menghasilkan output yang benar. State dan props tidak boleh diperbaharui di fungsi ini. Ini penting untuk diingat, karena berdasarkan definisinya, fungsi render harus murni (pure), artinya hasil yang sama dihasilkan tiap kali fungsi ini dipanggil.

Sesaat setelah fungsi render dieksekusi, fungsi componentDidmount dipanggil. DOM dapat diakses di method ini, memungkinkan manipulasi DOM atau operasi pemanggilan data (ajax). Seluruh operasi DOM seharusnya terjadi di fase ini, bukan di dalam method render.

Perubahan State

Perubahan state akan memicu beberapa fungsi-fungsi yang kemudian dapat di-hook.

  • ShouldComponentUpdate
  • ComponentWillUpdate
  • Render
  • ComponentDidUpdate

ShouldComponentUpdate selalu dipanggil sebelum render, memungkinkan untuk mengatur apakah re-rendering diperlukan atau tidak. Fungsi ini tidak pernah dipanggil pada inisiasi. Fungsi ini harus memiliki nilai kembali yang berupa boolean.

shouldComponentUpdate(nextProps, nextState) {
    // return nilai boolean
    return true;
}

Pada method shouldComponentUpdate kita dapat mengakses props dan state yang sekarang sehingga kita dapat mendeteksi kemungkinan perubahan data untuk menentukan apakah re-rendering diperlukan atau tidak.

ComponentWillUpdate dipanggil segera setelah shouldComponentUpdate mengembalikan nilai true. Perubahan state dengan this.setState tidak diperbolehkan di dalam fungsi ini, karena fungsi ini seharusnya hanya digunakan untuk mempersiapkan perubahan selanjutnya, bukan malah untuk memicu perubahan itu sendiri.

componentWillUpdate(nextProps, nextState) {
    // Lakukan persiapan untuk perubahan selanjutnya
}

Kemudian, componentDidUpdate dipanggil setelah fungsi render. Serupa dengan componentDidMount, fungsi ini dapat digunakan untuk melakukan operasi DOM setelah data telah diperbaharui.

componentDidUpdate(prevProps, prevState) {
    //
}

Perubahan Props

Semua perubahan pada objek props juga akan memicu lifecycle methods yang serupa dengan yang terjadi ketika ada perubahan state, hanya saja ada satu tambahan fungsi.

  • ComponentWillReceiveProps
  • ShouldComponentUpdate
  • ComponentWillUpdate
  • Render
  • ComponentDidUpdate

ComponentWillReceiveProps hanya dipanggil ketika props telah berubah dan tidak pada saat rendering awal. ComponentWillReceiveProps memungkinkan perubahan state berdasar pada props yang sekarang dan props baru, tanpa memicu rendering lagi. Satu hal menarik yang perlu diingat adalah tidak ada fungsi yang serupa untuk state, karena perubahan state seharusnya tidak memicu perubahan props.

componentWillReceiveProps(nextProps) {
    this.setState({
        // Set something
    })
}

Tidak ada yang baru pada lifecycle selanjutnya karena sisanya serupa dengan dengan yang terjadi setelah perubahan state.

Unmounting

  • componentWillUnmount

Satu-satunya fungsi yang belum kita bahas adalah componentWillUnmount yang dipanggil ketika komponen telah dibuang dari DOM. Fungsi ini berguna ketika aksi-aksi yang berhubungan dengan permbersihan diperlukan, semisal membuang timer yang sebelumnya didefinisikan di componentDidMount.

Referensi: