Trong bài trước chúng ta đã cùng nhau tìm hiểu về một HOC đó là Reactjs memo. Nó là một công cụ giúp ghi nhớ một function component dựa vào các props truyền vào từ đó giúp tránh được việc re-render component một cách không cần thiết. Ở bài này, chúng ta sẽ cùng nhau tìm hiểu về 2 hook cực kì quan trọng trong reactjs hook cũng có chức năng tương tự đó là useMemo và useCallback. Nào, chúng ta cùng bắt đầu.
- useMemo
Định nghĩa: useMemo là 1 hook trong reactjs, cho phép chúng ta lưu lại (cache) lại kết quả tính toán giữa các lần re-render.
Cú pháp:const cachedValue = useMemo(calculateValue, dependencies)
Chúng ta sẽ đi vào ví dụ sau đây hiểu rõ hơn về useMemo:
Và đây là kết quả sau khi chạy chương trình. Mỗi lần click vào button add để thêm 1 todo thì hàm tính toán count cũng bị gọi lại -> điều này là không tốt cho ứng dụng
Rõ ràng chúng ta không hề thay đổi giá trị của biến count truyền vào hàm tính toán mà hàm này vẫn bị gọi lại, giả sử như trong hàm này là những logic phức tạp hơn thì sẽ làm chậm ứng dụng. Để giải quyết vấn đề này, đơn giản, chúng ta sẽ thêm useMemo cho hàm tính toán đó, mục đích là ghi nhớ kết quả của hàm này. Và nó chỉ bị gọi lại khi mà giá trị biến count bị thay đổi. Lúc này đoạn code để lưu giá trị hàm tính toán như sau:
Thay vì gọi trực tiếp giá trị hàm tính toán thì chúng ta đã sử dụng hook useMemo. Lúc này chỉ khi nào giá trị count thay đổi thì hàm tính toán mới được gọi lại. Chúng ta cùng xem kết quả:
Như vậy là chúng ta đã hiểu và biết cách sử dụng hook useMemo. Nó là một hook rất quan trọng và được sử dụng rất nhiều trong quá trình làm việc. Mình sẽ tóm tắt lại vài ý chính như sau:
- Nó là 1 hook
- Viết trong thân của 1 component
- Trả về 1 giá trị được ghi nhớ
- Tác dụng: Tránh thực hiện lại 1 logic không cần thiết
- Chỉ chạy khi 1 trong các dependence được updated
2. useCallback
Định nghĩa: useCallback là một hook trong reactjs giúp chúng ta tránh tạo ra hàm mới một cách không cần thiết trong function component
Cú pháp: const cachedValue = useMemo(calculateValue, dependencies)
Chúng ta sẽ cùng đi vào ví dụ sau để xem cách nó làm việc hiệu quả như thế nào trong quá trình re-render của 1 component nhé.
Chúng ta sẽ di chuyển button add todo xuống component Todos, và thêm 1 props onAddTodos mỗi khi gọi component Todos. Bây giờ cũng chạy ứng dụng nhé.
Mỗi khi click button add thì một todo được thêm vào và component bị re-render thì điều đó không có gì sai cả. Tuy nhiên vấn đề là khi click vào button Increment để tăng count lên 1 đơn vị thì toàn bộ hàm trong App được tạo mới trong đó có hàm để xử lý việc add todo, do đó mà component Todos bị re-render một cách không cần thiết. Lúc này việc thêm useCallback để trả về 1 hàm được ghi nhớ là cần thiết nhằm tránh việc re-render component Todos một cách không cần thiết. Code mới sẽ như sau:
Lúc này chỉ khi nào giá trị todos bị thay đổi thì component Todos mới bị re-render.
Như vậy là chúng ta đã cùng tìm hiểu rất kĩ về useCallBack. Mình sẽ tổng hợp lại qua các ý sau:
- Hook
- Trả về 1 function callback được ghi nhớ
- Chỉ chạy khi 1 trong các dependence được updated
- Tránh tạo ra hàm mới một cách không cần thiết trong function component
Như vậy là mình đã cùng đi qua 3 khái niệm rất cơ bản mà vô cùng quan trọng trong reactjs đó là reactjs memo và 2 hook useMemo, useCallback. Hy vọng qua 2 bài viết này các bạn sẽ có cái nhìn rõ hơn cũng như phân biệt và biết cách sử dụng 3 khái niệm này một cách hiệu quả nhất.
