Những điều cần lưu ý và sử dụng Hook trong React (Phần 4)

Bài đăng này đã không được cập nhật trong 3 năm

IV. So sánh useCallback() và useMemo().

Hôm nay mình sẽ tìm hiểu về 2 cái hooks. Và cuối bài mình sẽ giúp các bạn là có nên sử dụng useCallback() và useMemo() không nhé.

1. useCallback() là gì?

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 dêpndencies thay đổi .

Nhận vào 2 tham số : 1 function, 2 dependencies.
Return memoized callback
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 ,

Ví dụ :

// Mỗi lần App re-render 
// --> Tạo ra một function mới 
// --> Chảt bị re-render 
function App() {
    const handleChartTypeChange = (type) => {}
    return <Chart onTypeChange={handleChartTypeChange} />;
}

Ở vị dụ trên, ta có cái chart render rất là nặng . Bên trong có 1 cái hàm đó là onTypeChange nghĩa là người dùng chọn 1 cái loại chart khác thì chúng ta có thể tính toán, xử lý dử liệu để cập nhật lại nạp cho render.

Mỗi lần cái App bị rerender thì nó sẽ chạy lại 2 dòng code trên và nếu nó chạy vào cái này const handleChartTypeChange = (type) => {} thì nó sẽ tạo 1 cái function mới handleChartTypeChange. Nó sẽ làm cho cái props của thằng Chart là 1 props mới , cho nên cái Chart này nó re-render. Vậy để khắc phục việc này chúng ta sử dụng 1 cái useCallback() để hạn chế việc re-render.

// Mỗi lần App re-render
// --> nhờ có useCallback() nó chỉ tạo function một lần đầu
// --> Nên Chart ko bị re-render.
function App() {
    const handleChartTypeChange = useCallback((type) => {}, [])
    return <Chart onTypeChange={handleChartTypeChange} />;
}

Vậy ý nghĩa của useCallback trong trường hợp này là gì ? Nó sẽ tạo ra function (type) => {} đúng 1 lần đầu tiên , nó luôn luôn trả về dúng 1 function củ. cho nên cái props nó không đổi và không bị re-render lại .

2. useMemo() là gì?

Là một react hooks giúp mình tạo ra một memoized value và chỉ tính toán ra value mới khi dependencies thay đổi.

Nhận vào 2 tham số: 1 là function, 2 là dependencies.
Return memoized value
Chỉ tính toán value mới khi dependencies thay đổi.
Nếu dùng empty dependencies thì không bao giờ tính toán lại value mới.

// Mỗi lần App re-render
// --> tạo ra một mảng mới
// --> Chart bị re-render do props thay đổi
function App() {
    const data = [{}, {}, {}];
    return <Chart data={data} />;
}

tương tự ở trên , mỗi lần re-render thì nó sẽ tạo 1 cái data mới, nhưng data mới và củ khi so sánh chắc chắn sẽ khác nhau, cho nên khi re-render thì cái Chart sẽ render lại. Và giải pháp là dùng useMemo()

Nó giống với useCallback nhưng ở đây , useMemo thì trả về value còn useCallback thì callback về function.

// Mỗi lần App re-render
// --> nhờ có useMemo() nó chỉ tạo ra cái mảng 1 lần đầu
// --> Nên Chart ko bị re-render.
function App() {
    const data = useMemo(() => [{}, {}, {}], [])
    return <Chart data={data} />;
}

3. So sánh useCallback() vs useMemo()

GIỐNG NHAU

Đều áp dụng kĩ thuật memoization. Đều nhận vào 2 tham số: function và dependencies. Đều là react hooks, dùng cho functional component. Dùng để hạn chế những lần re-render dư thừa (micro improvements).