Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Slightly improve performance of hydration. #15998

Merged
merged 3 commits into from Jun 27, 2019
Merged

Slightly improve performance of hydration. #15998

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
93a6a47
Slightly improve performance of hydration.
bmeurer Jun 26, 2019
5b24cfd
Fix condition for COMMENT_NODEs.
bmeurer Jun 26, 2019
fba82af
Improve general code readability
bmeurer Jun 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
56 changes: 26 additions & 30 deletions packages/react-dom/src/client/ReactDOMHostConfig.js
View file
Open in desktop
Expand Up @@ -670,44 +670,40 @@ export function registerSuspenseInstanceRetry(
instance._reactRetry = callback;
}

export function getNextHydratableSibling(
instance: HydratableInstance,
): null | HydratableInstance {
let node = instance.nextSibling;
function getNextHydratable(node) {
// Skip non-hydratable nodes.
while (
node &&
node.nodeType !== ELEMENT_NODE &&
node.nodeType !== TEXT_NODE &&
(!enableSuspenseServerRenderer ||
node.nodeType !== COMMENT_NODE ||
((node: any).data !== SUSPENSE_START_DATA &&
(node: any).data !== SUSPENSE_PENDING_START_DATA &&
(node: any).data !== SUSPENSE_FALLBACK_START_DATA))
) {
node = node.nextSibling;
for (; node != null; node = node.nextSibling) {
const nodeType = node.nodeType;
if (nodeType === ELEMENT_NODE || nodeType === TEXT_NODE) {
break;
}
if (enableSuspenseServerRenderer) {
if (nodeType === COMMENT_NODE) {
break;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should actually have been if (nodeType !== COMMENT_NODE) continue. Logic is hard. :)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, test coverage is hard :D

}
const nodeData = (node: any).data;
if (
nodeData === SUSPENSE_START_DATA ||
nodeData === SUSPENSE_FALLBACK_START_DATA ||
nodeData === SUSPENSE_PENDING_START_DATA
) {
break;
}
}
}
return (node: any);
}

export function getNextHydratableSibling(
instance: HydratableInstance,
): null | HydratableInstance {
return getNextHydratable(instance.nextSibling);
}

export function getFirstHydratableChild(
parentInstance: Container | Instance,
): null | HydratableInstance {
let next = parentInstance.firstChild;
// Skip non-hydratable nodes.
while (
next &&
next.nodeType !== ELEMENT_NODE &&
next.nodeType !== TEXT_NODE &&
(!enableSuspenseServerRenderer ||
next.nodeType !== COMMENT_NODE ||
((next: any).data !== SUSPENSE_START_DATA &&
(next: any).data !== SUSPENSE_FALLBACK_START_DATA &&
(next: any).data !== SUSPENSE_PENDING_START_DATA))
) {
next = next.nextSibling;
}
return (next: any);
return getNextHydratable(parentInstance.firstChild);
}

export function hydrateInstance(
Expand Down