React.memo trong React JS: Tối ưu hóa Hiệu Năng Component

React.memo là một Higher-Order Component (HOC) được sử dụng để ghi nhớ (memoize) kết quả render của một component dựa trên props của nó. Nếu props không thay đổi giữa các lần render, React sẽ sử dụng kết quả render trước đó mà không cần render lại component, giúp tối ưu hóa hiệu năng.

Cách sử dụng React.memo

Dưới đây là một ví dụ đơn giản minh họa cách sử dụng React.memo:

import React from 'react';							
								
// Component thông thường							
const ChildComponent = ({ name }) => {							
	  console.log("ChildComponent render");							
	  return <p>Hello, {name}!</p>;							
};							
								
// Sử dụng React.memo để tối ưu hóa							
const MemoizedChild = React.memo(ChildComponent);							
								
const ParentComponent = () => {							
	  const [count, setCount] = React.useState(0);							
								
	  return (							
	    <div>							
	      <button onClick={() => setCount(count + 1)}>Tăng Count: {count}</button>							
	      <MemoizedChild name="React Developer" />							
	    </div>							
	  );							
};							
								
export default ParentComponent;							

Cách hoạt động:

1. Component không được memo hóa:

• Nếu ChildComponent không được bọc trong React.memo, mỗi lần ParentComponent render lại (do setCount), ChildComponent cũng sẽ render, dù props của nó không thay đổi.

2. Component được memo hóa:

• Khi sử dụng React.memo, ChildComponent chỉ render lại nếu props của nó thay đổi.

Kiểm soát so sánh props với hàm tùy chỉnh:

Bạn có thể cung cấp một hàm so sánh tùy chỉnh để kiểm tra sự thay đổi của props.

const MemoizedChild = React.memo(ChildComponent, (prevProps, nextProps) => {							
	  return prevProps.name === nextProps.name; // Chỉ render lại khi "name" thay đổi							
});							

Khi nào nên sử dụng React.memo?

• Khi component con phụ thuộc vào props và không thường xuyên thay đổi.
• Khi việc render lại không cần thiết gây ảnh hưởng lớn đến hiệu năng.

Lưu ý:

1. React.memo chỉ tối ưu hóa cho functional components.
2. Nếu bạn có một logic phức tạp để so sánh props, việc sử dụng React.memo có thể gây tác động ngược đến hiệu năng.

Tóm lại, React.memo là một công cụ mạnh mẽ để tối ưu hóa hiệu năng ứng dụng React. Tuy nhiên, chỉ nên sử dụng khi thực sự cần thiết và sau khi đã hiểu rõ luồng render của ứng dụng.