[DevTools] Compute new reordered child set from the instance tree (#30668)
This is already filtered and simply just all the ids in the linked list. Same principle as #30665.
Sebastian Markbåge committed
Aug 13, 2024 at 15:18 UTC
082a690cc3ed6e27f62ed6e4ac655dec5c828708
1 file changed
+16
-53
packages/react-devtools-shared/src/backend/fiber/renderer.js
+16
-53
@@ -2516,24 +2516,28 @@ export function attach(
2516
}
2517
}
2518
2519
- function recordResetChildren(
2520
- parentInstance: DevToolsInstance,
2521
- childSet: Fiber,
2522
- ) {
2519
+ function recordResetChildren(parentInstance: DevToolsInstance) {
2520
if (__DEBUG__) {
2524
- debug('recordResetChildren()', childSet, parentInstance);
2521
+ if (
2522
+ parentInstance.firstChild !== null &&
2523
+ parentInstance.firstChild.kind === FIBER_INSTANCE
2524
+ ) {
2525
+ debug(
2526
+ 'recordResetChildren()',
2527
+ parentInstance.firstChild.data,
2528
+ parentInstance,
2529
+ );
2530
+ }
2531
}
2532
// The frontend only really cares about the displayName, key, and children.
2533
// The first two don't really change, so we are only concerned with the order of children here.
2534
// This is trickier than a simple comparison though, since certain types of fibers are filtered.
2535
const nextChildren: Array<number> = [];
2536
2531
- // This is a naive implementation that shallowly recourses children.
2532
- // We might want to revisit this if it proves to be too inefficient.
2533
- let child: null | Fiber = childSet;
2537
+ let child: null | DevToolsInstance = parentInstance.firstChild;
2538
while (child !== null) {
2535
- findReorderedChildrenRecursively(child, nextChildren);
2536
- child = child.sibling;
2539
+ nextChildren.push(child.id);
2540
+ child = child.nextSibling;
2541
}
2542
2543
const numChildren = nextChildren.length;
@@ -2549,38 +2553,6 @@ export function attach(
2553
}
2554
}
2555
2552
- function findReorderedChildrenRecursively(
2553
- fiber: Fiber,
2554
- nextChildren: Array<number>,
2555
- ) {
2556
- if (!shouldFilterFiber(fiber)) {
2557
- nextChildren.push(getFiberIDThrows(fiber));
2558
- } else {
2559
- let child = fiber.child;
2560
- const isTimedOutSuspense =
2561
- fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
2562
- if (isTimedOutSuspense) {
2563
- // Special case: if Suspense mounts in a timed-out state,
2564
- // get the fallback child from the inner fragment,
2565
- // and skip over the primary child.
2566
- const primaryChildFragment = fiber.child;
2567
- const fallbackChildFragment = primaryChildFragment
2568
- ? primaryChildFragment.sibling
2569
- : null;
2570
- const fallbackChild = fallbackChildFragment
2571
- ? fallbackChildFragment.child
2572
- : null;
2573
- if (fallbackChild !== null) {
2574
- child = fallbackChild;
2575
- }
2576
- }
2577
- while (child !== null) {
2578
- findReorderedChildrenRecursively(child, nextChildren);
2579
- child = child.sibling;
2580
- }
2581
- }
2582
- }
2583
-
2556
// Returns whether closest unfiltered fiber parent needs to reset its child list.
2557
function updateChildrenRecursively(
2558
nextFirstChild: null | Fiber,
@@ -2865,17 +2837,8 @@ export function attach(
2837
// We need to crawl the subtree for closest non-filtered Fibers
2838
// so that we can display them in a flat children set.
2839
if (shouldIncludeInTree) {
2868
- // Normally, search for children from the rendered child.
2869
- let nextChildSet = nextFiber.child;
2870
- if (nextDidTimeOut) {
2871
- // Special case: timed-out Suspense renders the fallback set.
2872
- const nextFiberChild = nextFiber.child;
2873
- nextChildSet = nextFiberChild ? nextFiberChild.sibling : null;
2874
- }
2875
- if (nextChildSet != null) {
2876
- if (reconcilingParent !== null) {
2877
- recordResetChildren(reconcilingParent, nextChildSet);
2878
- }
2840
+ if (reconcilingParent !== null) {
2841
+ recordResetChildren(reconcilingParent);
2842
}
2843
// We've handled the child order change for this Fiber.
2844
// Since it's included, there's no need to invalidate parent child order.