Khi React nói đến Re-render, nó có nghĩa là ba điều

Khi bạn gọi setState, React không chỉ cập nhật DOM. Nó thực hiện ba giai đoạn riêng biệt theo một trình tự. Hầu hết các nhà phát triển đều nhầm lẫn giữa các giai đoạn này. Hiểu được sự khác biệt sẽ giúp bạn khắc phục các vấn đề về hiệu năng.

Ba giai đoạn:

• Render: React gọi hàm component của bạn. • Reconcile: React so sánh kết quả đầu ra mới với kết quả cũ. • Commit: React áp dụng các thay đổi vào DOM.

  1. Giai đoạn Render

React chạy hàm của bạn. Nó sử dụng các props hiện tại. Hàm trả về JSX. JSX này chỉ là một danh sách các đối tượng JavaScript. Mọi người gọi đây là virtual DOM. Nó không phải là DOM thật. Nó là một bản mô tả về việc UI sẽ trông như thế nào. Chưa có gì xuất hiện trên màn hình cả. Giai đoạn này thuần túy là toán học và logic.

  1. Giai đoạn Reconcile

React giữ cây (tree) cũ và cây mới. Nó tìm kiếm sự khác biệt giữa chúng. Nếu kiểu của một phần tử thay đổi, React sẽ thay thế toàn bộ cây. Nếu chỉ có props thay đổi, React sẽ cập nhật chúng. Đây là lúc các key trở nên quan trọng. key giúp React khớp các mục trong một danh sách dựa trên định danh thay vì vị trí. Giai đoạn này tạo ra một danh sách các bước tối thiểu cần thiết để cập nhật DOM.

  1. Giai đoạn Commit

React lấy danh sách các thay đổi và tác động vào DOM thật. Nó tạo ra các node mới và xóa bỏ các node cũ. Đây là lúc người dùng nhìn thấy những thay đổi trên màn hình. Sau đó, trình duyệt sẽ vẽ (paint) màn hình. Tiếp theo, useEffect sẽ chạy.

Những quan niệm sai lầm phổ biến:

• Một lần re-render không phải lúc nào cũng làm thay đổi DOM. Nếu kết quả đầu ra giống nhau, React sẽ không làm gì trong giai đoạn commit. • React.memo bỏ qua việc gọi hàm. Nó không bỏ qua việc cập nhật DOM. • Props không trực tiếp kích hoạt re-render. Việc một component cha re-render sẽ kích hoạt component con. Sự thay đổi prop chỉ là một kết quả.

Cách khắc phục hiệu năng:

Nếu hàm của bạn chạy chậm, bạn đang gặp vấn đề ở giai đoạn Render. Hãy đưa các tác vụ nặng ra khỏi hàm hoặc sử dụng memoization.

Nếu React xây dựng lại các danh sách khổng lồ, bạn đang gặp vấn đề ở giai đoạn Reconcile. Hãy kiểm tra các key của bạn.

Nếu DOM cập nhật quá nhiều, bạn đang gặp vấn đề ở giai đoạn Commit. Hãy sử dụng virtualization hoặc thay đổi cấu trúc của bạn.

React 19 và React Compiler hiện đã xử lý phần lớn các công việc này cho bạn. Nhưng việc hiểu rõ các giai đoạn này sẽ giúp bạn debug tốt hơn.

Nguồn: https://dev.to/dip_032d2fe1959e1990ddbb1/when-react-says-re-render-it-actually-means-three-things-11d7