Tối ưu hóa react re-render
Khi nói về hiệu suất của React, có hai giai đoạn chính mà chúng ta cần quan tâm:
initial render - xảy ra khi một thành phần lần đầu tiên xuất hiện trên màn hình.
re-render - kết xuất lại của một thành phần đã có trên màn hình.
Trong bài viết này chúng ta sẽ tập chúng vào giai đoạn re-render trong react.
Re-render cần thiết và không cần thiết
re-render cần thiết: re-render thành phần là nguồn của các thay đổi hoặc thành phần sử dụng trực tiếp thông tin mới. Ví dụ: nếu người dùng nhập vào trường đầu vào, thành phần quản lý trạng thái của nó cần tự cập nhật sau mỗi lần nhấn phím, tức là kết xuất lại.
re-render không cần thiết: re-render một thành phần được truyền qua ứng dụng thông qua các cơ chế kết xuất lại khác nhau do lỗi hoặc kiến trúc ứng dụng không hiệu quả. Ví dụ: nếu người dùng nhập vào trường nhập và toàn bộ trang hiển thị lại sau mỗi lần nhấn phím thì trang đó đã được hiển thị lại một cách không cần thiết.
Bản thân việc re-render không cần thiết không phải là vấn đề: React rất nhanh và thường có thể xử lý chúng mà người dùng không nhận thấy gì.
Tuy nhiên, nếu quá trình re-render diễn ra quá thường xuyên và/hoặc trên các thành phần rất nặng, điều này có thể khiến trải nghiệm người dùng bị “lag”, độ trễ rõ rệt trong mỗi lần tương tác hoặc thậm chí ứng dụng hoàn toàn không phản hồi.
Khi nào React re-render?
Về cơ bản khi trạng thái component thay đổi, componen đó sẽ re-render và các component con, cháu của chúng cũng sẽ re-render. Ngoài ra còn một số lý do như hooks, contexts thay đổi thì component cũng sẽ re-render, tuy nhiên đây cũng chỉ là từ bản chất trạng thái của component vì bản thân hooks và contexts đó chứa trạng thái.
Cách ngăn chặn re-render không cần thiết
Moving state down
Khi một component cha quản lý nhiều trạng thái, và có một số trạng thái chỉ sử dụng trong 1 hoặc 1 số compoent nhất định ta nên di chuyển trạng thái đó vào component con cần thiết thay vì để trạng thái cho cả component cha.
Ta có ví dụ ban đầu như sau:
Before ❌
Ở đây ta có thể thấy là khi change state open Component sẽ re-render và các component con cháu của chúng cũng sẽ re-render lại ở đây ta có VerySlowComponent.
After ✅
Sau khi ta truyền state open vào component ButtonWithDialog ta thấy khi component ButtonWithDialog re-render thì compoent VerySlowComponent không còn re-render vì Component đâu có thay đổi state.
Children as props
Before ❌
Khi Component trigger re-render thì VerySlowComponent sẽ re-render
After ✅
Cũng khá giống trường hợp đầu tiên, ta sẽ đưa trạng thái vào những component con cháu cần thiết thay vào đưa chúng lên component cha. Ở đây hơi khác một chút là trạng thái được đưa vào wrap component.
Khi ComponentWithScroll trigger re-render thì VerySlowComponent sẽ không re-render. Vì VerySlowComponent là component con cháu của Component nên Component không re-render thì VerySlowComponent sẽ không re-render.
Component as props
Tương tự như trường hợp children as props. Khi ComponentWithScroll trigger re-render thì SlowComponent1 và SlowComponent2 sẽ không re-render. Vì SlowComponent1 và SlowComponent2 là component con cháu của Component nên Component không re-render thì VerySlowComponent sẽ không re-render.
React.memo
Before ❌
Khi component Parent trigger re-render thì component ChildMemo cũng sẽ re-render.
After ✅
React cung cấp API gọi là memo cho phép bạn ghi nhớ và bỏ qua việc hiển thị lại một thành phần khi props của nó không thay đổi bằng cách so sánh props cũ và props mới bằng Object.is
Nếu component con của bạn thường xuyên re-render và props it thay đổi thì có thể sử dụng React.memo là một lựa chọn tốt.
React.memo với Lists
Đối với các danh sách dài quá nhiều phần tử bạn cũng có thể áp dụng với React.memo
Hook useMemo/useCallback
Before ❌
After ✅
Ta sử dụng hook useMemo React cung cấp để ghi nhớ một giá trị, cụ thể ở đây là component SlowComponent.
Splitting data into chunks
Bạn có thể dùng cách chia nhỏ data nếu có thể để tránh re-render lại thành phần sử dụng contextAPI
Before ❌
After ✅
Bằng cách này, chỉ những đoạn context đã thay đổi mới hiển thị lại.
Tool test re-render
Bạn có thể thêm extension React Developer Tools để kiểm tra quá trình re-render.
Cách sử dụng: F12 -> Components -> View Settings -> Highlight updates when components render.
Kết luận
Qua bài viết này mình đã thực hiện cách Optimize performance react re-render. Mong nó hữu ích đối với bạn.
