Reconciliation và Fiber trong React hoạt động thế nào?

Hai heuristic giúp diff chạy O(n) thay vì O(n³):

• Element khác type ở cùng vị trí: unmount cây con cũ, mount cây mới (mất state).
• Cùng type: giữ instance, chỉ cập nhật props; với list thì dùng key để khớp phần tử.

Fiber là một node trong cây làm việc (linked list với child, sibling, return) đại diện cho một component. React giữ hai cây: current (đang hiển thị) và workInProgress (đang tính), rồi hoán đổi khi commit.

Pha	Đặc điểm
Render	Gọi component, diff, tính effect. Thuần, có thể bị ngắt/bỏ/chạy lại
Commit	Cập nhật DOM, chạy layout effect. Đồng bộ, không ngắt được

function App({ admin }) {
  // Đổi admin: type đổi -> toàn bộ cây Form bị remount, mất state
  return admin ? <AdminForm /> : <UserForm />;
}