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.

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

[Float][Fiber] properly cleanup instances when switching between instance and Resource modes #29628

Closed
wants to merge 1 commit into from

Conversation

gnoff
Copy link
Collaborator

@gnoff gnoff commented May 29, 2024

HostHoistable is unfortunately complicated because any give fiber may be an Instance or a Resource and the lifetime of the fiber does not align with the lifetime of the underyling mode. Conceptually it'd be better if Resources were keyed intrinsically rather than using the key in JSX so we could have reconciliation deal with disposal of unmounted fibers. Maybe this is worth pursuing. However the current implementation models the inner identity during the render and commit phase so it needs to do some bookkeeping of things like the stateNode where other fiber types don't need to

@sokra pointed out some suspiciously broken looking code in commit work where we assign to the stateNode. It looks like an oversight in the original implementation but on further investigation there are other ways in which we don't properly clean up on identity transition during update.

This change adds extra logic to do proper clean. If you go from instance to Resource or vice versa we need to better model the unmount semantics and ensure there is no lingering stateNode

Copy link

vercel bot commented May 29, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 29, 2024 6:13pm

@gnoff gnoff requested review from sebmarkbage and acdlite May 29, 2024 00:49
@facebook-github-bot facebook-github-bot added the React Core Team Opened by a member of the React Core Team label May 29, 2024
Comment on lines +1106 to +1108
// This must come at the very end of the complete phase.
bubbleProperties(workInProgress);
return null;
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Previously bubbleProperties was called before preloadInstance/preloadResource but these functions mutate flags and so I suspenct that was incorrect all along

@react-sizebot
Copy link

react-sizebot commented May 29, 2024

Comparing: 4ec6a6f...cc13e23

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.66 kB 6.66 kB = 1.82 kB 1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 496.04 kB 495.72 kB = 88.77 kB 88.75 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.67 kB 6.67 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 500.84 kB 500.52 kB = 89.46 kB 89.44 kB
facebook-www/ReactDOM-prod.classic.js = 593.48 kB 593.31 kB = 104.38 kB 104.36 kB
facebook-www/ReactDOM-prod.modern.js = 569.87 kB 569.70 kB = 100.77 kB 100.75 kB
test_utils/ReactAllWarnings.js Deleted 63.82 kB 0.00 kB Deleted 15.95 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
test_utils/ReactAllWarnings.js Deleted 63.82 kB 0.00 kB Deleted 15.95 kB 0.00 kB

Generated by 🚫 dangerJS against cc13e23

Comment on lines 5277 to 5312
<link rel="stylesheet" href="b" data-precedence="default" />
<link rel="stylesheet" href="c" data-precedence="default" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

If we'd render <link rel="stylesheet" href="b" precedence="default" /> again, we'd see

<link rel="stylesheet" href="b" data-precedence="default" />
<link rel="stylesheet" href="c" data-precedence="default" />
<link rel="stylesheet" href="b" data-precedence="default" />

here?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

No, we should never load the same stylesheet more than once

@@ -5230,6 +5230,65 @@ body {
);
});

it('can update link tags from Resource to instance and back', async () => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Where is the and back part in this test? I thought the first render renders a link tag to Resource, the second render to instance but I'm not seeing a third render.

Copy link
Collaborator

@unstubbable unstubbable May 29, 2024

Choose a reason for hiding this comment

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

I think this is meant to be read as "can update link tags from Resource to instance and vice versa"?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yeah, that was my original poorly worded intent but I think it's probably worth another round trip give how finicky the codepaths here are

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Thanks for pointing this out btw, found a bug when going "back again" :)

…ance and Resource modes

HostHoistable is unfortunately complicated because any give fiber may be an Instance or a Resource and the lifetime of the fiber does not align with the lifetime of the underyling mode. Conceptually it'd be better if Resources were keyed intrinsically rather than using the key in JSX so we could have reconciliation deal with disposal of unmounted fibers. Maybe this is worth pursuing. However the current implementation models the inner identity during the render and commit phase so it needs to do some bookkeeping of things like the stateNode where other fiber types don't need to

@sokra pointed out some suspciously broken looking code in commit work where we assign to the stateNode. It looks like an oversight in the original implementation but on further investigation there are ohter ways in which we don't properly clean up on identity transition during update.

This change adds extra logic to do proper clean. If you go from instance to Resource or vice versa we need to better model the unmount semantics and ensure there is no lingering stateNode
@gnoff
Copy link
Collaborator Author

gnoff commented Jun 1, 2024

Closing in favor of #29693

@gnoff gnoff closed this Jun 1, 2024
@gnoff gnoff deleted the fix-hoistable-statenode branch June 1, 2024 00:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants