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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pea-story.gitbook.io/pexpa/knowledge/reactjs/react-hook/using-the-effect-hook.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.