Khi nào cần sử dụng tới useCallback trong ReactJS?

Tham khảo:

• Tổng hợp các phương thức xử lý Array bạn nên biết khi học React
• Chi tiết về Native App và Hybrid App
• Using React with Appwrite to set up user authentication

Ví dụ bài toán sử dụng useCallback

Mình sẽ đặt một bài toán đơn giản như sau: Chúng ta có một màn hình có hai component lồng nhau:

• Parent
• Child

Trong đó, Parent component có một button để tăng giá trị state (kiểu như một bộ đếm vậy). Còn Child thì đơn giản là hiển thị một đoạn text và không làm gì cả.

Dưới đây là mã nguồn hai component đó:

• import React from “react”;
• const Child = ({ reset }) => {
• console.log(“re-render child component.”)
• return (
• <div>
• <p>child component which has nothing to do with parent count</p>
• </div>
• );
• };
• export default Child;

và Parent Component:

• import React, { useState } from ‘react’;
• import { render } from ‘react-dom’;
• import Child from “./Child”;
• import ‘./style.css’;
• const Parent = () => {
• const [count, setCount] = useState(0);
• console.log(“re-render parent component”);
• return (
• <main>
• <p>Count: {count}</p>
• <button onClick={() => setCount(count=>(count+1))}>Increment</button>
• <Child />
• </main>
• )
• }
• render(<Parent />, document.getElementById(‘root’));

Giao diện chương trình:

Khi mỗi lần click vào button Increment, bạn sẽ thấy console log hiển thị 2 log như sau:

• re-render parent component
• re-render child component.

Bạn có nhận ra vấn đề ở đâu không?

Mặc dù Child component không hề thay đồi trạng thái state, nhưng nó cũng bị re-render lại. Vậy để tránh Child component bị re-render lại, mình sử dụng React.memo() để giải quyết.

• // Child.js
• import React, { memo } from “react”;
• const Child = memo(({ reset }) => {
• // same content as earlier
• });

Ok, sau đó thử kiểm tra lại kết quả, đúng là Child component không còn bị re-render nữa phải không?

• re-render parent component

Giờ chúng ta thêm một yêu cầu: Đặt nút Reset bộ đếm vào trong Child component (thay vì đặt trong Parent component, chúng ta cứ thử làm khó mình một chút nhé).

Lúc này, mã nguồn của Child.js sẽ đổi lại như sau:

• // Child.js
• import React, { memo } from “react”;
• const Child = memo(({ reset }) => {
• console.log(“re-render child component.”)
• return (
• <div>
• <p>child component which resets count</p>
• <button onClick={reset}>Reset Count</button>
• </div>
• );
• });
• export default Child;

Sau đó, Parent component phải đón event reset từ Child và tiến hành cập nhật lại count state

• // Parent.js
• const Parent () => {
• const [count, setCount] = useState(0);
• console.log(“re-render parent component”);
• const resetCount = () => {
• setCount(0);
• };
• return (
• <main>
• <p>Count: {count}</p>
• <button onClick={() => setCount(count=>(count+1))}>Increment</button>
• <Child reset={resetCount} />
• </main>
• )
• }

Đến lúc này, vấn đề lại phát sinh nè. Khi bạn click vào nút reset thì Child component lại bị re-render – mặc dù bản thân Child component không hề có state bị thay đổi. Như vậy là React.memo không còn “phép thuật” nữa.

Giờ chúng ta phải làm sao đây?

Sử dụng useCallback để tránh re-render không cần thiết

Để giải quyết bài toán trên, chúng ta sử dụng useCallback xem sao.

Chúng ta cần đảm bảo hàm resetCount không được tạo lại mỗi khi Parent render. Đây chính xác là công dụng của useCallback rồi.

Sửa lại hàm resetCount trong Parent component:

• // Parent.js
• const resetCount = useCallback(() => {
• setCount(0);
• }, [setCount]);

Như vậy, useCallback sẽ chỉ trả lại cùng một instance của function mỗi khi component bị re-render và nó chỉ tạo lại khi các dependencies thay đổi. Mà dependencies ở đây chính là tham số thứ 2 được bạn truyền vào. Trong ví dụ này là hàm setCount.

Giải thích thêm: Tham số thứ 2 có ý nghĩa tương đồng với tham số thứ 2 mà bạn vẫn hay sử dụng trong useEffect hook.

Trên đây là một ví dụ minh họa cách sử dụng cũng như khi nào thì cần tới useCallback hook.

Mình hi vọng rằng, với ví dụ này bạn sẽ hiểu rõ thêm về hook đầy bí ẩn này.

Hãy cùng copy code trên và đem sang tool Editor online để thử: Code Editor Online.