@samitouri / QOS-React-2 / commits / 2c7dea7365

Implement Offscreen in Fizz (#24988)

During server rendering, a visible Offscreen subtree acts exactly like a fragment: a pure indirection. A hidden Offscreen subtree is not server rendered at all. It's ignored during hydration, too. Prerendering happens only on the client. We considered prerendering hidden trees on the server, too, but our conclusion is that it's a waste of bytes and server computation. We can't think of any compelling cases where it's the right trade off. (If we ever change our mind, though, the way we'll likely model it is to treat it as if it's a Suspense boundary with an empty fallback.)

Andrew Clark committed Jul 26, 2022 at 00:35 UTC 2c7dea73659da283fa433f5fd657a5a29797fd67
2 files changed +126 -8
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+99
@@ -17,6 +17,7 @@ let Scheduler;
17 let ReactFeatureFlags;
18 let Suspense;
19 let SuspenseList;
20 +let Offscreen;
21 let act;
22 let IdleEventPriority;
23
@@ -106,6 +107,7 @@ describe('ReactDOMServerPartialHydration', () => {
107 ReactDOMServer = require('react-dom/server');
108 Scheduler = require('scheduler');
109 Suspense = React.Suspense;
110 + Offscreen = React.unstable_Offscreen;
111 if (gate(flags => flags.enableSuspenseList)) {
112 SuspenseList = React.SuspenseList;
113 }
@@ -3283,6 +3285,103 @@ describe('ReactDOMServerPartialHydration', () => {
3285 expect(ref.current.innerHTML).toBe('Hidden child');
3286 });
3287
3288 + // @gate enableOffscreen
3289 + it('a visible Offscreen component acts like a fragment', async () => {
3290 + const ref = React.createRef();
3291 +
3292 + function App() {
3293 + return (
3294 + <Offscreen mode="visible">
3295 + <span ref={ref}>Child</span>
3296 + </Offscreen>
3297 + );
3298 + }
3299 +
3300 + const finalHTML = ReactDOMServer.renderToString(<App />);
3301 + expect(Scheduler).toHaveYielded([]);
3302 +
3303 + const container = document.createElement('div');
3304 + container.innerHTML = finalHTML;
3305 +
3306 + // Visible Offscreen boundaries behave exactly like fragments: a
3307 + // pure indirection.
3308 + expect(container).toMatchInlineSnapshot(`
3309 + <div>
3310 + <span>
3311 + Child
3312 + </span>
3313 + </div>
3314 + `);
3315 +
3316 + const span = container.getElementsByTagName('span')[0];
3317 +
3318 + // The tree successfully hydrates
3319 + ReactDOMClient.hydrateRoot(container, <App />);
3320 + expect(Scheduler).toFlushAndYield([]);
3321 + expect(ref.current).toBe(span);
3322 + });
3323 +
3324 + // @gate enableOffscreen
3325 + it('a hidden Offscreen component is skipped over during server rendering', async () => {
3326 + const visibleRef = React.createRef();
3327 +
3328 + function HiddenChild() {
3329 + Scheduler.unstable_yieldValue('HiddenChild');
3330 + return <span>Hidden</span>;
3331 + }
3332 +
3333 + function App() {
3334 + Scheduler.unstable_yieldValue('App');
3335 + return (
3336 + <>
3337 + <span ref={visibleRef}>Visible</span>
3338 + <Offscreen mode="hidden">
3339 + <HiddenChild />
3340 + </Offscreen>
3341 + </>
3342 + );
3343 + }
3344 +
3345 + // During server rendering, the Child component should not be evaluated,
3346 + // because it's inside a hidden tree.
3347 + const finalHTML = ReactDOMServer.renderToString(<App />);
3348 + expect(Scheduler).toHaveYielded(['App']);
3349 +
3350 + const container = document.createElement('div');
3351 + container.innerHTML = finalHTML;
3352 +
3353 + // The hidden child is not part of the server rendered HTML
3354 + expect(container).toMatchInlineSnapshot(`
3355 + <div>
3356 + <span>
3357 + Visible
3358 + </span>
3359 + </div>
3360 + `);
3361 +
3362 + const visibleSpan = container.getElementsByTagName('span')[0];
3363 +
3364 + // The visible span successfully hydrates
3365 + ReactDOMClient.hydrateRoot(container, <App />);
3366 + expect(Scheduler).toFlushUntilNextPaint(['App']);
3367 + expect(visibleRef.current).toBe(visibleSpan);
3368 +
3369 + // Subsequently, the hidden child is prerendered on the client
3370 + expect(Scheduler).toFlushUntilNextPaint(['HiddenChild']);
3371 + expect(container).toMatchInlineSnapshot(`
3372 + <div>
3373 + <span>
3374 + Visible
3375 + </span>
3376 + <span
3377 + style="display: none;"
3378 + >
3379 + Hidden
3380 + </span>
3381 + </div>
3382 + `);
3383 + });
3384 +
3385 function itHydratesWithoutMismatch(msg, App) {
3386 it('hydrates without mismatch ' + msg, () => {
3387 const container = document.createElement('div');
packages/react-server/src/ReactFizzServer.js
+27 -8
@@ -16,6 +16,7 @@ import type {
16 ReactNodeList,
17 ReactContext,
18 ReactProviderType,
19 + OffscreenMode,
20 } from 'shared/ReactTypes';
21 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
22 import type {
@@ -107,6 +108,7 @@ import {
108 REACT_PROVIDER_TYPE,
109 REACT_CONTEXT_TYPE,
110 REACT_SCOPE_TYPE,
111 + REACT_OFFSCREEN_TYPE,
112 } from 'shared/ReactSymbols';
113 import ReactSharedInternals from 'shared/ReactSharedInternals';
114 import {
@@ -1062,6 +1064,18 @@ function renderLazyComponent(
1064 popComponentStackInDEV(task);
1065 }
1066
1067 +function renderOffscreen(request: Request, task: Task, props: Object): void {
1068 + const mode: ?OffscreenMode = (props.mode: any);
1069 + if (mode === 'hidden') {
1070 + // A hidden Offscreen boundary is not server rendered. Prerendering happens
1071 + // on the client.
1072 + } else {
1073 + // A visible Offscreen boundary is treated exactly like a fragment: a
1074 + // pure indirection.
1075 + renderNodeDestructive(request, task, props.children);
1076 + }
1077 +}
1078 +
1079 function renderElement(
1080 request: Request,
1081 task: Task,
@@ -1084,14 +1098,15 @@ function renderElement(
1098 }
1099
1100 switch (type) {
1087 - // TODO: LegacyHidden acts the same as a fragment. This only works
1088 - // because we currently assume that every instance of LegacyHidden is
1089 - // accompanied by a host component wrapper. In the hidden mode, the host
1090 - // component is given a `hidden` attribute, which ensures that the
1091 - // initial HTML is not visible. To support the use of LegacyHidden as a
1092 - // true fragment, without an extra DOM node, we would have to hide the
1093 - // initial HTML in some other way.
1094 - // TODO: Add REACT_OFFSCREEN_TYPE here too with the same capability.
1101 + // LegacyHidden acts the same as a fragment. This only works because we
1102 + // currently assume that every instance of LegacyHidden is accompanied by a
1103 + // host component wrapper. In the hidden mode, the host component is given a
1104 + // `hidden` attribute, which ensures that the initial HTML is not visible.
1105 + // To support the use of LegacyHidden as a true fragment, without an extra
1106 + // DOM node, we would have to hide the initial HTML in some other way.
1107 + // TODO: Delete in LegacyHidden. It's an unstable API only used in the
1108 + // www build. As a migration step, we could add a special prop to Offscreen
1109 + // that simulates the old behavior (no hiding, no change to effects).
1110 case REACT_LEGACY_HIDDEN_TYPE:
1111 case REACT_DEBUG_TRACING_MODE_TYPE:
1112 case REACT_STRICT_MODE_TYPE:
@@ -1100,6 +1115,10 @@ function renderElement(
1115 renderNodeDestructive(request, task, props.children);
1116 return;
1117 }
1118 + case REACT_OFFSCREEN_TYPE: {
1119 + renderOffscreen(request, task, props);
1120 + return;
1121 + }
1122 case REACT_SUSPENSE_LIST_TYPE: {
1123 pushBuiltInComponentStackInDEV(task, 'SuspenseList');
1124 // TODO: SuspenseList should control the boundaries.