Re-render có đồng nghĩa với việc DOM bị cập nhật không? Phân biệt render phase và commit phase.

Không. Một lần cập nhật đi qua hai giai đoạn tách biệt:

• Render phase — React gọi hàm component, thu được cây element mới, rồi so sánh với cây trước đó. Giai đoạn này chỉ tính toán, không chạm DOM, có thể bị React huỷ giữa chừng và chạy lại (concurrent rendering, useTransition). Vì vậy hàm component phải là pure function: không mutate biến ngoài, không gọi API trong thân hàm.
• Commit phase — React ghi phần khác biệt vào DOM thật, cập nhật ref, rồi chạy các effect. Nếu kết quả render giống hệt lần trước, React không đụng gì tới DOM.

function Clock({ time }) {
  // render phase: chỉ dựng mô tả element
  return <h1>{time}</h1>
}
// commit phase: React ghi text node mới, chỉ vậy thôi

Hệ quả thực tế khi debug: thấy component "render 200 lần" trong Profiler chưa chắc là vấn đề — cần xem thời gian render mỗi lần và số node DOM thực sự bị ghi lại.

Phần tốn kém nằm ở tính toán nặng trong render và ở layout/paint của trình duyệt, không ở việc hàm được gọi lại.