useEffect Hook

Side effects là gì?

Khái nhiệm

Việc fetching data, thiết lập các subscription, và việc thay đổi DOM trong React component, những hành động như vậy được gọi là side effect(hoặc effect).

Phân loại Side effects

• Effects không cần clean up: gọi API, tương tác DOM

• Effects cần clean up: subscription, setTimeout, setInterval

Giới thiệu React.useEffect Hook

React.useEffect là một hook cơ bản và có sẵn trong React hooks, nó được sử dụng cho Side effects và thực thi ít nhất 1 lần sau lần render đầu tiên, những lần render sau chỉ được thực thi nếu có dependencies thay đổi. React.useEffect gồm 2 phần: side effect và clean up (optional) và effect clean up sẽ được thực thi trước run effect lần tiếp theo hoặc unmount.

// callback: Your side effect function
// dependencies: Only excute callback if one of your dependencies changes
function useEffect(callback, dependencies) {}

Một đoạn code mẫu mô phỏng useEffect

function App() {
    // executed before each render
    const [color, setColor] = useState('deeppink');
    // executed after each render
    useEffect(() => {
    // do your side effect here ...
    return () => {
    // Clean up here ...
    // Executed before the next render or unmount
    };
    }, []);
    // rendering
    return(
        //TODO:code
    );
}

Vòng đời hoạt động của React.useEffect

Quá trình Mounting

Trong quá trình này component sẽ thực hiện rendering trước sau đó sẽ thực hiện hàm useEffect() và chỉ thực hiện side effect chứ không thực hiện cleanup trong lần render đầu tiên.

Quá trình Updating

Sau khi có cập nhật từ component lúc này sẽ thực hiện rendering và cleanup sẽ được kích hoạt, sau đó mới thực hiện side effect lần tiếp theo nếu dependencies thay đổi.

Quá trình Unmounting

Trong quá trình này sẽ chỉ chạy cleanup.

Các trường hợp sử dụng dependencies

Không khai báo dependencies

useEffect(() => {
    // EVERY
    // No dependencies defined
    // Always execute after every render
    return () => {
    // Execute before the next effect or unmount.
    };
});

Trong trường hợp này useEffect sẽ thực hiện sau mỗi lần render

Khai báo dependencies với một mảng trống

useEffect(() => {
    // ONCE
    // Empty dependencies
    // Only execute once after the FIRST RENDER
    return () => {
    // Execute once when unmount
    };
}, []);

Trong trường hợp này useEffect sẽ chỉ thực hiện 1 lần duy nhất sau lần render đầu tiên.

Khai báo dependencies với tham số

useEffect(() => {
    // On demand
    // Has dependencies
    // Only execute after the first RENDER or filters state changes
    return () => {
    // Execute before the next effect or unmount.
    };
}, [filters]);

Trong trường hợp này useEffect sẽ render lần đầu tiên nhưng sẽ thực hiện lần tiếp theo nếu tham số filters thay đổi.