useCallback là gì? Cách tối ưu function trong React JS

Khi nào nên sử dụng useCallback trong React

Tác giả: Nine Dev

Khi phát triển ứng dụng với React JS, bạn sẽ thường xuyên làm việc với các function trong component. Tuy nhiên, việc tạo lại function mỗi lần component re-render có thể gây ảnh hưởng đến hiệu suất (performance) của ứng dụng.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu useCallback là gì, cách hoạt động và khi nào nên sử dụng useCallback để tối ưu React hiệu quả nhất.

I. useCallback là gì?

useCallback là một React Hook giúp ghi nhớ (memoize) một function và chỉ tạo lại function đó khi dependencies thay đổi.

Nhận vào 2 tham số: function và dependencies.

Trả về một function đã được memoized.

Chỉ tạo lại function khi dependencies thay đổi.

Nếu dependencies là mảng rỗng ([]), function sẽ không bao giờ bị tạo lại.

II. Cách sử dụng useCallback trong React JS

Để sử dụng useCallback, bạn cần import từ thư viện React và áp dụng trong component như sau:


            import React, { useState, useCallback }  from "react"


            const MyComponent = () => {
              const [count, setCount] = useState(0);


              // Memoize function bằng useCallback
              

              // Function chỉ thay đổi khi count thay đổi
              const handleClick  = useCallback(() => {
                  setCount(count + 1);
                }, [count]);
              

              return (
                  <div>
                    <p>Count: {count}</p>

                    <button onClick={handleClick}>Increase Count</button>
                  </div>
                );
      
              };


              export default MyComponent;

Trong ví dụ trên, function handleClick được ghi nhớ bằng useCallback. Điều này giúp tránh việc tạo lại function mỗi lần component re-render.

Dependency array [count] giúp React biết khi nào cần tạo lại function. Nếu count không thay đổi, React sẽ sử dụng lại function cũ → giúp tối ưu performance.

Khi người dùng click vào button, state count sẽ tăng lên và component sẽ re-render. Tuy nhiên, nhờ useCallback, function chỉ được tạo lại khi cần thiết.

III. Lợi ích của useCallback

Sử dụng useCallback đúng cách giúp:

Giảm số lần tạo lại function không cần thiết

Tối ưu hiệu suất React component

Giảm re-render ở component con (khi dùng React.memo)

Khi nào nên sử dụng useCallback?

Không phải lúc nào cũng cần dùng useCallback. Việc lạm dụng có thể khiến code phức tạp và không mang lại lợi ích rõ ràng.

Bạn nên sử dụng useCallback khi:

Truyền function xuống component con

Kết hợp với React.memo

Function có logic nặng hoặc được gọi nhiều lần

Nếu ứng dụng nhỏ hoặc không gặp vấn đề performance, bạn có thể không cần dùng useCallback.

Hy vọng bài viết giúp bạn hiểu rõ hơn về useCallback và cách tối ưu React JS trong thực tế.

👉 Xem video hướng dẫn chi tiết về useCallback tại đây