Vòng đời component React: mount, update, unmount

Vòng đời component React có ba giai đoạn: mount (component xuất hiện trên màn hình lần đầu), update (component render lại vì state, props hoặc context thay đổi) và unmount (component bị gỡ bỏ). Trong function component, bạn phản ứng với các giai đoạn này bằng useEffect: effect với [] chạy sau khi mount, effect có dependency chạy sau những lần update mà dependency thay đổi, còn hàm do effect trả về chạy khi unmount.

Console bên dưới phần xem trước hiển thị từng giai đoạn khi nó diễn ra.

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>
    );
}

Console bắt đầu với render, count = 0 và mounted. Mỗi lần bấm Count sẽ ghi log một lần render và một lần update. Unmount ghi unmounted; Mount lại sẽ bắt đầu từ đầu với count = 0, vì state đã bị vứt bỏ cùng component.

Mount

Một component được mount lần đầu tiên React render nó tại một vị trí nhất định trong cây. React gọi hàm, tạo các nút DOM từ JSX mà hàm trả về, chèn chúng vào, để trình duyệt vẽ, rồi chạy các effect của component.

useEffect(fn, []) là nơi bạn khởi động những thứ cần tồn tại suốt thời gian component còn trên màn hình: một subscription, một timer, một kết nối, request dữ liệu đầu tiên. Nó chạy sau khi vẽ, nên không bao giờ làm chậm khung hình đầu tiên.

Update

Một component update (render lại) khi:

• state của chính nó thay đổi,
• component cha render lại (mặc định, mọi component con cũng render theo, dù props của chúng có đổi hay không),
• một context mà nó đọc thay đổi.

Sau mỗi lần update, React chạy những effect có dependency thay đổi. Trước khi chạy lại một effect, React chạy cleanup trước đó của effect ấy, nên subscription cũ được đóng trước khi subscription mới mở ra. Trang rendering trình bày chi tiết hơn những gì kích hoạt một lần render.

Unmount

Một component bị unmount khi component cha thôi render nó (như {show && <Counter />} ở trên), khi key của nó thay đổi, hoặc khi chính root bị unmount. React gỡ các nút DOM của nó, chạy cleanup của mọi effect và bỏ đi state. Nếu sau này component xuất hiện lại, đó là một instance hoàn toàn mới.

Component cha và con

React render từ trên xuống nhưng chạy effect từ dưới lên. Khi cha và con mount cùng lúc, effect của con chạy trước, nên effect của cha có thể tin rằng các con đã được thiết lập xong.

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>
    );
}

Khi mount, log ghi render Parent, render Child, Child effect, Parent effect. Bấm Remove, các cleanup chạy theo chiều ngược lại: Parent cleanup, rồi Child cleanup.

Pha render và pha commit

Mỗi lần update đi qua hai pha:

1. Pha render. React gọi các component của bạn để tính JSX mới và so sánh với kết quả trước. Chưa có gì trên màn hình thay đổi. React có thể tạm dừng phần việc này, chạy nó hai lần trong StrictMode, hoặc bỏ đi, vì vậy việc render phải thuần: không request, không subscription, không thay đổi biến bên ngoài.
2. Pha commit. React áp dụng các khác biệt vào DOM, gắn ref và chạy các callback useLayoutEffect, tất cả trước khi trình duyệt vẽ. Các callback useEffect chạy sau đó, thường là khi trình duyệt đã vẽ xong. Khi lần update do một cú click hoặc một thao tác nhập rời rạc khác gây ra, React chạy chúng ngay sau layout effect, để kết quả sẵn sàng trước sự kiện tiếp theo.

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>;
}

Mỗi lần bấm đều ghi ba dòng theo cùng một thứ tự. Các effect này không có mảng dependency, nên chạy sau mỗi lần render. Thêm [] làm đối số thứ hai cho cả hai, chúng sẽ chỉ chạy sau lần render đầu tiên.

Phương thức vòng đời của class và hook tương đương

Class component viết vòng đời ra thành các phương thức có tên. Bạn sẽ gặp chúng trong code cũ và trong error boundary, thứ vẫn cần một class.

Đây là một class ghi log từng phương thức khi nó chạy:

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>
    );
}

Khi mount, log ghi constructor, getDerivedStateFromProps, render, componentDidMount. Một cú bấm ghi getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate. Cho shouldComponentUpdate trả về false, các cú bấm sẽ không còn cập nhật nút nữa: state thay đổi, nhưng React bỏ qua lần render. Trang class component chỉ cách chuyển một class như thế này sang hàm.

Nghĩ theo đồng bộ hóa, không theo vòng đời

Bảng tương đương hook rất hữu ích khi đọc code cũ, nhưng nó có thể khiến bạn viết effect theo thói quen của class, như một effect "did mount" lớn và một effect "did update" lớn. Tốt hơn hãy hiểu một effect là "giữ thứ bên ngoài này đồng bộ với những giá trị này": kết nối tới roomId, và khi roomId thay đổi thì ngắt kết nối rồi kết nối lại. Hãy viết một effect cho mỗi thứ bạn đồng bộ, liệt kê các giá trị nó dùng làm dependency, và để React quyết định khi nào chạy nó.