useCallback — khái niệm chính, hook ghi nhớ hàm trong React

useCallback trong React là gì

useCallback là một hook được thêm vào React 16.8 giúp ghi nhớ một hàm: trả về cùng một tham chiếu cho đến khi các phụ thuộc thay đổi. Không có useCallback, mỗi khai báo hàm bên trong component tạo ra một đối tượng hàm mới mỗi lần kết xuất. Đối với các kiểu nguyên thủy, điều này không đáng chú ý, nhưng khi truyền các callback này cho các component con được tối ưu hóa qua React.memo, mỗi tham chiếu mới gây ra việc kết xuất lại component con.

Về mặt cú pháp, useCallback tương đương với useMemo cho một hàm: useCallback(fn, deps) là cách viết ngắn cho useMemo(() => fn, deps). React lưu trữ hàm đã ghi nhớ trong bộ nhớ nội bộ của nút fiber và so sánh các phụ thuộc mỗi lần kết xuất. Nếu các phụ thuộc không thay đổi (Object.is cho mỗi phần tử), hàm trước đó được trả về.

Theo React Documentation — useCallback (2025), bạn không nên bọc mọi hàm trong useCallback. Hook có chi phí của nó: gọi hook, so sánh các phụ thuộc và cấp phát bộ nhớ cho mảng phụ thuộc. Nếu một component đơn giản và không có cây sâu với React.memo, useCallback sẽ chỉ làm chậm ứng dụng. Tối ưu hóa phải có thể đo lường được, không phải dựa trên trực giác.

import { useCallback } from 'react';

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

    // Tham chiếu ổn định — cùng một hàm cho đến khi deps thay đổi
    const handleClick = useCallback(() => {
        setCount(prev => prev + 1);
    }, []);

    return <Child onClick={handleClick} />;
}

Cơ chế ghi nhớ hàm hoạt động như thế nào

Ghi nhớ trong useCallback dựa trên việc lưu đệm kết quả của lệnh gọi hàm. React giữ lại closure được tạo tại lần kết xuất đầu tiên và trả về nó trong các lần kết xuất tiếp theo miễn là các phụ thuộc không thay đổi. Bên trong nút fiber, mỗi lần gọi useCallback tạo một nút trong danh sách liên kết của các hook, nơi lưu trữ các phụ thuộc trước đó và giá trị đã ghi nhớ.

Việc so sánh phụ thuộc được thực hiện nghiêm ngặt qua Object.is — một so sánh nông mà không kiểm tra sâu các đối tượng hoặc mảng. Nếu một phụ thuộc là đối tượng hoặc mảng, một tham chiếu mới mỗi lần kết xuất sẽ được coi là một thay đổi. Do đó, mảng phụ thuộc nên chứa các giá trị nguyên thủy hoặc các tham chiếu ổn định (ví dụ: từ useRef hoặc useMemo).

Theo React Core Team — Optimization Guide (2024), chi phí của ghi nhớ bao gồm ba thành phần: cấp phát mảng phụ thuộc mỗi lần kết xuất, duyệt và so sánh các phần tử qua Object.is, và chi phí dọn rác tiềm ẩn khi tạo lại. Đối với một component có hàng trăm wrapper useCallback, điều này có thể trở nên đáng kể — do đó, tính chọn lọc trong việc sử dụng hook là rất quan trọng.

useCallback và hiệu suất

Có một quan niệm sai lầm phổ biến rằng useCallback tự động cải thiện hiệu suất. Trên thực tế, một mình (không có React.memo), useCallback thậm chí còn làm chậm ứng dụng một chút do chi phí so sánh phụ thuộc. Hook chỉ mang lại lợi ích thực sự trong ba tình huống: ngăn kết xuất lại các component React.memo, ổn định callback trong useEffect và truyền callback cho các hook tùy chỉnh phụ thuộc vào sự bằng nhau của tham chiếu.

Quy tắc rất đơn giản: cho đến khi bạn phát hiện ra vấn đề hiệu suất qua React DevTools Profiler — đừng sử dụng useCallback. Nhóm React đã nhiều lần nhấn mạnh rằng tối ưu hóa sớm là gốc rễ của mọi tệ hại. Đầu tiên hãy viết mã sạch không ghi nhớ, đo lường, tìm điểm nghẽn trong profiler, và chỉ sau đó mới thêm useCallback ở những nơi thực sự cần thiết.

// Tối ưu hóa có thể đo lường: Child được bọc trong React.memo
const Child = React.memo(({ onClick }) => {
    console.log('Child đã kết xuất lại');
    return <button onClick={onClick}>Click</button>;
});

function Parent() {
    const handleClick = useCallback(() => {
        console.log('đã nhấp');
    }, []);
    return <Child onClick={handleClick} />;
}

Theo Dan Abramov — Before You memo() (2024), hơn 90% các trường hợp sử dụng useCallback trong các dự án mã nguồn mở là dư thừa. Các nhà phát triển bọc mọi hàm "để phòng khi" mà không đo lường tác động. Giải pháp thay thế: nếu component con nặng và việc kết xuất lại của nó tốn kém — React.memo + useCallback là hợp lý. Nếu component con nhẹ — kết xuất lại rẻ hơn so với so sánh phụ thuộc.

Khi nào sử dụng useCallback

Tình huống đầu tiên là React.memo. Nếu một component con được bọc trong React.memo và nhận một hàm callback làm prop, không có useCallback, component con sẽ kết xuất lại mỗi lần component cha kết xuất, ngay cả khi dữ liệu của nó không thay đổi. useCallback ổn định tham chiếu, cho phép React.memo bỏ qua việc kết xuất lại một cách chính xác.

Tình huống thứ hai là useEffect với callback trong các phụ thuộc. Nếu một hàm được truyền vào mảng phụ thuộc của useEffect, mỗi tham chiếu mới sẽ khởi động lại hiệu ứng. useCallback đảm bảo rằng tham chiếu ổn định và hiệu ứng chỉ chạy khi dữ liệu thực tế thay đổi, không phải mỗi lần kết xuất. Điều này đặc biệt quan trọng đối với các đăng ký và yêu cầu.

• Con React.memo — ngăn kết xuất lại các component con đã ghi nhớ khi truyền callback.
• Phụ thuộc useEffect — ổn định hàm trong mảng phụ thuộc của hiệu ứng, tránh khởi động lại không cần thiết.
• Hook tùy chỉnh — nếu một hook chấp nhận callback và phụ thuộc vào sự bằng nhau tham chiếu của nó, useCallback là bắt buộc.
• Giá trị context — nếu một hàm được truyền trong giá trị context, useCallback ổn định tham chiếu.

// useCallback cho phụ thuộc useEffect ổn định
const fetchData = useCallback(async (id) => {
    const res = await fetch(`/api/${id}`);
    setData(res.data);
}, []); // tham chiếu ổn định, không bao giờ tạo lại

useEffect(() => {
    fetchData(props.id);
}, [props.id, fetchData]); // hiệu ứng chỉ chạy khi props.id thay đổi

useCallback vs useMemo

Sự khác biệt chính giữa useCallback và useMemo là những gì mỗi cái ghi nhớ. useCallback ghi nhớ một hàm: useCallback(fn, deps) trả về fn (cùng một hoặc phiên bản trước đó). useMemo ghi nhớ kết quả của việc gọi một hàm: useMemo(() => computeExpensive(a, b), [a, b]) trả về giá trị đã tính toán, không phải một hàm.

Về mặt kỹ thuật, useCallback là đường cú pháp trên useMemo: useCallback(fn, deps) tương đương với useMemo(() => fn, deps). Cú pháp này chỉ tồn tại để dễ đọc — để nhà phát triển thấy rõ rằng một hàm đang được ghi nhớ, không phải một giá trị. Không có sự khác biệt về hiệu suất giữa useCallback và useMemo với một hàm — chúng tạo ra mã giống hệt nhau.

// Những cái này tương đương:
const handleClick = useCallback(() => doSomething(a, b), [a, b]);
const handleClick = useMemo(() => () => doSomething(a, b), [a, b]);

Các lỗi thường gặp với useCallback

Lỗi phổ biến nhất là bọc vô nghĩa tất cả các hàm trong useCallback mà không có React.memo trên các component con. Nếu một component con không được bọc trong React.memo, nó vẫn sẽ kết xuất lại mỗi lần component cha kết xuất, bất kể tham chiếu callback có thay đổi hay không. useCallback không có React.memo là chi phí không có lợi ích.

• useCallback không có React.memo — component con vẫn kết xuất lại; tối ưu hóa vô nghĩa.
• Phụ thuộc bị quên — nếu một biến được sử dụng bên trong callback không có trong deps, callback chứa stale closure.
• Ghi nhớ quá mức — bọc mọi hàm, bao gồm cả onClick tầm thường với console.log.
• Đối tượng và mảng trong phụ thuộc — một tham chiếu mới mỗi lần kết xuất được coi là thay đổi, ghi nhớ vô dụng.

// ❌ Vô ích: không có React.memo trên con
const handle = useCallback(() => doStuff(), []);
<Child onClick={handle} />; // Child vẫn kết xuất lại mà không có React.memo

// ❌ Stale closure: thiếu phụ thuộc
const handle = useCallback(() => {
    console.log(count); // count luôn là 0 — stale closure!
}, []);

// ✅ Đúng: bao gồm phụ thuộc
const handle = useCallback(() => {
    console.log(count);
}, [count]);

Vấn đề stale closure trong useCallback được giải quyết bằng cách bao gồm tất cả các biến được sử dụng trong mảng phụ thuộc. eslint-plugin-react-hooks với exhaustive-deps tự động kiểm tra rằng tất cả các biến từ thân callback đều có mặt trong mảng. Nếu callback sử dụng setState, không thay đổi giữa các lần kết xuất, nó có thể được đưa vào deps một cách an toàn — React đảm bảo tính ổn định của setState.