Lifecycle Komponen React: Mount, Update, Unmount

Lifecycle komponen React punya tiga fase: mounting (komponen muncul di layar untuk pertama kali), updating (komponen dirender lagi karena state, props, atau context-nya berubah), dan unmounting (komponen dihapus). Di function component, kamu merespons fase-fase ini dengan useEffect: effect dengan [] berjalan setelah mounting, effect dengan dependensi berjalan setelah update yang mengubah dependensinya, dan fungsi yang dikembalikan effect berjalan saat unmount.

Konsol di bawah pratinjau menampilkan setiap fase saat terjadi.

import { useEffect, useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    console.log('render, count =', count);

    useEffect(() => {
        console.log('mounted');
        return () => console.log('unmounted');
    }, []);

    useEffect(() => {
        if (count > 0) console.log('updated, count =', count);
    }, [count]);

    return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            {show && <Counter />}
            <button onClick={() => setShow(!show)} style={{ marginInlineStart: 8 }}>
                {show ? 'Unmount' : 'Mount'} the counter
            </button>
        </div>
    );
}

Konsol diawali dengan render, count = 0 dan mounted. Setiap klik pada Count mencatat sebuah render dan sebuah update. Unmount mencatat unmounted; Mount again memulai lagi dari count = 0, karena state ikut dibuang bersama komponennya.

Mounting

Sebuah komponen mount saat React merendernya pertama kali di posisi tertentu dalam tree. React memanggil fungsinya, membuat node DOM dari JSX yang dikembalikannya, memasukkannya, membiarkan browser menggambar, lalu menjalankan effect komponen itu.

useEffect(fn, []) adalah tempat untuk memulai hal-hal yang harus ada selama komponen tampil di layar: subscription, timer, koneksi, request data pertama. Effect ini berjalan setelah browser menggambar, jadi tidak pernah menunda frame pertama.

Updating

Sebuah komponen melakukan update (dirender lagi) saat:

• state miliknya sendiri berubah,
• komponen induknya dirender lagi (secara default, setiap anak juga ikut dirender, entah props-nya berubah atau tidak),
• context yang dibacanya berubah.

Setelah setiap update, React menjalankan effect yang dependensinya berubah. Sebelum menjalankan sebuah effect lagi, React menjalankan cleanup sebelumnya dari effect itu, jadi subscription lama ditutup sebelum yang baru dibuka. Halaman rendering membahas lebih rinci apa saja yang memicu render.

Unmounting

Sebuah komponen unmount saat induknya berhenti merendernya (seperti yang dilakukan {show && <Counter />} di atas), saat key-nya berubah, atau saat root-nya sendiri unmount. React menghapus node DOM-nya, menjalankan cleanup dari setiap effect, dan membuang state-nya. Jika komponen itu muncul lagi nanti, ia adalah instance yang benar-benar baru.

Induk dan anak

React merender dari atas ke bawah, tetapi menjalankan effect dari bawah ke atas. Saat induk dan anak mount bersamaan, effect anak berjalan lebih dulu, jadi effect induk bisa mengandalkan bahwa anak-anaknya sudah siap sepenuhnya.

import { useEffect, useState } from 'react';

function Child() {
    console.log('render Child');
    useEffect(() => {
        console.log('Child effect');
        return () => console.log('Child cleanup');
    }, []);
    return <p>I am the child.</p>;
}

function Parent() {
    console.log('render Parent');
    useEffect(() => {
        console.log('Parent effect');
        return () => console.log('Parent cleanup');
    }, []);
    return <Child />;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Remove' : 'Add'} both</button>
            {show && <Parent />}
        </div>
    );
}

Saat mount, tercatat render Parent, render Child, Child effect, Parent effect. Tekan Remove, dan cleanup berjalan dengan urutan terbalik: Parent cleanup, lalu Child cleanup.

Fase render dan commit

Setiap update melewati dua fase:

1. Fase render. React memanggil komponenmu untuk menghitung JSX baru dan membandingkannya dengan hasil sebelumnya. Belum ada yang berubah di layar. React bisa menjeda pekerjaan ini, menjalankannya dua kali di StrictMode, atau membuangnya, dan itulah sebabnya rendering harus murni: tanpa request, tanpa subscription, tanpa mengubah variabel di luar.
2. Fase commit. React menerapkan perbedaannya ke DOM, memasang ref, dan menjalankan callback useLayoutEffect, semuanya sebelum browser menggambar. Callback useEffect berjalan setelahnya, biasanya setelah browser selesai menggambar. Jika update dipicu oleh klik atau input diskrit lain, React justru menjalankannya langsung setelah layout effect, sehingga hasilnya siap sebelum event berikutnya.

import { useEffect, useLayoutEffect, useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    console.log('1. render phase: computing JSX for', count);

    useLayoutEffect(() => {
        console.log('2. commit phase: layout effect, DOM updated, not painted yet');
    });

    useEffect(() => {
        console.log('3. effect: after the commit');
    });

    return <button onClick={() => setCount(count + 1)}>Render again ({count})</button>;
}

Setiap klik mencatat tiga baris dengan urutan yang sama. Effect ini tidak punya array dependensi, jadi berjalan setelah setiap render. Tambahkan [] sebagai argumen kedua di keduanya, dan effect hanya berjalan setelah render pertama.

Lifecycle method class dan padanan hook-nya

Class component menuliskan lifecycle sebagai method bernama. Kamu akan menemuinya di kode lama dan di error boundary, yang masih membutuhkan class.

Berikut class yang mencatat setiap method saat berjalan:

import { Component, useState } from 'react';

class Logger extends Component {
    constructor(props) {
        super(props);
        this.state = { clicks: 0 };
        console.log('constructor');
    }
    static getDerivedStateFromProps(props, state) {
        console.log('getDerivedStateFromProps');
        return null;
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate');
        return true;
    }
    getSnapshotBeforeUpdate() {
        console.log('getSnapshotBeforeUpdate');
        return null;
    }
    componentDidMount() {
        console.log('componentDidMount');
    }
    componentDidUpdate() {
        console.log('componentDidUpdate');
    }
    componentWillUnmount() {
        console.log('componentWillUnmount');
    }
    render() {
        console.log('render');
        return <button onClick={() => this.setState({ clicks: this.state.clicks + 1 })}>Clicks: {this.state.clicks}</button>;
    }
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            {show && <Logger />}
            <button onClick={() => setShow(!show)} style={{ marginInlineStart: 8 }}>Toggle</button>
        </div>
    );
}

Mounting mencatat constructor, getDerivedStateFromProps, render, componentDidMount. Sebuah klik mencatat getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate. Buat shouldComponentUpdate mengembalikan false, dan klik tidak lagi memperbarui tombol: state berubah, tetapi React melewatkan render. Halaman class component menunjukkan cara mengubah class seperti ini menjadi fungsi.

Berpikir dalam sinkronisasi, bukan lifecycle

Tabel hook ini berguna untuk membaca kode lama, tetapi bisa membuatmu menulis effect yang meniru kebiasaan class, misalnya satu effect "did mount" besar dan satu effect "did update" besar. Effect lebih tepat dibaca sebagai "jaga agar sesuatu di luar ini tetap sinkron dengan nilai-nilai ini": sambungkan ke roomId, dan saat roomId berubah, putuskan lalu sambungkan lagi. Tulis satu effect untuk setiap hal yang kamu sinkronkan, cantumkan nilai yang dipakainya sebagai dependensi, dan biarkan React yang menentukan kapan menjalankannya.