Tìm Hiểu useEffect() Trong React Và Cách Sử Dụng

Trong React, việc quản lý các side effects trong các functional components được thực hiện thông qua Hook useEffect(). Hook này là một phần không thể thiếu trong việc xây dựng các ứng dụng React hiện đại, giúp lập trình viên có thể dễ dàng thực hiện các tác vụ như gọi API, thao tác với DOM, đăng ký và hủy đăng ký sự kiện, và nhiều hơn nữa. Trong bài viết này, chúng ta sẽ đi sâu vào cách sử dụng useEffect() và khám phá các ví dụ thực tế để hiểu rõ hơn về cách hoạt động và ứng dụng của nó.

Khái Niệm Về useEffect()

useEffect() là một Hook trong React cho phép bạn thực hiện các side effects trong functional components. Các side effects là các hoạt động mà ảnh hưởng hoặc cần được thực hiện bên ngoài phạm vi của hàm tính toán output (ví dụ như thay đổi DOM, gọi API, thực hiện các subscriptions), mà không phải là kết quả trực tiếp của việc render.

Cú Pháp Cơ Bản

useEffect nhận vào hai tham số: một hàm callback và một mảng dependencies. Cú pháp cơ bản của nó như sau:

useEffect(() => {
    // Code thực hiện side effect ở đây
    return () => {
        // Cleanup code ở đây
    };
}, [dependencies]);

Callback: Phần code trong callback sẽ chạy sau mỗi lần render, tùy thuộc vào mảng dependencies.
Dependencies: Nếu mảng này không được cung cấp, side effect sẽ chạy sau mỗi lần render. Nếu mảng rỗng, side effect chỉ chạy một lần sau lần render đầu tiên. Nếu mảng có chứa các giá trị, side effect sẽ chạy lại mỗi khi giá trị trong mảng thay đổi[1][2][3].

Ví Dụ Về Cách Sử Dụng useEffect()

1. Gọi API Khi Component Mount

Sử dụng useEffect để gọi API và cập nhật state khi component được mount:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function FetchDataComponent() {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios('https://api.example.com/data');
            setData(result.data);
        };

        fetchData();
    }, []); // Mảng rỗng đảm bảo rằng effect chỉ chạy một lần

    return (
        <ul>
            {data.map(item => (
                <li key={item.id}>{item.title}</li>
            ))}
        </ul>
    );
}

2. Cập Nhật Document Title

Thay đổi tiêu đề của document dựa trên state của component:

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

function Counter() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Bạn đã click ${count} lần`;
    }, [count]); // Effect này chạy lại mỗi khi `count` thay đổi

    return (
        <div>
            <p>Bạn đã click {count} lần</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

Lưu Ý Khi Sử Dụng useEffect

Cleanup trong useEffect: Để tránh memory leaks, bạn nên thực hiện cleanup cho các subscriptions, timers, event listeners trong phần return của callback
Tối ưu hiệu suất: Sử dụng mảng dependencies một cách khôn ngoan để tránh các re-render không cần thiết[4][5].

Kết Luận

useEffect là một công cụ mạnh mẽ trong React giúp bạn quản lý side effects một cách hiệu quả trong các functional components. Bằng cách hiểu rõ cách sử dụng và các nguyên tắc của nó, bạn có thể xây dựng các ứng dụng React hiệu quả và ổn định hơn.