useSyncExternalStore React Native version

[salazarm]

Summary

React Native version of useSyncExternalStore shim. Basically a copy-pasta taking the isServerEnvironment = false branch

How did you test this change?

Not sure how to, recommendations?

[sizebot]

Comparing: 3ee7a00...bcdfcf3

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	=	127.43 kB	127.43 kB	=	40.61 kB	40.61 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	130.26 kB	130.26 kB	=	41.53 kB	41.53 kB
facebook-www/ReactDOM-prod.classic.js	=	405.48 kB	405.48 kB	=	75.07 kB	75.07 kB
facebook-www/ReactDOM-prod.modern.js	=	394.07 kB	394.07 kB	=	73.36 kB	73.36 kB
facebook-www/ReactDOMForked-prod.classic.js	=	405.48 kB	405.48 kB	=	75.07 kB	75.07 kB
oss-experimental/use-sync-external-store/cjs/use-sync-external-store.native.development.js	+∞%	0.00 kB	7.37 kB	+∞%	0.00 kB	3.02 kB
oss-experimental/use-sync-external-store/cjs/use-sync-external-store.native.production.min.js	+∞%	0.00 kB	0.89 kB	+∞%	0.00 kB	0.53 kB
oss-experimental/use-sync-external-store/index.native.js	+∞%	0.00 kB	0.24 kB	+∞%	0.00 kB	0.16 kB
oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store.native.development.js	+∞%	0.00 kB	7.37 kB	+∞%	0.00 kB	3.02 kB
oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store.native.production.min.js	+∞%	0.00 kB	0.89 kB	+∞%	0.00 kB	0.53 kB
oss-stable-semver/use-sync-external-store/index.native.js	+∞%	0.00 kB	0.24 kB	+∞%	0.00 kB	0.16 kB
oss-stable/use-sync-external-store/cjs/use-sync-external-store.native.development.js	+∞%	0.00 kB	7.37 kB	+∞%	0.00 kB	3.02 kB
oss-stable/use-sync-external-store/cjs/use-sync-external-store.native.production.min.js	+∞%	0.00 kB	0.89 kB	+∞%	0.00 kB	0.53 kB
oss-stable/use-sync-external-store/index.native.js	+∞%	0.00 kB	0.24 kB	+∞%	0.00 kB	0.16 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/use-sync-external-store/cjs/use-sync-external-store.native.development.js	+∞%	0.00 kB	7.37 kB	+∞%	0.00 kB	3.02 kB
oss-experimental/use-sync-external-store/cjs/use-sync-external-store.native.production.min.js	+∞%	0.00 kB	0.89 kB	+∞%	0.00 kB	0.53 kB
oss-experimental/use-sync-external-store/index.native.js	+∞%	0.00 kB	0.24 kB	+∞%	0.00 kB	0.16 kB
oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store.native.development.js	+∞%	0.00 kB	7.37 kB	+∞%	0.00 kB	3.02 kB
oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store.native.production.min.js	+∞%	0.00 kB	0.89 kB	+∞%	0.00 kB	0.53 kB
oss-stable-semver/use-sync-external-store/index.native.js	+∞%	0.00 kB	0.24 kB	+∞%	0.00 kB	0.16 kB
oss-stable/use-sync-external-store/cjs/use-sync-external-store.native.development.js	+∞%	0.00 kB	7.37 kB	+∞%	0.00 kB	3.02 kB
oss-stable/use-sync-external-store/cjs/use-sync-external-store.native.production.min.js	+∞%	0.00 kB	0.89 kB	+∞%	0.00 kB	0.53 kB
oss-stable/use-sync-external-store/index.native.js	+∞%	0.00 kB	0.24 kB	+∞%	0.00 kB	0.16 kB
oss-experimental/use-sync-external-store/cjs/use-sync-external-store.development.js	=	8.02 kB	7.89 kB	=	3.23 kB	3.16 kB
oss-stable-semver/use-sync-external-store/cjs/use-sync-external-store.development.js	=	8.02 kB	7.89 kB	=	3.23 kB	3.16 kB
oss-stable/use-sync-external-store/cjs/use-sync-external-store.development.js	=	8.02 kB	7.89 kB	=	3.23 kB	3.16 kB

Generated by 🚫 dangerJS against bcdfcf3

[acdlite]

Forking the whole file works but in this case I think it'd be easy enough to compose two separate entry points. Something like this should work:

index.js:

import {canUseDOM} from 'shared/ExecutionEnvironment';
import client from './useSyncExternalStoreClient';
import server from './useSyncExternalStoreServer';

export const useSyncExternalStore = canUseDOM ? client : server;

index.native.js

export {default as useSyncExternalStore} from './useSyncExternalStoreClient';

[acdlite]

For testing, I think it's sufficient to require use-sync-external-store/index.native directly in a test suite that has @jest-environment node at the top, and write a test using a non-DOM renderer. So React Noop would be sufficient.

[acdlite]

You'll also need to update our build script. For example, we need to add a new entry here:

react/scripts/rollup/bundles.js

Lines 687 to 694 in 3ee7a00

	/******* Shim for useSyncExternalStore *******/
	{
	bundleTypes: [NODE_DEV, NODE_PROD],
	moduleType: ISOMORPHIC,
	entry: 'use-sync-external-store',
	global: 'useSyncExternalStore',
	externals: ['react'],
	},

Our build setup is a bit confusing if you haven't worked with it before so I recommend using this PR as a reference: #22202. I can also pair with you if you like.

[acdlite]

Looks great!

[acdlite]

Ah, you need to also add the new index.native file to this array:

react/packages/use-sync-external-store/package.json

Lines 11 to 16 in cb6c619

	"LICENSE",
	"README.md",
	"build-info.json",
	"index.js",
	"extra.js",
	"cjs/"