useMemo và useCallback trong React

React cung cấp hai hooks mạnh mẽ là useMemo và useCallback để tối ưu hóa hiệu năng của ứng dụng, đặc biệt khi làm việc với các component lớn hoặc có logic tính toán phức tạp.

1. useMemo

Mục đích:

• Ghi nhớ (memoize) giá trị tính toán, chỉ tính lại khi các dependencies thay đổi. Điều này giúp tránh việc tính toán không cần thiết.

Cú pháp:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);		

• computeExpensiveValue: Hàm trả về giá trị được ghi nhớ.
• [a, b]: Danh sách các dependencies, chỉ khi chúng thay đổi thì computeExpensiveValue mới được gọi lại.

Ví dụ:

import React, { useMemo, useState } from 'react';		
			
const Example = () => {		
	  const [count, setCount] = useState(0);		
	  const [text, setText] = useState('');		
			
	  const expensiveCalculation = useMemo(() => {		
	    console.log("Tính toán phức tạp...");		
	    return count * 2; // Ví dụ logic phức tạp		
	  }, [count]);		
			
	  return (		
	    <div>		
	      <p>Kết quả tính toán: {expensiveCalculation}</p>		
	      <button onClick={() => setCount(count + 1)}>Tăng Count: {count}</button>		
	      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Nhập text" />		
	    </div>		
	  );		
};		
			
export default Example;		

Khi nào dùng useMemo?

• Khi bạn có các phép tính phức tạp hoặc tốn kém tài nguyên.
• Khi muốn tối ưu hóa các render không cần thiết.

2. useCallback

Mục đích:

• Ghi nhớ (memoize) một hàm để đảm bảo rằng nó không được tạo lại trong mỗi lần render, trừ khi các dependencies thay đổi.
• Rất hữu ích khi truyền hàm xuống các component con được bọc bởi React.memo.

Cú pháp:

const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);		

• doSomething: Hàm được ghi nhớ.
• [a, b]: Danh sách các dependencies.

Ví dụ:

import React, { useState, useCallback } from 'react';		
			
const ChildComponent = React.memo(({ handleClick }) => {		
	  console.log("Child render");		
	  return <button onClick={handleClick}>Click me</button>;		
});		
			
const Example = () => {		
	  const [count, setCount] = useState(0);		
			
	  const handleClick = useCallback(() => {		
	    console.log("Button clicked");		
	  }, []); // Hàm không thay đổi qua các render		
			
	  return (		
	    <div>		
	      <button onClick={() => setCount(count + 1)}>Tăng Count: {count}</button>		
	      <ChildComponent handleClick={handleClick} />		
	    </div>		
	  );		
};		
			
export default Example;		

Khi nào dùng useCallback?

• Khi bạn truyền một hàm xuống component con được bọc bởi React.memo.
• Khi muốn tránh tạo mới các hàm không cần thiết qua mỗi lần render.

So sánh useMemo và useCallback

Lưu ý:

1. Không nên lạm dụng: Sử dụng useMemo và useCallback chỉ khi hiệu năng bị ảnh hưởng.
2. Kiểm tra hiệu năng trước: Hãy kiểm tra ứng dụng của bạn với công cụ như React DevTools để xác định xem liệu việc tối ưu hóa có thực sự cần thiết.

Tóm lại, useMemo và useCallback là các công cụ tối ưu hiệu năng tuyệt vời trong React, nhưng cần sử dụng chúng một cách thông minh để tránh phức tạp hóa mã nguồn.