Re-render không cần thiết: Bí kíp giúp ứng dụng React của bạn "nhanh như chớp"!

Giải mã Re-render: Khi nào ứng dụng React của bạn "vẽ lại" giao diện?

Trong thế giới phát triển giao diện người dùng hiện đại, đặc biệt với các thư viện như React, khái niệm "re-render" không còn xa lạ. Về cơ bản, mỗi khi state hoặc props của một component thay đổi, React sẽ kích hoạt quá trình re-render để cập nhật giao diện người dùng cho phù hợp. Điều này giúp ứng dụng của chúng ta luôn hiển thị dữ liệu mới nhất.

Tuy nhiên, trong một cây component lớn và phức tạp, việc re-render có thể trở thành con dao hai lưỡi. Một thay đổi nhỏ ở component cha có thể vô tình khiến hàng loạt component con cháu của nó re-render theo, ngay cả khi chúng không có bất kỳ dữ liệu mới nào để hiển thị. Điều này dẫn đến hiệu năng giảm sút, ứng dụng chậm chạp và trải nghiệm người dùng không tối ưu. Vậy làm thế nào để chúng ta có thể kiểm soát và tránh những lần re-render không cần thiết này?

Những "kẻ thù" gây Re-render không đáng có

Trước khi đi sâu vào các giải pháp, hãy cùng điểm qua một số nguyên nhân phổ biến khiến ứng dụng của bạn re-render nhiều hơn mức cần thiết:

• Props là object/array mới mỗi lần render: Khi bạn truyền một object hoặc array được tạo mới trong quá trình render (ví dụ: <Child data={{ id: 1 }} />), dù giá trị bên trong có giống hệt nhau, React vẫn coi đó là một prop mới và kích hoạt re-render cho component con.
• Function props mới: Tương tự, việc truyền một hàm ẩn danh (inline function) như <Child onClick={() => doSomething()} /> sẽ tạo ra một instance hàm mới mỗi lần component cha re-render, dẫn đến component con re-render theo.
• Thay đổi Context API: Một thay đổi nhỏ trong giá trị của Context Provider sẽ khiến TẤT CẢ các component con đang tiêu thụ Context đó re-render, bất kể chúng có sử dụng giá trị đã thay đổi hay không.
• State của component cha thay đổi: Khi state của một component cha thay đổi, mặc định tất cả các component con của nó sẽ re-render, ngay cả khi props của chúng không hề thay đổi.

Bí kíp tối ưu: Khiến React thông minh hơn

May mắn thay, React cung cấp cho chúng ta nhiều công cụ mạnh mẽ để kiểm soát và tối ưu quá trình re-render. Dưới đây là những kỹ thuật bạn cần nắm vững:

1. Sử dụng React.memo (cho Functional Components)

React.memo là một Higher-Order Component (HOC) giúp bạn "ghi nhớ" (memoize) kết quả render của một functional component. Nó sẽ chỉ re-render component đó nếu các props của nó thay đổi. Mặc định, React.memo thực hiện so sánh nông (shallow comparison) các props.