Trong React Js, memo là một hàm được sử dụng để tối ưu hiệu suất của ứng dụng bằng cách tránh việc render lại các component không cần thiết. Khi sử dụng memo, component sẽ chỉ được render lại khi các prop của nó thay đổi. Memo là một trong những công cụ quan trọng để cải thiện hiệu suất của ứng dụng React.
Sử dụng memo trong React Js
Để sử dụng memo trong React Js, ta cần import React từ thư viện và sử dụng hàm React.memo(). memo là một Higher-order Component (HOC) giúp tối ưu hóa performance cho component bằng cách memoization, tức là lưu lại giá trị của input và output để sử dụng lại trong các lần render tiếp theo nếu các giá trị input không thay đổi.
Ví dụ:
import React from 'react';
const MyComponent = React.memo((props) => {
return (
<div>
{props.text}
</div>
);
});
export default MyComponent;
Trong đoạn mã trên, ta sử dụng memo để bao bọc component MyComponent. Nếu giá trị của props không thay đổi, component sẽ không được render lại, tối ưu hóa performance cho ứng dụng.
Lưu ý rằng, memo chỉ có tác dụng nếu input của component là các giá trị không thay đổi, ví dụ như props, state. Nếu component có input thay đổi liên tục, không nên sử dụng memo để tối ưu hóa performance.
Ngoài ra, ta cũng có thể sử dụng React.memo() kết hợp với useCallback() để tối ưu hóa performance cho các callback function trong component.
Ví dụ đơn giản về memo
import React, { memo } from "react";
const MyComponent = memo(({ name, age }) => {
console.log("Render MyComponent");
return (
<div>
<h2><span class="ez-toc-section" id="Name_name"></span>Name: {name}<span class="ez-toc-section-end"></span></h2>
<h3><span class="ez-toc-section" id="Age_age"></span>Age: {age}<span class="ez-toc-section-end"></span></h3>
</div>
);
});
export default function App() {
const [person, setPerson] = React.useState({ name: "John", age: 30 });
const handleClick = () => {
setPerson({ name: "Mike", age: 25 });
};
return (
<div>
<MyComponent name={person.name} age={person.age} />
<button onClick={handleClick}>Update</button>
</div>
);
}
Trong ví dụ này, MyComponent sử dụng memo để tối ưu performance khi props của nó không thay đổi. Khi props thay đổi, MyComponent sẽ được render lại. Trong hàm handleClick, chúng ta cập nhật props của MyComponent, nhưng vì chúng ta sử dụng memo, chỉ có MyComponent được render lại, các component khác vẫn giữ nguyên.
Khi chạy ví dụ trên, console sẽ in ra dòng “Render MyComponent” mỗi khi MyComponent được render lại, và khi click vào nút “Update”, MyComponent chỉ được render lại một lần.
Kết luận và bài viết có liên quan
Bài viết có liên quan: Tìm hiểu về useCallback trong React Js Tìm hiểu useDispatch trong Redux
