[Advanced React] Hiểu rõ Render Phase và Commit Phase để tối ưu hiệu năng React

Khi làm việc với React, bạn có thường xuyên nghe đến các khái niệm như "Virtual DOM", "re-render" hay "state"? Đó là những mảnh ghép bề mặt của một cơ chế mạnh mẽ và tinh vi hơn nhiều. Để thực sự trở thành một lập trình viên React chuyên nghiệp, bạn cần phải đào sâu hơn, vào tận "nhà máy" của React và hiểu rõ hai giai đoạn cốt lõi vận hành mọi thứ: Render Phase và Commit Phase.

Hiểu được hai giai đoạn này không chỉ giúp bạn viết code hiệu quả hơn, tối ưu hơn mà còn là chìa khóa để gỡ lỗi và chinh phục những tính năng nâng cao như Concurrent Mode.

Hãy cùng nhau khám phá bí mật đằng sau sự kỳ diệu của React!

🎨 Render Phase: Người kiến trúc sư lập kế hoạch

Hãy tưởng tượng bạn đang xây một ngôi nhà. Trước khi đặt viên gạch đầu tiên, người kiến trúc sư phải vẽ ra một bản thiết kế chi tiết. Họ tính toán, so sánh với bản thiết kế cũ, và xác định chính xác những gì cần thay đổi, thêm vào hay phá đi.

Render Phase trong React chính là giai đoạn "lập kế hoạch" này.

Trong giai đoạn này, React thực hiện những công việc "phía sau cánh gà" mà không làm thay đổi giao diện người dùng thực tế. Cụ thể, React sẽ:

1. Gọi component của bạn: Khi state hoặc props thay đổi, React sẽ gọi hàm của functional component (hoặc phương thức render() của class component) để xem bạn muốn UI trông như thế nào với dữ liệu mới.
2. Tạo Virtual DOM mới: Kết quả trả về từ component (là JSX) được dùng để xây dựng một cây đối tượng JavaScript, gọi là Virtual DOM (DOM ảo). Nó là một bản đại diện nhẹ nhàng cho DOM thật của trình duyệt.
3. So Sánh (Diffing): React sẽ so sánh cây Virtual DOM mới này với cây Virtual DOM của lần render trước đó. Thuật toán so sánh này (gọi là "Reconciliation" hay "Diffing") cực kỳ hiệu quả, giúp React tìm ra những thay đổi tối thiểu cần thực hiện trên giao diện.

Đặc điểm của Render Phase

Đây là phần quan trọng nhất bạn cần nhớ:

• An toàn & Trong sạch (Pure): Giai đoạn này phải là một "hàm thuần túy". Nó chỉ tính toán và không gây ra bất kỳ "tác dụng phụ" (side effects) nào.
• Có thể bị gián đoạn: Đây là một "siêu năng lực" của React! React có thể bắt đầu Render Phase, tạm dừng nó để xử lý một việc quan trọng hơn (như khi người dùng gõ phím), và sau đó tiếp tục hoặc thậm chí hủy bỏ và bắt đầu lại từ đầu. Chính khả năng này đã mở đường cho tính năng Concurrent Mode, giúp ứng dụng không bao giờ bị "đơ" hay "lag".

Quy Tắc Bất Di Bất Dịch: KHÔNG BAO GIỜ thực hiện các tác vụ có side effects trong Render Phase. Điều này bao gồm:

• Gọi API.
• Thay đổi DOM trực tiếp.
• Thiết lập subscriptions (như setTimeout, setInterval).
• Thay đổi state một cách trực tiếp (mutation).

Tại sao? Vì Render Phase có thể được gọi nhiều lần trước khi commit, việc đặt side effects ở đây sẽ dẫn đến các lệnh gọi API thừa thãi, dữ liệu không nhất quán và vô số lỗi khó lường.

🏗️ Commit Phase: Người thợ xây thi công

Sau khi người kiến trúc sư hoàn thành bản thiết kế chi tiết và đánh dấu tất cả những thay đổi cần thiết, bản thiết kế đó sẽ được chuyển cho đội thợ xây. Đội thợ xây sẽ đọc bản thiết kế và áp dụng chính xác những thay đổi đó vào công trình thực tế.

Commit Phase chính là giai đoạn "thi công" này.

Đây là lúc React lấy danh sách những thay đổi đã tính toán được từ Render Phase và áp dụng chúng vào DOM thật của trình duyệt.

Trong giai đoạn này, React sẽ:

1. Cập nhật DOM: React duyệt qua danh sách thay đổi và thực hiện các thao tác DOM cần thiết: thêm một node, xóa một node, hoặc cập nhật thuộc tính của một node. Đây chính là lúc người dùng nhìn thấy sự thay đổi trên màn hình.
2. Chạy các Lifecycle Methods/Hooks: Sau khi DOM đã được cập nhật, React sẽ chạy các hooks quan trọng liên quan đến side effects và DOM, cụ thể là useLayoutEffect và useEffect.

Đặc điểm của Commit Phase

Đây cũng là phần quan trọng bạn nên nhớ:

• Không thể bị gián đoạn: Một khi đã bắt đầu, Commit Phase sẽ chạy một mạch cho đến khi hoàn thành. Việc này đảm bảo rằng DOM luôn ở trạng thái nhất quán, người dùng sẽ không bao giờ thấy một giao diện bị cập nhật nửa vời.
• Là nơi dành cho Side Effects: Đây chính là thời điểm an toàn và thích hợp để thực hiện các tác dụng phụ.
  • useLayoutEffect: Chạy đồng bộ ngay sau khi React cập nhật DOM nhưng trước khi trình duyệt vẽ lại màn hình (paint). Rất hữu ích khi bạn cần đọc kích thước hoặc vị trí của một phần tử DOM ngay sau khi nó thay đổi để thực hiện một cập nhật khác.
  • useEffect: Chạy bất đồng bộ sau khi Commit Phase hoàn tất và trình duyệt đã vẽ lại giao diện. Đây là nơi lý tưởng cho hầu hết các side effects như gọi API, dọn dẹp subscriptions, v.v.

🧠 Tổng kết: Luồng hoạt động hoàn chỉnh

Hãy tóm tắt lại toàn bộ quá trình từ A đến Z:

1. Trigger: Một sự kiện xảy ra (ví dụ: người dùng click vào nút, setState được gọi).
2. Scheduling: React lên lịch cho một lần cập nhật.
3. Render Phase:
   • React bắt đầu công việc tính toán trong bộ nhớ.
   • Nó gọi các component liên quan và tạo ra một Virtual DOM mới.
   • So sánh Virtual DOM mới và cũ để tìm ra sự khác biệt.
   • (Giai đoạn này có thể bị tạm dừng hoặc hủy bỏ).
4. Commit Phase:
   • React áp dụng những thay đổi đã tìm được vào DOM thật.
   • Người dùng thấy giao diện được cập nhật.
   • (Giai đoạn này không thể bị gián đoạn).
5. Side Effects:
   • useLayoutEffect được chạy.
   • Trình duyệt "vẽ" (paint) các thay đổi lên màn hình.
   • useEffect được chạy.

Tại sao việc phân biệt này lại quan trọng?

Việc hiểu rõ sự tách biệt giữa Render và Commit là nền tảng để viết code React đúng đắn và hiệu quả:

• Tối ưu hóa hiệu năng: Bạn biết rằng Render Phase là nơi cần giữ cho logic thật nhanh và "thuần khiết", tránh các tác vụ nặng nề. Mọi side effects nên được đặt trong useEffect để không làm chậm quá trình render.
• Tránh lỗi: Bạn sẽ không bao giờ mắc phải lỗi gọi API liên tục mỗi lần re-render vì bạn biết rằng đó là việc của Commit Phase (thông qua useEffect).
• Sẵn Sàng cho tương lai: Đây là kiến thức cốt lõi để bạn có thể tận dụng các tính năng nâng cao như useTransition, useDeferredValue và toàn bộ hệ sinh thái Concurrent React, giúp xây dựng những ứng dụng web phức tạp nhưng vẫn mượt mà đến không ngờ.

Hy vọng qua bài viết này, bạn không chỉ hiểu được định nghĩa của Render Phase và Commit Phase mà còn cảm nhận được sự tinh tế trong kiến trúc của React. Lần tới, khi component của bạn re-render, hãy hình dung về người kiến trúc sư đang miệt mài lập kế hoạch và người thợ xây đang cẩn trọng thi công - bạn sẽ thấy React trở nên gần gũi và dễ hiểu hơn rất nhiều!