a small incremental UI library for the web
javascript
web
ui
Refactor and optimize deleted children
+17
-10
+17
-10
js/fiber.ts
+17
-10
js/fiber.ts
···
110
110
assert(parentFiber.effect !== Delete);
111
111
const oldFiberLookup = buildLookup(parentFiber.child);
112
112
113
-
parentFiber.deletedChildren = [];
114
-
115
113
let firstNewChild = null;
116
114
let prevChild;
117
115
let lastKeptIndex = 0;
···
119
117
const el = elements[i];
120
118
const key = el.key ?? i;
121
119
const oldFiber = oldFiberLookup.get(key) ?? null;
122
-
oldFiberLookup.delete(key);
123
120
const newFiber = update(oldFiber, el, i);
124
121
125
122
newFiber.parent = parentFiber;
···
127
124
newFiber.key = el.key;
128
125
129
126
if (newFiber.alternate) {
127
+
// We are continuing with an existing fiber, remove oldFiber
128
+
// from lookup so it doesn't get unmounted
129
+
oldFiberLookup.delete(key);
130
+
130
131
const oldIndex = oldFiber.index;
131
132
if (oldIndex < lastKeptIndex) {
132
133
newFiber.effect = Placement;
···
138
139
else {
139
140
newFiber.effect = Placement;
140
141
}
141
-
if (oldFiber && oldFiber.effect === Delete) {
142
-
parentFiber.deletedChildren.push(oldFiber);
143
-
}
144
142
145
143
if (prevChild) prevChild.sibling = newFiber;
146
144
else firstNewChild = newFiber;
···
152
150
// (and it has already caused a bug)
153
151
if (prevChild) prevChild.sibling = null;
154
152
155
-
oldFiberLookup.forEach(deadFiber => {
156
-
deadFiber.effect = Delete;
157
-
parentFiber.deletedChildren.push(deadFiber);
158
-
});
153
+
// Should be guaranteed by `cloneFiber` and `makeFiber`
154
+
assert(parentFiber.deletedChildren === null);
155
+
// Only allocate deletedChildren array if we actually have some
156
+
if (oldFiberLookup.size > 0) {
157
+
parentFiber.deletedChildren = [];
158
+
159
+
// Any fibers remaining in `oldFiberLookup` did not have a
160
+
// matching element, so they need to be deleted
161
+
oldFiberLookup.forEach(deadFiber => {
162
+
deadFiber.effect = Delete;
163
+
parentFiber.deletedChildren.push(deadFiber);
164
+
});
165
+
}
159
166
160
167
return firstNewChild;
161
168
}