Add Offscreen stateNode by lunaruan · Pull Request #24026 · facebook/react

lunaruan · 2022-03-03T19:41:05Z

Add state node on Offscreen fibers with id (in preparation for transition tracing)

acdlite · 2022-03-03T19:42:36Z

packages/react-reconciler/src/ReactFiberOffscreenComponent.js

 import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
+import {number} from 'prop-types';


Don't need this. Maybe this was an auto-import?

acdlite · 2022-03-03T19:43:09Z

packages/react-reconciler/src/ReactFiberOffscreenComponent.js

 |};
+
+export type OffscreenInstance = {|
+  id: number,


Can you leave this as an empty object for now? Not convinced yet we need to have a numeric id, since we can use the object itself as a key. But even if we do, we can figure that out in the next PR.

acdlite · 2022-03-03T19:44:24Z

packages/react-reconciler/src/ReactFiberBeginWork.new.js

    fallbackChildFragment.flags |= Placement;
  }

+  primaryChildFragment.stateNode = current.stateNode;


You don't need to copy this. It's copied during createWorkInProgress.

acdlite · 2022-03-03T19:57:22Z

packages/react-reconciler/src/ReactFiberBeginWork.old.js

    );
  }

+  primaryChildFragment.stateNode = primaryChildInstance;


I think you also need to do this in updateOffscreenComponent, because once <Offscreen /> is a public API, it won't have been rendered by a Suspense parent that initializes the instance here.

But it might be best to do it in createOffscreenFiber:

react/packages/react-reconciler/src/ReactFiber.new.js

Lines 721 to 731 in cb1e7b1

export function createFiberFromOffscreen(

pendingProps: OffscreenProps,

mode: TypeOfMode,

lanes: Lanes,

key: null | string,

) {

const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);

fiber.elementType = REACT_OFFSCREEN_TYPE;

fiber.lanes = lanes;

return fiber;

}

That's where HostPortal initializes its instance

sizebot · 2022-03-08T16:00:02Z

Comparing: cb1e7b1...4cd1c2e

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.min.js	+0.01%	131.46 kB	131.48 kB	+0.02%	42.05 kB	42.06 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.01%	136.12 kB	136.13 kB	+0.01%	43.41 kB	43.41 kB
facebook-www/ReactDOM-prod.classic.js	=	435.09 kB	435.12 kB	+0.01%	79.61 kB	79.62 kB
facebook-www/ReactDOM-prod.modern.js	=	421.59 kB	421.62 kB	+0.01%	77.60 kB	77.60 kB
facebook-www/ReactDOMForked-prod.classic.js	=	435.09 kB	435.12 kB	+0.01%	79.62 kB	79.63 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 4cd1c2e

Summary: This sync includes the following changes: - **[3f89908](facebook/react@3f8990898 )**: Fix test-build-devtools if build was generated by build-for-devtools ([#24088](facebook/react#24088)) //<Sebastian Silbermann>// - **[577f2de](facebook/react@577f2de46 )**: enableCacheElement flag ([#24131](facebook/react#24131)) //<David McCabe>// - **[2e0d86d](facebook/react@2e0d86d22 )**: Allow updating dehydrated root at lower priority without forcing client render ([#24082](facebook/react#24082)) //<Andrew Clark>// - **[dbe9e73](facebook/react@dbe9e732a )**: Avoid conditions where control flow is sufficient ([#24126](facebook/react#24126)) //<Sebastian Markbåge>// - **[b075f97](facebook/react@b075f9742 )**: Fix dispatch config type for skipBubbling ([#24109](facebook/react#24109)) //<Luna>// - **[ef23a9e](facebook/react@ef23a9ee8 )**: Flag for text hydration mismatch ([#24107](facebook/react#24107)) //<salazarm>// - **[0412f0c](facebook/react@0412f0c1a )**: add offscreen state node ([#24026](facebook/react#24026)) //<Luna Ruan>// - **[43eb283](facebook/react@43eb28339 )**: Add skipBubbling property to dispatch config ([#23366](facebook/react#23366)) //<Luna>// - **[832e298](facebook/react@832e2987e )**: Revert accdientally merged PR ([#24081](facebook/react#24081)) //<Andrew Clark>// - **[02b65fd](facebook/react@02b65fd8c )**: Allow updates at lower pri without forcing client render //<Andrew Clark>// - **[83b941a](facebook/react@83b941a51 )**: Add isRootDehydrated function //<Andrew Clark>// - **[c8e4789](facebook/react@c8e4789e2 )**: Pass children to hydration root constructor //<Andrew Clark>// - **[581f0c4](facebook/react@581f0c42e )**: [Flight] add support for Lazy components in Flight server ([#24068](facebook/react#24068)) //<Josh Story>// - **[72a933d](facebook/react@72a933d28 )**: Gate legacy hidden ([#24047](facebook/react#24047)) //<Sebastian Markbåge>// - **[b9de50d](facebook/react@b9de50d2f )**: Update test to reset modules instead of using private state ([#24055](facebook/react#24055)) //<Sebastian Markbåge>// - **[c91892e](facebook/react@c91892ec3 )**: [Fizz] Don't flush empty segments ([#24054](facebook/react#24054)) //<Sebastian Markbåge>// - **[d5f1b06](facebook/react@d5f1b067c )**: [ServerContext] Flight support for ServerContext ([#23244](facebook/react#23244)) //<salazarm>// - **[6edd55a](facebook/react@6edd55a3f )**: Gate unstable_expectedLoadTime on enableCPUSuspense ([#24038](facebook/react#24038)) //<Sebastian Markbåge>// - **[57799b9](facebook/react@57799b912 )**: Add more feature flag checks ([#24037](facebook/react#24037)) //<Sebastian Markbåge>// - **[e09518e](facebook/react@e09518e5b )**: [Fizz] write chunks to a buffer with no re-use ([#24034](facebook/react#24034)) //<Josh Story>// - **[14c2be8](facebook/react@14c2be8da )**: Rename Node SSR Callbacks to onShellReady/onAllReady and Other Fixes ([#24030](facebook/react#24030)) //<Sebastian Markbåge>// - **[cb1e7b1](facebook/react@cb1e7b1c6 )**: Move onCompleteAll to .allReady Promise ([#24025](facebook/react#24025)) //<Sebastian Markbåge>// - **[5662857](facebook/react@566285761 )**: [Fizz] Export debug function for FB ([#24024](facebook/react#24024)) //<salazarm>// - **[05c283c](facebook/react@05c283c3c )**: Fabric HostComponent as EventEmitter: support add/removeEventListener (unstable only) ([#23386](facebook/react#23386)) //<Joshua Gross>// - **[0864434](facebook/react@08644348b )**: Added unit Tests in the ReactART, increasing the code coverage ([#23195](facebook/react#23195)) //<BIKI DAS>// - **[feefe43](facebook/react@feefe437f )**: Refactor Cache Code ([#23393](facebook/react#23393)) //<Luna Ruan>// Changelog: [General][Changed] - React Native sync for revisions 1780659...1159ff6 jest_e2e[run_all_tests] Reviewed By: lunaleaps Differential Revision: D34928167 fbshipit-source-id: 8c386f2be5871981d217ab9a514892ed88eafcfb

Add state node on Offscreen fibers with id (in preparation for transition tracing)

Summary: This sync includes the following changes: - **[3f89908](facebook/react@3f8990898 )**: Fix test-build-devtools if build was generated by build-for-devtools ([facebook#24088](facebook/react#24088)) //<Sebastian Silbermann>// - **[577f2de](facebook/react@577f2de46 )**: enableCacheElement flag ([facebook#24131](facebook/react#24131)) //<David McCabe>// - **[2e0d86d](facebook/react@2e0d86d22 )**: Allow updating dehydrated root at lower priority without forcing client render ([facebook#24082](facebook/react#24082)) //<Andrew Clark>// - **[dbe9e73](facebook/react@dbe9e732a )**: Avoid conditions where control flow is sufficient ([facebook#24126](facebook/react#24126)) //<Sebastian Markbåge>// - **[b075f97](facebook/react@b075f9742 )**: Fix dispatch config type for skipBubbling ([facebook#24109](facebook/react#24109)) //<Luna>// - **[ef23a9e](facebook/react@ef23a9ee8 )**: Flag for text hydration mismatch ([facebook#24107](facebook/react#24107)) //<salazarm>// - **[0412f0c](facebook/react@0412f0c1a )**: add offscreen state node ([facebook#24026](facebook/react#24026)) //<Luna Ruan>// - **[43eb283](facebook/react@43eb28339 )**: Add skipBubbling property to dispatch config ([facebook#23366](facebook/react#23366)) //<Luna>// - **[832e298](facebook/react@832e2987e )**: Revert accdientally merged PR ([facebook#24081](facebook/react#24081)) //<Andrew Clark>// - **[02b65fd](facebook/react@02b65fd8c )**: Allow updates at lower pri without forcing client render //<Andrew Clark>// - **[83b941a](facebook/react@83b941a51 )**: Add isRootDehydrated function //<Andrew Clark>// - **[c8e4789](facebook/react@c8e4789e2 )**: Pass children to hydration root constructor //<Andrew Clark>// - **[581f0c4](facebook/react@581f0c42e )**: [Flight] add support for Lazy components in Flight server ([facebook#24068](facebook/react#24068)) //<Josh Story>// - **[72a933d](facebook/react@72a933d28 )**: Gate legacy hidden ([facebook#24047](facebook/react#24047)) //<Sebastian Markbåge>// - **[b9de50d](facebook/react@b9de50d2f )**: Update test to reset modules instead of using private state ([facebook#24055](facebook/react#24055)) //<Sebastian Markbåge>// - **[c91892e](facebook/react@c91892ec3 )**: [Fizz] Don't flush empty segments ([facebook#24054](facebook/react#24054)) //<Sebastian Markbåge>// - **[d5f1b06](facebook/react@d5f1b067c )**: [ServerContext] Flight support for ServerContext ([facebook#23244](facebook/react#23244)) //<salazarm>// - **[6edd55a](facebook/react@6edd55a3f )**: Gate unstable_expectedLoadTime on enableCPUSuspense ([facebook#24038](facebook/react#24038)) //<Sebastian Markbåge>// - **[57799b9](facebook/react@57799b912 )**: Add more feature flag checks ([facebook#24037](facebook/react#24037)) //<Sebastian Markbåge>// - **[e09518e](facebook/react@e09518e5b )**: [Fizz] write chunks to a buffer with no re-use ([facebook#24034](facebook/react#24034)) //<Josh Story>// - **[14c2be8](facebook/react@14c2be8da )**: Rename Node SSR Callbacks to onShellReady/onAllReady and Other Fixes ([facebook#24030](facebook/react#24030)) //<Sebastian Markbåge>// - **[cb1e7b1](facebook/react@cb1e7b1c6 )**: Move onCompleteAll to .allReady Promise ([facebook#24025](facebook/react#24025)) //<Sebastian Markbåge>// - **[5662857](facebook/react@566285761 )**: [Fizz] Export debug function for FB ([facebook#24024](facebook/react#24024)) //<salazarm>// - **[05c283c](facebook/react@05c283c3c )**: Fabric HostComponent as EventEmitter: support add/removeEventListener (unstable only) ([facebook#23386](facebook/react#23386)) //<Joshua Gross>// - **[0864434](facebook/react@08644348b )**: Added unit Tests in the ReactART, increasing the code coverage ([facebook#23195](facebook/react#23195)) //<BIKI DAS>// - **[feefe43](facebook/react@feefe437f )**: Refactor Cache Code ([facebook#23393](facebook/react#23393)) //<Luna Ruan>// Changelog: [General][Changed] - React Native sync for revisions 1780659...1159ff6 jest_e2e[run_all_tests] Reviewed By: lunaleaps Differential Revision: D34928167 fbshipit-source-id: 8c386f2be5871981d217ab9a514892ed88eafcfb

lunaruan requested a review from acdlite March 3, 2022 19:41

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Mar 3, 2022

acdlite reviewed Mar 3, 2022

View reviewed changes

lunaruan force-pushed the offscreen_state_node branch 3 times, most recently from 914a54f to bd227e0 Compare March 3, 2022 19:52

acdlite reviewed Mar 3, 2022

View reviewed changes

add offscreen state node

4cd1c2e

lunaruan force-pushed the offscreen_state_node branch from bd227e0 to 4cd1c2e Compare March 8, 2022 15:55

acdlite approved these changes Mar 9, 2022

View reviewed changes

lunaruan merged commit 0412f0c into facebook:main Mar 15, 2022

zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022

add offscreen state node (facebook#24026)

7b634a7

Add state node on Offscreen fibers with id (in preparation for transition tracing)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Offscreen stateNode#24026

Add Offscreen stateNode#24026
lunaruan merged 1 commit intofacebook:mainfrom
lunaruan:offscreen_state_node

lunaruan commented Mar 3, 2022

Uh oh!

acdlite Mar 3, 2022

Uh oh!

acdlite Mar 3, 2022

Uh oh!

acdlite Mar 3, 2022

Uh oh!

acdlite Mar 3, 2022

Uh oh!

sizebot commented Mar 8, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	export function createFiberFromOffscreen(
	pendingProps: OffscreenProps,
	mode: TypeOfMode,
	lanes: Lanes,
	key: null \| string,
	) {
	const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
	fiber.elementType = REACT_OFFSCREEN_TYPE;
	fiber.lanes = lanes;
	return fiber;
	}

Conversation

lunaruan commented Mar 3, 2022

Uh oh!

acdlite Mar 3, 2022

Choose a reason for hiding this comment

Uh oh!

acdlite Mar 3, 2022

Choose a reason for hiding this comment

Uh oh!

acdlite Mar 3, 2022

Choose a reason for hiding this comment

Uh oh!

acdlite Mar 3, 2022

Choose a reason for hiding this comment

Uh oh!

sizebot commented Mar 8, 2022

Critical size changes

Significant size changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants