Sử dụng useCallback để tối ưu function

Khi nào chúng ta nên sử dụng

Tác giả: Nine Dev

Khi phát triển website với React bạn sẽ phải làm việc với Function rất nhiều, tất nhiên sẽ không thể tránh khỏi việc function bị trùng nhau và rerender lại nhiều lần, điều này sẽ ảnh hưởng rất nhiều tới performance.

Hôm nay mình sẽ tìm hiểu xem useCallback là gì và sử dụng useCallbackÏ như thế nào cho hợp lý nha.

I. useCallback là gì?

Khái niệm: Là một react hooks giúp mình tạo ra một memoized callback và chỉ tạo ra callback mới khi dependencies thay đổi.

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

Return memoized callback.

Chỉ tạo ra function mới khi dependencies thay đổi.

Nếu dùng empty dependencies thì không bao giờ tạo ra function mới.

II. Sử dụng useCallback trong React Js

Để sử dụng useCallback trong React Js, ta cần import nó từ thư viện react và khai báo trong component như sau:


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


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


              // Sử dụng useCallback để memoize hàm callback
              

              // Dependency array: chỉ khi count thay đổi, hàm mới được tạo lạ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ụ này, handleClick được memoized bằng useCallback. Dependency array ([count]) đặc tả các biến phụ thuộc mà khi thay đổi, hàm callback sẽ được tạo lại. Trong trường hợp này, chỉ khi count thay đổi, handleClick mới được tạo lại.

Ở đây, chúng ta khai báo một function handleClick sử dụng useCallback. Để đảm bảo rằng handleClick không bị tạo lại mỗi khi component render lại, chúng ta truyền vào dependencies count trong mảng thứ 2 của useCallback. Khi giá trị của count thay đổi, React sẽ tạo lại function handleClick, trong trường hợp này, chúng ta muốn handleClick được tạo lại khi và chỉ khi giá trị của count thay đổi.

Function handleClick này sẽ được sử dụng trong callback của sự kiện onClick của button, khi click vào button, state count sẽ được tăng lên 1.

Với việc sử dụng useCallback, chúng ta có thể tối ưu hóa hiệu suất của component bằng cách tránh việc tạo lại các function mới mỗi khi component render lại.

III. Kết luận

Trong React, khi sử dụng các function component, nếu ta không sử dụng useCallback, mỗi lần component re-render, function sẽ được tạo lại một lần mới, gây ra tốn tài nguyên. Việc sử dụng useCallback giúp giảm thiểu việc tạo mới các hàm trong mỗi lần re-render, tăng hiệu suất ứng dụng React. Tuy nhiên, ta cần phải sử dụng useCallback đúng cách và hiểu rõ khi nào nên sử dụng để tránh làm giảm hiệu suất thay vì tăng nó.

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

useCallback giúp performance của app trở nên rất tốt, nhưng các bạn cũng đừng nên lạm dụng nó quá, còn không thì không dùng thì app bạn vẫn tốt thôi.

Mình khuyến khích những đoạn code hay những function nào mà bạn cảm thấy không cần thiết phải cập nhật giá trị mỗi khi component bị rerender thì có thể sử dụng useCallback nhé.

Hy vọng bài viết này sẽ giúp các bạn hiểu rõ hơn về useCallback và giúp ích được cho các bạn trong các dự án thực tế. Cảm ơn các bạn đã ghé thăm bài viết của mình

👉 Click vào đây để có thể xem video mô tả chi tiết hơn nhé!