Skip to content

[Fiber][enableYieldingBeforePassive] Enable in experimental builds again #36278

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

Draft
eps1lon wants to merge 2 commits into
base: main
Choose a base branch
from
+25 −11
Draft

[Fiber][enableYieldingBeforePassive] Enable in experimental builds again #36278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bdea546
[Fiber][enableYieldingBeforePassive] Enable in experimental builds again
eps1lon Apr 15, 2026
4afd2b0
Update tests that weren't updated during "Don't try to hydrate a hidd…
eps1lon Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 22 additions & 8 deletions packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3713,11 +3713,19 @@ describe('ReactDOMServerPartialHydration', () => {
return <span>Hidden</span>;
}

function VisibleChild() {
Scheduler.log('VisibleChild');
React.useEffect(() => {
Scheduler.log('VisibleChild Effect');
});
return <span ref={visibleRef}>Visible</span>;
}

function App() {
Scheduler.log('App');
return (
<>
<span ref={visibleRef}>Visible</span>
<VisibleChild />
<Activity mode="hidden">
<HiddenChild />
</Activity>
Expand All @@ -3733,7 +3741,7 @@ describe('ReactDOMServerPartialHydration', () => {
// During server rendering, the Child component should not be evaluated,
// because it's inside a hidden tree.
const finalHTML = ReactDOMServer.renderToString(<App />);
assertLog(['App']);
assertLog(['App', 'VisibleChild']);

const container = document.createElement('div');
container.innerHTML = finalHTML;
Expand All @@ -3753,17 +3761,18 @@ describe('ReactDOMServerPartialHydration', () => {

// The visible span successfully hydrates
ReactDOMClient.hydrateRoot(container, <App />);
await waitForPaint(['App']);
await waitForPaint(['App', 'VisibleChild']);
expect(visibleRef.current).toBe(visibleSpan);

// Subsequently, the hidden child is prerendered on the client
// along with hydrating the Suspense boundary outside the Activity.
if (gate(flags => flags.enableYieldingBeforePassive)) {
// Passive effects.
await waitForPaint([]);
Comment on lines -3760 to -3761
Copy link
Copy Markdown
Collaborator Author

@eps1lon eps1lon Apr 17, 2026

Choose a reason for hiding this comment

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

Without any actual Component, React skipped directly to prerendering the hidden Activity. I added a Function Component with passive Effects to make it clear that there is a yield between Passive Effects and prerendering. Though not without the flag which seems like a bug fixed by the flag.

await waitForPaint(['VisibleChild Effect']);
await waitForPaint(['HiddenChild']);
} else {
await waitForPaint(['VisibleChild Effect', 'HiddenChild']);
}

// Subsequently, the hidden child is prerendered on the client
// along with hydrating the Suspense boundary outside the Activity.
await waitForPaint(['HiddenChild']);
expect(container).toMatchInlineSnapshot(`
<div>
<span>
Expand All @@ -3779,6 +3788,11 @@ describe('ReactDOMServerPartialHydration', () => {
</div>
`);

if (gate(flags => flags.enableYieldingBeforePassive)) {
// passive effects
await waitForPaint([]);
}

// Next the child inside the Activity is hydrated.
await waitForPaint(['HiddenChild']);

Expand Down
2 changes: 1 addition & 1 deletion packages/shared/ReactFeatureFlags.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const enableLegacyFBSupport: boolean = false;

// Yield to the browser event loop and not just the scheduler event loop before passive effects.
// Fix gated tests that fail with this flag enabled before turning it back on.
export const enableYieldingBeforePassive: boolean = false;
export const enableYieldingBeforePassive: boolean = __EXPERIMENTAL__;

// Experiment to intentionally yield less to block high framerate animations.
export const enableThrottledScheduling: boolean = false;
Expand Down
1 change: 1 addition & 0 deletions packages/shared/forks/ReactFeatureFlags.www-dynamic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export const enableFragmentRefsScrollIntoView: boolean = __VARIANT__;
export const enableFragmentRefsTextNodes: boolean = __VARIANT__;
export const enableInternalInstanceMap: boolean = __VARIANT__;
export const enableParallelTransitions: boolean = __VARIANT__;
export const enableYieldingBeforePassive: boolean = __VARIANT__;

export const enableEffectEventMutationPhase: boolean = __VARIANT__;

Expand Down
3 changes: 1 addition & 2 deletions packages/shared/forks/ReactFeatureFlags.www.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const {
enableFragmentRefsTextNodes,
enableInternalInstanceMap,
enableParallelTransitions,
enableYieldingBeforePassive,
} = dynamicFeatureFlags;

// On WWW, __EXPERIMENTAL__ is used for a new modern build.
Expand All @@ -53,8 +54,6 @@ export const enableMoveBefore: boolean = false;
export const disableInputAttributeSyncing: boolean = false;
export const enableLegacyFBSupport: boolean = true;

export const enableYieldingBeforePassive: boolean = false;

export const enableThrottledScheduling: boolean = false;

export const enableComponentPerformanceTrack: boolean = true;
Expand Down
Loading