React Hooks: UseCallback, UseMemo

Phon

24 Th05 2021 • 2 min read

1. Lời nói đầu

Đang ngồi chém gió với đồng nghiệp phát thì phát hiện rằng mặc dù dùng react hook lâu nhưng anh em vẫn thấy bỡ ngỡ khi đến 1 số hook như useCallback. Nên mình quyết định làm 1 bài blog để tổng hợp lại kiến thức.

2. UseMemo

const memoizedValue = useMemo(() => function, dependencies);

Là một react hook trả về 1 memoized value và chỉ tính toán lại value khi dependencies thay đổi.
Cụ thể hơn là useMemo nhận 2 tham số: 1 là function, 2 là dependencies. useMemo sẽ trả về kết quả của việc thực hiện function và lưu vào bộ nhớ để sư dụng khi mà dependencies không thay đổi.
Ví dụ:

 const getArray = () => {
    // sort một mảng 100 phần tử, tốn tầm 2s để chạy
    return result = filterAndSortAndDoSomething(...);
  }

Nếu như thế này thì mõi lần re-render sẽ rất mất thời gian nên ta sẽ sửa lại

 const getArray = useMemo(() => {
    return result = filterAndSortAndDoSomething(...);
  }, []);

Vậy chúng khi nào thì dùng useMemo?
Khi bạn có những component nặng về render như đồ thị, biểu đồ, animation, xử lý logic,... mà bạn không muôn những phần nặng về render đấy phải render lại khi không có sự thay đổi gì.
Nếu chúng ta dùng useMemo cho tất cả function thì là điều không nên vì useMemo lưu kết quả của việc thực thi hàm vào bộ nhớ, điều này có thể sẽ lớn dần lên và có thể gây ảnh hưởng đến performance

3. UseCallback

const memoizedCallback = () => function, dependencies);

Là một react hook trả về 1 memoized callback và chỉ tạo ra callback mới khi dependencies thay đổi.
Ví dụ:

const App = () => {
 const hanldeClick = () => console.log('Clicked!');
  return (<MyOtherComponent func={hanldeClick} /> );
}

Mỗi lần App re-render thì sẽ chạy lại 2 dòng ở trên và nếu chạy vào const hanldeClick = () => console.log('Clicked!'); thì nó sẽ tạo 1 cái function mới handleChartTypeChange. Nó sẽ làm cho cái props của MyOtherComponent 1 props mới và dẫn đến MyOtherComponent bị render lại. Vậy để ngăn chặn điều đó chúng ta sử dụng useCallback.

const App = () => {
 const hanldeClick = useCallback(() => console.log('Clicked!'), []);
  return (<MyOtherComponent func={hanldeClick} /> );
}

Trường hợp khi nào dùng useCallback cũng khá là giống như useMemo.

4. Tài liệu tham khảo