fw-05 — Analysis
Required invariants
- A component's render is an effect, so reactive reads subscribe that component's render.
- Keyed children preserve node identity across reorder.
- The scheduler deduplicates: one component renders once per flush regardless of how many of its dependencies changed.
- Patch flags are trusted. A wrong flag means a skipped update, silently.
Where the defaults sit
| Default | Escape hatch | Failure mode of the escape hatch | |
|---|---|---|---|
| React | re-render subtree | memo, useMemo | memoise wrongly ⇒ stale UI |
| Vue / signals | re-render only the tracked effect | untrack | lose tracking ⇒ stale UI |
Mirror images. React's default is conservative and predictable; Vue's is precise. Both have a stale-UI failure mode; they differ in what you must do to reach it.
The organisational consequence matters more than the mechanical one: React's model pushes performance work onto every engineer (correct memoisation is a per-component judgement), while Vue's pushes it into the framework. That is a hiring and code-review consideration, and a far better basis for a framework decision than benchmark numbers.
The keyed-diff spectrum
| Approach | Reorder cost |
|---|---|
| Find-in-old per child | O(n²) lookups |
| Map by key | O(n) lookups, O(n) moves |
| Two-ended | O(n), few moves for common edits |
| Longest increasing subsequence | O(n log n), minimum moves |
LIS matters for drag-and-drop, sortable tables, and animated reorders, where each move is also layout and paint. For append-mostly lists it is noise. Measure the DOM-operation count before adopting the complexity.