From 5e14a394c36f1b7d80a73f1d18137ad32c178072 Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Mon, 12 Aug 2024 16:49:43 -0400 Subject: [PATCH] Compute new reordered child set from the instance tree This is already filtered and simply just all the ids in the linked list. --- .../src/backend/fiber/renderer.js | 69 +++++-------------- 1 file changed, 16 insertions(+), 53 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index d1bb0429e7c48..28bdc3d279f85 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -2566,24 +2566,28 @@ export function attach( } } - function recordResetChildren( - parentInstance: DevToolsInstance, - childSet: Fiber, - ) { + function recordResetChildren(parentInstance: DevToolsInstance) { if (__DEBUG__) { - debug('recordResetChildren()', childSet, parentInstance); + if ( + parentInstance.firstChild !== null && + parentInstance.firstChild.kind === FIBER_INSTANCE + ) { + debug( + 'recordResetChildren()', + parentInstance.firstChild.data, + parentInstance, + ); + } } // The frontend only really cares about the displayName, key, and children. // The first two don't really change, so we are only concerned with the order of children here. // This is trickier than a simple comparison though, since certain types of fibers are filtered. const nextChildren: Array = []; - // This is a naive implementation that shallowly recourses children. - // We might want to revisit this if it proves to be too inefficient. - let child: null | Fiber = childSet; + let child: null | DevToolsInstance = parentInstance.firstChild; while (child !== null) { - findReorderedChildrenRecursively(child, nextChildren); - child = child.sibling; + nextChildren.push(child.id); + child = child.nextSibling; } const numChildren = nextChildren.length; @@ -2599,38 +2603,6 @@ export function attach( } } - function findReorderedChildrenRecursively( - fiber: Fiber, - nextChildren: Array, - ) { - if (!shouldFilterFiber(fiber)) { - nextChildren.push(getFiberIDThrows(fiber)); - } else { - let child = fiber.child; - const isTimedOutSuspense = - fiber.tag === SuspenseComponent && fiber.memoizedState !== null; - if (isTimedOutSuspense) { - // Special case: if Suspense mounts in a timed-out state, - // get the fallback child from the inner fragment, - // and skip over the primary child. - const primaryChildFragment = fiber.child; - const fallbackChildFragment = primaryChildFragment - ? primaryChildFragment.sibling - : null; - const fallbackChild = fallbackChildFragment - ? fallbackChildFragment.child - : null; - if (fallbackChild !== null) { - child = fallbackChild; - } - } - while (child !== null) { - findReorderedChildrenRecursively(child, nextChildren); - child = child.sibling; - } - } - } - // Returns whether closest unfiltered fiber parent needs to reset its child list. function updateChildrenRecursively( nextFirstChild: null | Fiber, @@ -2914,17 +2886,8 @@ export function attach( // We need to crawl the subtree for closest non-filtered Fibers // so that we can display them in a flat children set. if (shouldIncludeInTree) { - // Normally, search for children from the rendered child. - let nextChildSet = nextFiber.child; - if (nextDidTimeOut) { - // Special case: timed-out Suspense renders the fallback set. - const nextFiberChild = nextFiber.child; - nextChildSet = nextFiberChild ? nextFiberChild.sibling : null; - } - if (nextChildSet != null) { - if (reconcilingParent !== null) { - recordResetChildren(reconcilingParent, nextChildSet); - } + if (reconcilingParent !== null) { + recordResetChildren(reconcilingParent); } // We've handled the child order change for this Fiber. // Since it's included, there's no need to invalidate parent child order.