Tối Ưu Hiệu Năng React với React.memo: Ví Dụ Thực Tế

Khi làm việc với React, chúng ta thường nghe về các hook như useMemo, useCallback, và React.memo. Nhưng chính xác thì React.memo làm gì và khi nào nên sử dụng nó? Hãy cùng khám phá qua một ví dụ thực tế trong kịch bản từ Parent → Child.

Giới thiệu

Trong phát triển ứng dụng React, hiệu năng là một yếu tố quan trọng quyết định trải nghiệm người dùng. Một trong những vấn đề phổ biến mà các nhà phát triển gặp phải là các component con bị re-render không cần thiết, ảnh hưởng đến hiệu suất tổng thể của ứng dụng. Để giải quyết vấn đề này, React.memo là một công cụ hữu ích mà bạn nên biết.

Cấu trúc ví dụ

🔴 Không có React.memo

Giả sử chúng ta có một cấu trúc đơn giản như sau:

• Component Parent có hai trạng thái: count và text.
• Component Child luôn nhận một prop tĩnh: value="Static Prop".

import React, { useState } from 'react';

const Child = ({ value }) => {
    console.log('Child re-rendered');
    return <div>{value}</div>;
};

const Parent = () => {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('Hello');

    return (
        <div>
            <h1>{text}</h1>
            <button onClick={() => setCount(count + 1)}>Increase Count</button>
            <Child value="Static Prop" />
        </div>
    );
};

export default Parent;

👉 Vấn đề:

Khi bạn nhấn nút Increase Count, component Child sẽ re-render không cần thiết. Bạn có thể xác nhận điều này bằng cách kiểm tra log trong console.

🟢 Với React.memo

Bây giờ, hãy bọc component Child với React.memo.

const MemoizedChild = React.memo(Child);

Điều này cho React biết:

"Chỉ re-render component này nếu các props của nó thực sự thay đổi."

👉 Bây giờ, khi bạn nhấn nút Increase Count,

• Component Parent sẽ re-render (như mong đợi)
• Nhưng component Child không re-render, vì props của nó vẫn giữ nguyên.

🎉 Kiểm tra console — bạn sẽ thấy rằng Child chỉ render một lần, không quan trọng số lần bạn tăng count.

✅ Lợi ích của React.memo

1. Ngăn chặn re-renders không cần thiết cho các component con.
2. Cải thiện hiệu suất trong các cấu trúc component lớn.
3. Hoạt động tốt nhất với các component thuần túy (output chỉ phụ thuộc vào props).

⚡ Sự khác biệt chính (React.memo vs useMemo)

• useMemo → Ghi nhớ các giá trị/tính toán bên trong một component.
• React.memo → Ghi nhớ toàn bộ component để bỏ qua việc re-render khi props không thay đổi.

🚀 Kết luận

Nếu bạn đang truyền các props tĩnh (hoặc props hiếm khi thay đổi) cho các component con, React.memo là một cách đơn giản và mạnh mẽ để tránh các re-renders lãng phí.

💡 Bạn thì sao? Bạn có sử dụng React.memo trong các dự án React của mình không? Bạn đã bao giờ gặp vấn đề re-render không cần thiết chưa? Hãy cùng thảo luận!

Các thực hành tốt nhất khi sử dụng React.memo

• Sử dụng cho các component thuần túy: Đảm bảo rằng component không phụ thuộc vào trạng thái bên ngoài.
• Kiểm tra props: Nếu props có thể thay đổi thường xuyên, hãy cân nhắc sử dụng React.memo.
• Kết hợp với useCallback: Kết hợp React.memo với useCallback để tối ưu hóa hiệu suất.

Cạm bẫy thường gặp

• Quá lạm dụng: Đừng sử dụng React.memo cho mọi component, chỉ những component có khả năng re-render cao.
• Props phức tạp: Nếu props là một object hoặc array, hãy nhớ rằng React sẽ chỉ kiểm tra tham chiếu, không kiểm tra nội dung.

Mẹo về hiệu suất

• Sử dụng Profiler: Sử dụng React Profiler để xác định các component nào đang re-render không cần thiết.
• Tối ưu hóa render: Sắp xếp lại cấu trúc component để giảm thiểu số lần re-render.

Giải quyết sự cố

Nếu bạn nhận thấy rằng Child vẫn re-render mặc dù đã sử dụng React.memo, hãy kiểm tra:

• Các props được truyền vào có thay đổi về tham chiếu không.
• Component có phụ thuộc vào các state ngoài không.

FAQ

1. React.memo có hỗ trợ cho các component có state không?

• Không, React.memo chủ yếu được sử dụng cho các component thuần túy không có state nội bộ.

2. Có cách nào khác để tối ưu hóa hiệu suất không?

• Có, bạn có thể sử dụng useMemo, useCallback, và các phương pháp khác để tối ưu hóa hiệu suất.

3. React.memo có ảnh hưởng đến thời gian khởi động ứng dụng không?

• Có, sử dụng quá nhiều React.memo có thể làm tăng thời gian khởi động ban đầu của ứng dụng.

Hãy thử áp dụng React.memo trong dự án của bạn và xem sự khác biệt mà nó mang lại cho hiệu suất ứng dụng của bạn!