> For the complete documentation index, see [llms.txt](https://pea-story.gitbook.io/pexpa/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pea-story.gitbook.io/pexpa/knowledge/reactjs/react-hook/using-the-effect-hook.md).

# 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.

```javascript
// 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`

```javascript
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**

```javascript
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**

```javascript
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ố**

```javascript
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.