Mọi thứ cần biết về Re-Render
Bạn có từng ngồi trước màn hình, gõ vào một ô nhập input, và nhận ra rằng mỗi ký tự xuất hiện với một độ trễ khó chịu không?
Tôi đoán câu trả lời là có. Và tôi cũng đoán rằng phản ứng đầu tiên của bạn là:
"Code của tôi không có vấn đề gì mà, đọc vẫn oke mà”
Code của bạn có thể hoạt động hoàn hảo về mặt logic, nhưng khi ứng dụng lớn lên, nó sẽ càng ngày càng chậm, vậy thủ phạm chính là gì?
React re-renders - một trong những khái niệm vừa đơn giản vừa phức tạp nhất mà mọi React developer cần hiểu cực kỳ rõ
Tại sao bạn nên đào sâu về re-renders?
Để trả lời câu hỏi này, hãy tưởng tượng React như một người họa sĩ đang vẽ lại căn phòng của bạn. Mỗi lần có thay đổi - dù chỉ là di chuyển một cái ghế - họa sĩ có thể:
- Thông minh: Chỉ vẽ lại cái ghế đó (re-render cần thiết)
- Hơi không thông minh cho lắm: Vẽ lại toàn bộ căn phòng (re-render không cần thiết)
React rất nhanh, nhưng nếu bạn bắt nó "vẽ lại toàn bộ căn phòng" sau mỗi thay đổi nhỏ, cuối cùng người dùng sẽ thấy ứng dụng của bạn lag. Và một khi họ cảm thấy lag, trải nghiệm đã bị phá hỏng.
Re-render cần thiết
Có những re-render được coi là cần thiết, vì component cần cập nhật vì dữ liệu của chính nó thay đổi.
Ví dụ: Bạn gõ vào một ô input. Component quản lý state của input đó phải re-render sau mỗi ký tự để hiển thị những gì bạn vừa gõ. Đây là điều hoàn toàn bình thường và cần thiết.
Re-render không cần thiết
Đây là re-render không cần thiết - component re-render mặc dù không có dữ liệu nào liên quan đến nó thay đổi.
Ví dụ: Bạn gõ vào một input field, nhưng toàn bộ trang web - bao gồm header, footer, sidebar - đều re-render theo. Đây là lãng phí.
React được tối ưu cực kỳ tốt. Hầu hết thời gian, những re-renders không cần thiết này này xảy ra quá nhanh đến nỗi người dùng không nhận ra. NHƯNG Nếu re-renders xảy ra quá thường xuyên hay trên các component quá "nặng”. Ứng dụng sẽ bắt đầu lag, phản hồi chậm, và dự án mất dần khách hàng
Dưới đây là 5 nguyên nhân phổ biến nhất chính khiến một component re-render, hãy nhớ thuộc lòng hoặc lưu blog này lại nha
Ngoài ra nếu muốn đào sâu hơn nữa, học các kiến thức chuyên sâu hơn từ giảng viên là chuyên gia có hơn 10 năm kinh nghiệm frontend và từng là kỹ sư tại Shopee Singapo thì bạn có thể tham khảo khoá học React Nâng Cao bên dưới của Sydexa nha!
Sydexa Team
1. State thay đổi - Nguồn gốc của mọi re-render
Đây là nguyên nhân phổ biến và dễ hiểu nhất
Khi bạn gọi hàm thay đổi giá trị count, component chứa nó sẽ bị rerender
Và đây là nguồn gốc - của mọi re-render. Tất cả những gì xảy ra sau đây đều là hệ quả.
2. Parent Re-renders - Hiệu ứng domino
Đây là nơi mọi thứ trở nên thú vị (và đôi khi nó không vui cho lắm =)) )
Re-render luôn đi "xuống" cây component (top-down). Re-render của con không bao giờ trigger re-render của cha trên cây
3. Context thay đổi - Sức mạnh đi kèm trách nhiệm
Context là một công cụ mạnh mẽ, nhưng cũng có thể là con dao hai lưỡi:
Tất cả components sử dụng Context sẽ re-render khi value thay đổi, ngay cả khi component chỉ dùng một phần của data
4. Khi Hooks thay đổi
Bất kể bạn có bao nhiêu custom hooks, tất cả đều "thuộc về" component sử dụng chúng. State hay Context thay đổi trong bất kỳ hook nào cũng sẽ khiến re-render của component chứa chúng.
5. Key Prop thay đổi
Đây là một trường hợp đặc biệt. key là một prop đặc biệt của React, không phải là prop thông thường, nó giúp React theo dõi component chứ không KHÔNG truyền vào component
Khi key prop thay đổi, React không re-render component mà thay vào đó, nó unmount component cũ và mount một component hoàn toàn mới. Khi key thay đổi, React hiểu rằng: "Đây là một component instance hoàn toàn khác nên loại bỏ cái cũ luôn".
Và điều nguy hiểm ở đây là: Unmount/remount tốn tài nguyên hơn hơn re-render bình thường. Component sẽ mất toàn bộ state, phải chạy lại tất cả logic khởi tạo, chạy lại useEffect cleanup và setup mới
Nên là trong list thì đừng dùng index làm key như này nha, sydexa đã có một video nói riêng về phần này đó
Và cuối cùng có phải là Props thay đổi gây Re-render không?
Đây là một trong những quan niệm sai lầm phổ biến nhất về React
Props thay đổi KHÔNG trực tiếp gây re-render bạn nhé
Hãy xem lại ví dụ sau:
Để count prop của Child thay đổi, Parent phải re-render trước (vì Parent quản lý state mà). Và khi Parent re-render, Child tự động re-render theo (theo quy tắc 2 mà mình vừa nói ở trên nha)
Props chỉ trở nên quan trọng khi bạn sử dụng memoization techniques như React.memo() , useMemo(), useCallback(). Khi đó, React mới so sánh props cũ và mới để quyết định có cần re-render hay không.
Re-renders không phải là kẻ thù. Chúng là cách React cập nhật UI để phản ánh state mới. Vấn đề chỉ nằm ở những re-renders không cần thiết xảy ra quá nhiều hoặc trên components quá nặng
Hãy thuộc nằm lòng 5 quy tắc trên để cải thiện chất lượng dự án của anh em nha
Ngoài ra nếu muốn đào sâu hơn nữa, học các kiến thức chuyên sâu thực tiễn hơn từ giảng viên là chuyên gia có hơn 10 năm kinh nghiệm frontend và từng là kỹ sư tại Shopee Singapo thì bạn có thể tham khảo khoá học React Nâng Cao bên dưới của Sydexa nha!
Sydexa Team
