Trigger → render → commit và component identity
Render gọi component để tính UI description; commit áp thay đổi DOM. Render có thể lặp, interrupt hoặc bị discard nên phải thuần và không gây side effect.
1. Trigger, render và commit
Initial root render hoặc state update trigger work; parent render thường khiến descendants được xét. React gọi component trong render phase, so element tree/type/key, rồi commit DOM và chạy layout/passive effects theo lifecycle.
trigger -> render calculation -> reconciliation -> commit DOM -> effects2. Purity và Strict Mode
Component không mutate object có trước, DOM, network hoặc global trong render. Strict Mode development cố ý gọi thêm render/effect lifecycle paths để lộ impurity và cleanup defects; đây không phải production “render bug” cần vô hiệu hóa.
- Tạo local values trong render là an toàn; mutate props/context/global không an toàn.
- Random/time đọc trong render tạo nondeterminism và hydration mismatch nếu không được kiểm soát.
- Event handler chứa user-triggered side effect; effect chứa external synchronization.
3. State identity: position, type và key
State gắn với position + component type + key. Đổi type/key reset subtree; stable key từ domain data preserve đúng item. Index key làm state drift khi reorder/delete; random key remount toàn bộ mỗi render.
| Change | State outcome | Use |
|---|---|---|
| Same type/key/position | Preserve | Normal update |
| New key | Reset subtree | Intentional form/session reset |
| Index/random key | Drift/remount | Avoid for mutable lists |
| Nested component definition | New type per render | Move definition to module scope |
4. Reconciliation evidence
React không deep-diff arbitrary component state/objects. Element type/key/tree quyết định reuse; props equality chỉ tham gia memoization. Dùng React DevTools Profiler, mount/unmount logs và state-preservation tests để chứng minh identity behavior.