Skip to content

Commit 915dfe6

Browse files
bmeurersebmarkbage
authored andcommitted
Slightly improve performance of hydration. (#15998)
* Slightly improve performance of hydration. Avoid loading nodeType and data couple times from the same node in a row, but instead load them only once, which will help engines to run this code faster, especially during startup of the application. The general approach is still not ideal, since hydrating this way forces the browser engine to materialize JavaScript wrapper objects for all DOM nodes, even if they are not interesting to hydration itself. * Fix condition for COMMENT_NODEs. * Improve general code readability
1 parent 824e9be commit 915dfe6

File tree

1 file changed

+26
-30
lines changed

1 file changed

+26
-30
lines changed

packages/react-dom/src/client/ReactDOMHostConfig.js

+26-30
Original file line numberDiff line numberDiff line change
@@ -670,44 +670,40 @@ export function registerSuspenseInstanceRetry(
670670
instance._reactRetry = callback;
671671
}
672672

673-
export function getNextHydratableSibling(
674-
instance: HydratableInstance,
675-
): null | HydratableInstance {
676-
let node = instance.nextSibling;
673+
function getNextHydratable(node) {
677674
// Skip non-hydratable nodes.
678-
while (
679-
node &&
680-
node.nodeType !== ELEMENT_NODE &&
681-
node.nodeType !== TEXT_NODE &&
682-
(!enableSuspenseServerRenderer ||
683-
node.nodeType !== COMMENT_NODE ||
684-
((node: any).data !== SUSPENSE_START_DATA &&
685-
(node: any).data !== SUSPENSE_PENDING_START_DATA &&
686-
(node: any).data !== SUSPENSE_FALLBACK_START_DATA))
687-
) {
688-
node = node.nextSibling;
675+
for (; node != null; node = node.nextSibling) {
676+
const nodeType = node.nodeType;
677+
if (nodeType === ELEMENT_NODE || nodeType === TEXT_NODE) {
678+
break;
679+
}
680+
if (enableSuspenseServerRenderer) {
681+
if (nodeType === COMMENT_NODE) {
682+
break;
683+
}
684+
const nodeData = (node: any).data;
685+
if (
686+
nodeData === SUSPENSE_START_DATA ||
687+
nodeData === SUSPENSE_FALLBACK_START_DATA ||
688+
nodeData === SUSPENSE_PENDING_START_DATA
689+
) {
690+
break;
691+
}
692+
}
689693
}
690694
return (node: any);
691695
}
692696

697+
export function getNextHydratableSibling(
698+
instance: HydratableInstance,
699+
): null | HydratableInstance {
700+
return getNextHydratable(instance.nextSibling);
701+
}
702+
693703
export function getFirstHydratableChild(
694704
parentInstance: Container | Instance,
695705
): null | HydratableInstance {
696-
let next = parentInstance.firstChild;
697-
// Skip non-hydratable nodes.
698-
while (
699-
next &&
700-
next.nodeType !== ELEMENT_NODE &&
701-
next.nodeType !== TEXT_NODE &&
702-
(!enableSuspenseServerRenderer ||
703-
next.nodeType !== COMMENT_NODE ||
704-
((next: any).data !== SUSPENSE_START_DATA &&
705-
(next: any).data !== SUSPENSE_FALLBACK_START_DATA &&
706-
(next: any).data !== SUSPENSE_PENDING_START_DATA))
707-
) {
708-
next = next.nextSibling;
709-
}
710-
return (next: any);
706+
return getNextHydratable(parentInstance.firstChild);
711707
}
712708

713709
export function hydrateInstance(

0 commit comments

Comments
 (0)