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

Update cache() and use() to the canary aka next channel (#25502)

Testing what it would look like to move this to the `next` channel.

Sebastian Markbåge committed Oct 23, 2022 at 23:20 UTC e7c5af45ceb8fa2b64d39ec68345254ce9abd65e
51 files changed +325 -279
ReactVersions.js
+2 -6
@@ -30,6 +30,7 @@ const stablePackages = {
30 react: ReactVersion,
31 'react-art': ReactVersion,
32 'react-dom': ReactVersion,
33 + 'react-server-dom-webpack': ReactVersion,
34 'react-is': ReactVersion,
35 'react-reconciler': '0.30.0',
36 'react-refresh': '0.15.0',
@@ -42,12 +43,7 @@ const stablePackages = {
43 // These packages do not exist in the @next or @latest channel, only
44 // @experimental. We don't use semver, just the commit sha, so this is just a
45 // list of package names instead of a map.
45 -const experimentalPackages = [
46 - 'react-fetch',
47 - 'react-fs',
48 - 'react-pg',
49 - 'react-server-dom-webpack',
50 -];
46 +const experimentalPackages = ['react-fetch', 'react-fs', 'react-pg'];
47
48 module.exports = {
49 ReactVersion,
fixtures/fizz-ssr-browser/index.html
+1
@@ -17,6 +17,7 @@
17 </p>
18 </div>
19 <script src="../../build/node_modules/react/umd/react.development.js"></script>
20 + <script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
21 <script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
22 <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
23 <script type="text/babel">
fixtures/flight-browser/index.html
+4 -3
@@ -83,7 +83,7 @@
83 }
84
85 function Shell({ data }) {
86 - let model = React.experimental_use(data);
86 + let model = React.use(data);
87 return <div>
88 <Suspense fallback="...">
89 <h1>{model.title}</h1>
@@ -94,11 +94,12 @@
94
95 function renderResult(data) {
96 let container = document.getElementById('container');
97 - ReactDOM.render(
97 + ReactDOM.createRoot(
98 + container
99 + ).render(
100 <Suspense fallback="Loading...">
101 <Shell data={data} />
102 </Suspense>,
101 - container
103 );
104 }
105 </script>
fixtures/flight/src/index.js
+1 -1
@@ -6,7 +6,7 @@ import ReactServerDOMReader from 'react-server-dom-webpack/client';
6 let data = ReactServerDOMReader.createFromFetch(fetch('http://localhost:3001'));
7
8 function Content() {
9 - return React.experimental_use(data);
9 + return React.use(data);
10 }
11
12 ReactDOM.createRoot(document.getElementById('root')).render(
packages/react-client/src/__tests__/ReactFlight-test.js
+1 -1
@@ -27,7 +27,7 @@ describe('ReactFlight', () => {
27
28 React = require('react');
29 startTransition = React.startTransition;
30 - use = React.experimental_use;
30 + use = React.use;
31 ReactNoop = require('react-noop-renderer');
32 ReactNoopFlightServer = require('react-noop-renderer/flight-server');
33 ReactNoopFlightClient = require('react-noop-renderer/flight-client');
packages/react-dom/index.classic.fb.js
+2
@@ -33,6 +33,8 @@ export {
33 unstable_isNewReconciler,
34 unstable_renderSubtreeIntoContainer,
35 unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
36 + preinit,
37 + preload,
38 version,
39 } from './src/client/ReactDOM';
40
packages/react-dom/index.experimental.js
+2 -2
@@ -20,7 +20,7 @@ export {
20 unstable_batchedUpdates,
21 unstable_renderSubtreeIntoContainer,
22 unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
23 + preinit,
24 + preload,
25 version,
26 } from './src/client/ReactDOM';
25 -
26 -export {preinit, preload} from 'react-dom-bindings/src/shared/ReactDOMFloat';
packages/react-dom/index.js
+2
@@ -25,5 +25,7 @@ export {
25 unstable_isNewReconciler,
26 unstable_renderSubtreeIntoContainer,
27 unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
28 + preinit,
29 + preload,
30 version,
31 } from './src/client/ReactDOM';
packages/react-dom/index.modern.fb.js
+2
@@ -18,5 +18,7 @@ export {
18 unstable_flushControlled,
19 unstable_isNewReconciler,
20 unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
21 + preinit,
22 + preload,
23 version,
24 } from './src/client/ReactDOM';
packages/react-dom/index.stable.js
+2
@@ -19,5 +19,7 @@ export {
19 unmountComponentAtNode,
20 unstable_batchedUpdates,
21 unstable_renderSubtreeIntoContainer,
22 + preinit,
23 + preload,
24 version,
25 } from './src/client/ReactDOM';
packages/react-dom/server-rendering-stub.experimental.js deleted
-22
@@ -1,22 +0,0 @@
1 -/**
2 - * Copyright (c) Meta Platforms, Inc. and affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - *
7 - * @flow
8 - */
9 -
10 -// Export all exports so that they're available in tests.
11 -// We can't use export * from in Flow for some reason.
12 -
13 -import ReactVersion from 'shared/ReactVersion';
14 -export {ReactVersion as version};
15 -
16 -export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './src/ReactDOMSharedInternals';
17 -
18 -export {
19 - createPortal,
20 - flushSync,
21 -} from './src/server/ReactDOMServerRenderingStub';
22 -export {preinit, preload} from 'react-dom-bindings/src/shared/ReactDOMFloat';
packages/react-dom/server-rendering-stub.js
+2
@@ -18,4 +18,6 @@ export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './s
18 export {
19 createPortal,
20 flushSync,
21 + preload,
22 + preinit,
23 } from './src/server/ReactDOMServerRenderingStub';
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+1 -1
@@ -41,9 +41,9 @@ describe('ReactDOMFizzServer', () => {
41 ReactDOMFizzServer = require('react-dom/server');
42 Stream = require('stream');
43 Suspense = React.Suspense;
44 + use = React.use;
45 if (gate(flags => flags.enableSuspenseList)) {
46 SuspenseList = React.SuspenseList;
46 - use = React.experimental_use;
47 }
48
49 PropTypes = require('prop-types');
packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+2 -3
@@ -1963,7 +1963,7 @@ describe('ReactDOMFloat', () => {
1963 );
1964 });
1965
1966 - // @gate enableFloat
1966 + // @gate enableFloat && enableHostSingletons && (enableClientRenderFallbackOnTextMismatch || !__DEV__)
1967 it('can render a title before a singleton even if that singleton clears its contents', async () => {
1968 await actIntoEmptyDocument(() => {
1969 const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -1975,7 +1975,6 @@ describe('ReactDOMFloat', () => {
1975 <div>server</div>
1976 </body>
1977 </html>
1978 - ,
1978 </>,
1979 );
1980 pipe(writable);
@@ -2243,7 +2242,7 @@ describe('ReactDOMFloat', () => {
2242 );
2243 });
2244
2246 - // @gate enableFloat && enableHostSingletons
2245 + // @gate enableFloat && enableHostSingletons && enableClientRenderFallbackOnTextMismatch
2246 it('retains styles even when a new html, head, and/body mount', async () => {
2247 await actIntoEmptyDocument(() => {
2248 const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
packages/react-dom/src/__tests__/ReactDOMInReactServer-test.js
-1
@@ -15,7 +15,6 @@ describe('ReactDOMInReactServer', () => {
15 jest.mock('react', () => require('react/react.shared-subset'));
16 });
17
18 - // @gate experimental && !www
18 it('can require react-dom', () => {
19 // In RSC this will be aliased.
20 require('react');
packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
+1 -1
@@ -153,7 +153,7 @@ function resolveMostRecentTextCache(text) {
153
154 const resolveText = resolveMostRecentTextCache;
155
156 -// @gate enableCache
156 +// @gate enableLegacyCache
157 // @gate enableSuspenseList
158 test('regression (#20932): return pointer is correct before entering deleted tree', async () => {
159 // Based on a production bug. Designed to trigger a very specific
packages/react-dom/src/client/ReactDOM.js
+2
@@ -76,6 +76,8 @@ import {
76 } from 'react-dom-bindings/src/events/ReactDOMControlledComponent';
77 import Internals from '../ReactDOMSharedInternals';
78
79 +export {preinit, preload} from 'react-dom-bindings/src/shared/ReactDOMFloat';
80 +
81 setAttemptSynchronousHydration(attemptSynchronousHydration);
82 setAttemptDiscreteHydration(attemptDiscreteHydration);
83 setAttemptContinuousHydration(attemptContinuousHydration);
packages/react-dom/src/server/ReactDOMServerRenderingStub.js
+2
@@ -7,6 +7,8 @@
7 * @flow
8 */
9
10 +export {preinit, preload} from 'react-dom-bindings/src/shared/ReactDOMFloat';
11 +
12 export function createPortal() {
13 throw new Error(
14 'createPortal was called on the server. Portals are not currently' +
packages/react-reconciler/src/ReactFiberHooks.new.js
+12 -3
@@ -40,6 +40,7 @@ import {
40 enableUseHook,
41 enableUseMemoCacheHook,
42 enableUseEventHook,
43 + enableLegacyCache,
44 } from 'shared/ReactFeatureFlags';
45 import {
46 REACT_CONTEXT_TYPE,
@@ -2357,9 +2358,17 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
2358 // unmount that boundary before the refresh completes.
2359 const seededCache = createCache();
2360 if (seedKey !== null && seedKey !== undefined && root !== null) {
2360 - // Seed the cache with the value passed by the caller. This could be
2361 - // from a server mutation, or it could be a streaming response.
2362 - seededCache.data.set(seedKey, seedValue);
2361 + if (enableLegacyCache) {
2362 + // Seed the cache with the value passed by the caller. This could be
2363 + // from a server mutation, or it could be a streaming response.
2364 + seededCache.data.set(seedKey, seedValue);
2365 + } else {
2366 + if (__DEV__) {
2367 + console.error(
2368 + 'The seed argument is not enabled outside experimental channels.',
2369 + );
2370 + }
2371 + }
2372 }
2373
2374 const payload = {
packages/react-reconciler/src/ReactFiberHooks.old.js
+12 -3
@@ -40,6 +40,7 @@ import {
40 enableUseHook,
41 enableUseMemoCacheHook,
42 enableUseEventHook,
43 + enableLegacyCache,
44 } from 'shared/ReactFeatureFlags';
45 import {
46 REACT_CONTEXT_TYPE,
@@ -2357,9 +2358,17 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
2358 // unmount that boundary before the refresh completes.
2359 const seededCache = createCache();
2360 if (seedKey !== null && seedKey !== undefined && root !== null) {
2360 - // Seed the cache with the value passed by the caller. This could be
2361 - // from a server mutation, or it could be a streaming response.
2362 - seededCache.data.set(seedKey, seedValue);
2361 + if (enableLegacyCache) {
2362 + // Seed the cache with the value passed by the caller. This could be
2363 + // from a server mutation, or it could be a streaming response.
2364 + seededCache.data.set(seedKey, seedValue);
2365 + } else {
2366 + if (__DEV__) {
2367 + console.error(
2368 + 'The seed argument is not enabled outside experimental channels.',
2369 + );
2370 + }
2371 + }
2372 }
2373
2374 const payload = {
packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
+2 -2
@@ -292,7 +292,7 @@ describe('act warnings', () => {
292 });
293
294 // @gate __DEV__
295 - // @gate enableCache
295 + // @gate enableLegacyCache
296 test('warns if Suspense retry is not wrapped', () => {
297 function App() {
298 return (
@@ -322,7 +322,7 @@ describe('act warnings', () => {
322 });
323
324 // @gate __DEV__
325 - // @gate enableCache
325 + // @gate enableLegacyCache
326 test('warns if Suspense ping is not wrapped', () => {
327 function App({showMore}) {
328 return (
packages/react-reconciler/src/__tests__/ReactCache-test.js
+49 -46
@@ -25,7 +25,7 @@ describe('ReactCache', () => {
25 Scheduler = require('scheduler');
26 act = require('jest-react').act;
27 Suspense = React.Suspense;
28 - cache = React.experimental_cache;
28 + cache = React.cache;
29 Offscreen = React.unstable_Offscreen;
30 getCacheSignal = React.unstable_getCacheSignal;
31 useCacheRefresh = React.unstable_useCacheRefresh;
@@ -85,7 +85,7 @@ describe('ReactCache', () => {
85 });
86
87 function readText(text) {
88 - const signal = getCacheSignal();
88 + const signal = getCacheSignal ? getCacheSignal() : null;
89 const textCache = getTextCache();
90 const record = textCache.data.get(text);
91 if (record !== undefined) {
@@ -94,11 +94,13 @@ describe('ReactCache', () => {
94 // schedule a cleanup function for it.
95 // TODO: Add ability to cleanup entries seeded w useCacheRefresh()
96 record.cleanupScheduled = true;
97 - signal.addEventListener('abort', () => {
98 - Scheduler.unstable_yieldValue(
99 - `Cache cleanup: ${text} [v${textCache.version}]`,
100 - );
101 - });
97 + if (getCacheSignal) {
98 + signal.addEventListener('abort', () => {
99 + Scheduler.unstable_yieldValue(
100 + `Cache cleanup: ${text} [v${textCache.version}]`,
101 + );
102 + });
103 + }
104 }
105 switch (record.status) {
106 case 'pending':
@@ -140,11 +142,13 @@ describe('ReactCache', () => {
142 };
143 textCache.data.set(text, newRecord);
144
143 - signal.addEventListener('abort', () => {
144 - Scheduler.unstable_yieldValue(
145 - `Cache cleanup: ${text} [v${textCache.version}]`,
146 - );
147 - });
145 + if (getCacheSignal) {
146 + signal.addEventListener('abort', () => {
147 + Scheduler.unstable_yieldValue(
148 + `Cache cleanup: ${text} [v${textCache.version}]`,
149 + );
150 + });
151 + }
152 throw thenable;
153 }
154 }
@@ -178,7 +182,7 @@ describe('ReactCache', () => {
182 }
183 }
184
181 - // @gate experimental || www
185 + // @gate enableCacheElement && enableCache
186 test('render Cache component', async () => {
187 const root = ReactNoop.createRoot();
188 await act(async () => {
@@ -187,7 +191,7 @@ describe('ReactCache', () => {
191 expect(root).toMatchRenderedOutput('Hi');
192 });
193
190 - // @gate experimental || www
194 + // @gate enableCacheElement && enableCache
195 test('mount new data', async () => {
196 const root = ReactNoop.createRoot();
197 await act(async () => {
@@ -216,7 +220,7 @@ describe('ReactCache', () => {
220 expect(root).toMatchRenderedOutput('Bye');
221 });
222
219 - // @gate experimental || www
223 + // @gate enableCache
224 test('root acts as implicit cache boundary', async () => {
225 const root = ReactNoop.createRoot();
226 await act(async () => {
@@ -243,7 +247,7 @@ describe('ReactCache', () => {
247 expect(root).toMatchRenderedOutput('Bye');
248 });
249
246 - // @gate experimental || www
250 + // @gate enableCacheElement && enableCache
251 test('multiple new Cache boundaries in the same mount share the same, fresh root cache', async () => {
252 function App() {
253 return (
@@ -290,7 +294,7 @@ describe('ReactCache', () => {
294 expect(root).toMatchRenderedOutput('Bye');
295 });
296
293 - // @gate experimental || www
297 + // @gate enableCacheElement && enableCache
298 test('multiple new Cache boundaries in the same update share the same, fresh cache', async () => {
299 function App({showMore}) {
300 return showMore ? (
@@ -346,7 +350,7 @@ describe('ReactCache', () => {
350 expect(root).toMatchRenderedOutput('Bye');
351 });
352
349 - // @gate experimental || www
353 + // @gate enableCacheElement && enableCache
354 test(
355 'nested cache boundaries share the same cache as the root during ' +
356 'the initial render',
@@ -386,7 +390,7 @@ describe('ReactCache', () => {
390 },
391 );
392
389 - // @gate experimental || www
393 + // @gate enableCacheElement && enableCache
394 test('new content inside an existing Cache boundary should re-use already cached data', async () => {
395 function App({showMore}) {
396 return (
@@ -430,7 +434,7 @@ describe('ReactCache', () => {
434 expect(root).toMatchRenderedOutput('Bye');
435 });
436
433 - // @gate experimental || www
437 + // @gate enableCacheElement && enableCache
438 test('a new Cache boundary uses fresh cache', async () => {
439 // The only difference from the previous test is that the "Show More"
440 // content is wrapped in a nested <Cache /> boundary
@@ -488,7 +492,7 @@ describe('ReactCache', () => {
492 expect(root).toMatchRenderedOutput('Bye!');
493 });
494
491 - // @gate experimental || www
495 + // @gate enableCacheElement && enableCache
496 test('inner/outer cache boundaries uses the same cache instance on initial render', async () => {
497 const root = ReactNoop.createRoot();
498
@@ -570,7 +574,7 @@ describe('ReactCache', () => {
574 expect(root).toMatchRenderedOutput('Bye');
575 });
576
573 - // @gate experimental || www
577 + // @gate enableCacheElement && enableCache
578 test('inner/ outer cache boundaries added in the same update use the same cache instance', async () => {
579 const root = ReactNoop.createRoot();
580
@@ -662,7 +666,7 @@ describe('ReactCache', () => {
666 expect(root).toMatchRenderedOutput('Bye');
667 });
668
665 - // @gate experimental || www
669 + // @gate enableCache
670 test('refresh a cache boundary', async () => {
671 let refresh;
672 function App() {
@@ -674,11 +678,9 @@ describe('ReactCache', () => {
678 const root = ReactNoop.createRoot();
679 await act(async () => {
680 root.render(
677 - <Cache>
678 - <Suspense fallback={<Text text="Loading..." />}>
679 - <App />
680 - </Suspense>
681 - </Cache>,
681 + <Suspense fallback={<Text text="Loading..." />}>
682 + <App />
683 + </Suspense>,
684 );
685 });
686 expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
@@ -701,19 +703,20 @@ describe('ReactCache', () => {
703 resolveMostRecentTextCache('A');
704 });
705 // Note that the version has updated
704 - expect(Scheduler).toHaveYielded(['A [v2]']);
706 + if (getCacheSignal) {
707 + expect(Scheduler).toHaveYielded(['A [v2]', 'Cache cleanup: A [v1]']);
708 + } else {
709 + expect(Scheduler).toHaveYielded(['A [v2]']);
710 + }
711 expect(root).toMatchRenderedOutput('A [v2]');
712
713 await act(async () => {
714 root.render('Bye');
715 });
710 - // the original cache instance does not cleanup since it is still referenced
711 - // by the root, but the refreshed inner cache does cleanup
712 - expect(Scheduler).toHaveYielded(['Cache cleanup: A [v2]']);
716 expect(root).toMatchRenderedOutput('Bye');
717 });
718
716 - // @gate experimental || www
719 + // @gate enableCacheElement && enableCache
720 test('refresh the root cache', async () => {
721 let refresh;
722 function App() {
@@ -761,7 +764,7 @@ describe('ReactCache', () => {
764 expect(root).toMatchRenderedOutput('Bye');
765 });
766
764 - // @gate experimental || www
767 + // @gate enableCacheElement && enableCache
768 test('refresh the root cache without a transition', async () => {
769 let refresh;
770 function App() {
@@ -816,7 +819,7 @@ describe('ReactCache', () => {
819 expect(root).toMatchRenderedOutput('Bye');
820 });
821
819 - // @gate experimental || www
822 + // @gate enableCacheElement && enableCache
823 test('refresh a cache with seed data', async () => {
824 let refreshWithSeed;
825 function App() {
@@ -879,7 +882,7 @@ describe('ReactCache', () => {
882 expect(root).toMatchRenderedOutput('Bye');
883 });
884
882 - // @gate experimental || www
885 + // @gate enableCacheElement && enableCache
886 test('refreshing a parent cache also refreshes its children', async () => {
887 let refreshShell;
888 function RefreshShell() {
@@ -958,7 +961,7 @@ describe('ReactCache', () => {
961 expect(root).toMatchRenderedOutput('Bye!');
962 });
963
961 - // @gate experimental || www
964 + // @gate enableCacheElement && enableCache
965 test(
966 'refreshing a cache boundary does not refresh the other boundaries ' +
967 'that mounted at the same time (i.e. the ones that share the same cache)',
@@ -1046,7 +1049,7 @@ describe('ReactCache', () => {
1049 },
1050 );
1051
1049 - // @gate experimental || www
1052 + // @gate enableCacheElement && enableCache
1053 test(
1054 'mount a new Cache boundary in a sibling while simultaneously ' +
1055 'resolving a Suspense boundary',
@@ -1119,7 +1122,7 @@ describe('ReactCache', () => {
1122 },
1123 );
1124
1122 - // @gate experimental || www
1125 + // @gate enableCacheElement && enableCache
1126 test('cache pool is cleared once transitions that depend on it commit their shell', async () => {
1127 function Child({text}) {
1128 return (
@@ -1215,7 +1218,7 @@ describe('ReactCache', () => {
1218 expect(root).toMatchRenderedOutput('Bye!');
1219 });
1220
1218 - // @gate experimental || www
1221 + // @gate enableCacheElement && enableCache
1222 test('cache pool is not cleared by arbitrary commits', async () => {
1223 function App() {
1224 return (
@@ -1294,7 +1297,7 @@ describe('ReactCache', () => {
1297 expect(root).toMatchRenderedOutput('Bye!');
1298 });
1299
1297 - // @gate experimental || www
1300 + // @gate enableCacheElement && enableCache
1301 test('cache boundary uses a fresh cache when its key changes', async () => {
1302 const root = ReactNoop.createRoot();
1303 seedNextTextCache('A');
@@ -1333,7 +1336,7 @@ describe('ReactCache', () => {
1336 expect(root).toMatchRenderedOutput('Bye!');
1337 });
1338
1336 - // @gate experimental || www
1339 + // @gate enableCacheElement && enableCache
1340 test('overlapping transitions after an initial mount use the same fresh cache', async () => {
1341 const root = ReactNoop.createRoot();
1342 await act(async () => {
@@ -1404,7 +1407,7 @@ describe('ReactCache', () => {
1407 expect(root).toMatchRenderedOutput('Bye!');
1408 });
1409
1407 - // @gate experimental || www
1410 + // @gate enableCacheElement && enableCache
1411 test('overlapping updates after an initial mount use the same fresh cache', async () => {
1412 const root = ReactNoop.createRoot();
1413 await act(async () => {
@@ -1470,7 +1473,7 @@ describe('ReactCache', () => {
1473 expect(root).toMatchRenderedOutput('Bye!');
1474 });
1475
1473 - // @gate experimental || www
1476 + // @gate enableCacheElement && enableCache
1477 test('cleans up cache only used in an aborted transition', async () => {
1478 const root = ReactNoop.createRoot();
1479 seedNextTextCache('A');
@@ -1525,7 +1528,7 @@ describe('ReactCache', () => {
1528 expect(root).toMatchRenderedOutput('Bye!');
1529 });
1530
1528 - // @gate experimental || www
1531 + // @gate enableCacheElement && enableCache
1532 test.skip('if a root cache refresh never commits its fresh cache is released', async () => {
1533 const root = ReactNoop.createRoot();
1534 let refresh;
@@ -1567,7 +1570,7 @@ describe('ReactCache', () => {
1570 expect(root).toMatchRenderedOutput('Bye!');
1571 });
1572
1570 - // @gate experimental || www
1573 + // @gate enableCacheElement && enableCache
1574 test.skip('if a cache boundary refresh never commits its fresh cache is released', async () => {
1575 const root = ReactNoop.createRoot();
1576 let refresh;
packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js
+4 -4
@@ -157,7 +157,7 @@ describe('ReactConcurrentErrorRecovery', () => {
157
158 const rejectText = rejectMostRecentTextCache;
159
160 - // @gate enableCache
160 + // @gate enableLegacyCache
161 test('errors during a refresh transition should not force fallbacks to display (suspend then error)', async () => {
162 class ErrorBoundary extends React.Component {
163 state = {error: null};
@@ -278,7 +278,7 @@ describe('ReactConcurrentErrorRecovery', () => {
278 expect(root).toMatchRenderedOutput('A2Oops!');
279 });
280
281 - // @gate enableCache
281 + // @gate enableLegacyCache
282 test('errors during a refresh transition should not force fallbacks to display (error then suspend)', async () => {
283 class ErrorBoundary extends React.Component {
284 state = {error: null};
@@ -399,7 +399,7 @@ describe('ReactConcurrentErrorRecovery', () => {
399 expect(root).toMatchRenderedOutput('Oops!B2');
400 });
401
402 - // @gate enableCache
402 + // @gate enableLegacyCache
403 test('suspending in the shell (outside a Suspense boundary) should not throw, warn, or log during a transition', async () => {
404 class ErrorBoundary extends React.Component {
405 state = {error: null};
@@ -449,7 +449,7 @@ describe('ReactConcurrentErrorRecovery', () => {
449 expect(root).toMatchRenderedOutput('Async');
450 });
451
452 - // @gate enableCache
452 + // @gate enableLegacyCache
453 test(
454 'errors during a suspended transition at the shell should not force ' +
455 'fallbacks to display (error then suspend)',
packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
+4 -4
@@ -344,7 +344,7 @@ describe('ReactLazyContextPropagation', () => {
344 expect(root).toMatchRenderedOutput('0');
345 });
346
347 - // @gate enableCache
347 + // @gate enableLegacyCache
348 test('context is propagated across retries', async () => {
349 const root = ReactNoop.createRoot();
350
@@ -405,7 +405,7 @@ describe('ReactLazyContextPropagation', () => {
405 expect(root).toMatchRenderedOutput('BB');
406 });
407
408 - // @gate enableCache
408 + // @gate enableLegacyCache
409 test('multiple contexts are propagated across retries', async () => {
410 // Same as previous test, but with multiple context providers
411 const root = ReactNoop.createRoot();
@@ -485,7 +485,7 @@ describe('ReactLazyContextPropagation', () => {
485 expect(root).toMatchRenderedOutput('BBB');
486 });
487
488 - // @gate enableCache
488 + // @gate enableLegacyCache
489 test('context is propagated across retries (legacy)', async () => {
490 const root = ReactNoop.createLegacyRoot();
491
@@ -749,7 +749,7 @@ describe('ReactLazyContextPropagation', () => {
749 expect(root).toMatchRenderedOutput('BB');
750 });
751
752 - // @gate enableCache
752 + // @gate enableLegacyCache
753 test('nested bailouts across retries', async () => {
754 // Lazy context propagation will stop propagating when it hits the first
755 // match. If we bail out again inside that tree, we must resume propagating.
packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
+1 -1
@@ -25,7 +25,7 @@ describe('isomorphic act()', () => {
25 DiscreteEventPriority = require('react-reconciler/constants')
26 .DiscreteEventPriority;
27 act = React.unstable_act;
28 - use = React.experimental_use;
28 + use = React.use;
29 Suspense = React.Suspense;
30 startTransition = React.startTransition;
31 });
packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
+24 -24
@@ -206,7 +206,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
206 }
207
208 describe('when a component suspends during initial mount', () => {
209 - // @gate enableCache
209 + // @gate enableLegacyCache
210 it('should not change behavior in concurrent mode', async () => {
211 class ClassText extends React.Component {
212 componentDidMount() {
@@ -323,7 +323,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
323 expect(ReactNoop.getChildren()).toEqual([]);
324 });
325
326 - // @gate enableCache
326 + // @gate enableLegacyCache
327 it('should not change behavior in sync', async () => {
328 class ClassText extends React.Component {
329 componentDidMount() {
@@ -442,7 +442,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
442 });
443
444 describe('layout effects within a tree that re-suspends in an update', () => {
445 - // @gate enableCache
445 + // @gate enableLegacyCache
446 it('should not be destroyed or recreated in legacy roots', async () => {
447 function App({children = null}) {
448 Scheduler.unstable_yieldValue('App render');
@@ -565,7 +565,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
565 ]);
566 });
567
568 - // @gate enableCache
568 + // @gate enableLegacyCache
569 it('should be destroyed and recreated for function components', async () => {
570 function App({children = null}) {
571 Scheduler.unstable_yieldValue('App render');
@@ -693,7 +693,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
693 ]);
694 });
695
696 - // @gate enableCache
696 + // @gate enableLegacyCache
697 it('should be destroyed and recreated for class components', async () => {
698 class ClassText extends React.Component {
699 componentDidMount() {
@@ -837,7 +837,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
837 ]);
838 });
839
840 - // @gate enableCache
840 + // @gate enableLegacyCache
841 it('should be destroyed and recreated when nested below host components', async () => {
842 function App({children = null}) {
843 Scheduler.unstable_yieldValue('App render');
@@ -946,7 +946,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
946 ]);
947 });
948
949 - // @gate enableCache
949 + // @gate enableLegacyCache
950 it('should be destroyed and recreated even if there is a bailout because of memoization', async () => {
951 const MemoizedText = React.memo(Text, () => true);
952
@@ -1061,7 +1061,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1061 ]);
1062 });
1063
1064 - // @gate enableCache
1064 + // @gate enableLegacyCache
1065 it('should respect nested suspense boundaries', async () => {
1066 function App({innerChildren = null, outerChildren = null}) {
1067 return (
@@ -1283,7 +1283,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1283 ]);
1284 });
1285
1286 - // @gate enableCache
1286 + // @gate enableLegacyCache
1287 it('should show nested host nodes if multiple boundaries resolve at the same time', async () => {
1288 function App({innerChildren = null, outerChildren = null}) {
1289 return (
@@ -1392,7 +1392,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1392 ]);
1393 });
1394
1395 - // @gate enableCache
1395 + // @gate enableLegacyCache
1396 it('should be cleaned up inside of a fallback that suspends', async () => {
1397 function App({fallbackChildren = null, outerChildren = null}) {
1398 return (
@@ -1534,7 +1534,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1534 ]);
1535 });
1536
1537 - // @gate enableCache
1537 + // @gate enableLegacyCache
1538 it('should be cleaned up inside of a fallback that suspends (alternate)', async () => {
1539 function App({fallbackChildren = null, outerChildren = null}) {
1540 return (
@@ -1653,7 +1653,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1653 ]);
1654 });
1655
1656 - // @gate enableCache
1656 + // @gate enableLegacyCache
1657 it('should be cleaned up deeper inside of a subtree that suspends', async () => {
1658 function ConditionalSuspense({shouldSuspend}) {
1659 if (shouldSuspend) {
@@ -1735,7 +1735,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1735 });
1736
1737 describe('that throw errors', () => {
1738 - // @gate enableCache
1738 + // @gate enableLegacyCache
1739 it('are properly handled for componentDidMount', async () => {
1740 let componentDidMountShouldThrow = false;
1741
@@ -1873,7 +1873,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1873 expect(ReactNoop.getChildren()).toEqual([span('Error')]);
1874 });
1875
1876 - // @gate enableCache
1876 + // @gate enableLegacyCache
1877 it('are properly handled for componentWillUnmount', async () => {
1878 class ThrowsInWillUnmount extends React.Component {
1879 componentDidMount() {
@@ -1984,7 +1984,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
1984 expect(ReactNoop.getChildren()).toEqual([span('Error')]);
1985 });
1986
1987 - // @gate enableCache
1987 + // @gate enableLegacyCache
1988 // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
1989 it('are properly handled for layout effect creation', async () => {
1990 let useLayoutEffectShouldThrow = false;
@@ -2123,7 +2123,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2123 expect(ReactNoop.getChildren()).toEqual([span('Error')]);
2124 });
2125
2126 - // @gate enableCache
2126 + // @gate enableLegacyCache
2127 // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
2128 it('are properly handled for layout effect destruction', async () => {
2129 function ThrowsInLayoutEffectDestroy() {
@@ -2234,7 +2234,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2234 });
2235 });
2236
2237 - // @gate enableCache
2237 + // @gate enableLegacyCache
2238 it('should be only destroy layout effects once if a tree suspends in multiple places', async () => {
2239 class ClassText extends React.Component {
2240 componentDidMount() {
@@ -2372,7 +2372,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2372 ]);
2373 });
2374
2375 - // @gate enableCache
2375 + // @gate enableLegacyCache
2376 it('should be only destroy layout effects once if a component suspends multiple times', async () => {
2377 class ClassText extends React.Component {
2378 componentDidMount() {
@@ -2569,7 +2569,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2569 return null;
2570 }
2571
2572 - // @gate enableCache
2572 + // @gate enableLegacyCache
2573 it('should not be cleared within legacy roots', async () => {
2574 class ClassComponent extends React.Component {
2575 render() {
@@ -2655,7 +2655,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2655 expect(ReactNoop.getChildren()).toEqual([]);
2656 });
2657
2658 - // @gate enableCache
2658 + // @gate enableLegacyCache
2659 it('should be cleared and reset for host components', async () => {
2660 function App({children}) {
2661 Scheduler.unstable_yieldValue(`App render`);
@@ -2751,7 +2751,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2751 expect(ReactNoop.getChildren()).toEqual([]);
2752 });
2753
2754 - // @gate enableCache
2754 + // @gate enableLegacyCache
2755 it('should be cleared and reset for class components', async () => {
2756 class ClassComponent extends React.Component {
2757 render() {
@@ -2851,7 +2851,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2851 expect(ReactNoop.getChildren()).toEqual([]);
2852 });
2853
2854 - // @gate enableCache
2854 + // @gate enableLegacyCache
2855 it('should be cleared and reset for function components with useImperativeHandle', async () => {
2856 const FunctionComponent = React.forwardRef((props, ref) => {
2857 Scheduler.unstable_yieldValue('FunctionComponent render');
@@ -2955,7 +2955,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
2955 expect(ReactNoop.getChildren()).toEqual([]);
2956 });
2957
2958 - // @gate enableCache
2958 + // @gate enableLegacyCache
2959 it('should not reset for user-managed values', async () => {
2960 function RefChecker({forwardedRef}) {
2961 Scheduler.unstable_yieldValue(`RefChecker render`);
@@ -3052,7 +3052,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
3052 });
3053
3054 describe('that throw errors', () => {
3055 - // @gate enableCache
3055 + // @gate enableLegacyCache
3056 // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
3057 it('are properly handled in ref callbacks', async () => {
3058 let useRefCallbackShouldThrow = false;
packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js
+6 -6
@@ -131,7 +131,7 @@ describe('ReactSuspenseFallback', () => {
131 return {type: 'span', children: [], prop, hidden: false};
132 }
133
134 - // @gate enableCache
134 + // @gate enableLegacyCache
135 it('suspends and shows fallback', () => {
136 ReactNoop.render(
137 <Suspense fallback={<Text text="Loading..." />}>
@@ -143,7 +143,7 @@ describe('ReactSuspenseFallback', () => {
143 expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
144 });
145
146 - // @gate enableCache
146 + // @gate enableLegacyCache
147 it('suspends and shows null fallback', () => {
148 ReactNoop.render(
149 <Suspense fallback={null}>
@@ -158,7 +158,7 @@ describe('ReactSuspenseFallback', () => {
158 expect(ReactNoop.getChildren()).toEqual([]);
159 });
160
161 - // @gate enableCache
161 + // @gate enableLegacyCache
162 it('suspends and shows undefined fallback', () => {
163 ReactNoop.render(
164 <Suspense>
@@ -173,7 +173,7 @@ describe('ReactSuspenseFallback', () => {
173 expect(ReactNoop.getChildren()).toEqual([]);
174 });
175
176 - // @gate enableCache
176 + // @gate enableLegacyCache
177 it('suspends and shows inner fallback', () => {
178 ReactNoop.render(
179 <Suspense fallback={<Text text="Should not show..." />}>
@@ -187,7 +187,7 @@ describe('ReactSuspenseFallback', () => {
187 expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
188 });
189
190 - // @gate enableCache
190 + // @gate enableLegacyCache
191 it('suspends and shows inner undefined fallback', () => {
192 ReactNoop.render(
193 <Suspense fallback={<Text text="Should not show..." />}>
@@ -204,7 +204,7 @@ describe('ReactSuspenseFallback', () => {
204 expect(ReactNoop.getChildren()).toEqual([]);
205 });
206
207 - // @gate enableCache
207 + // @gate enableLegacyCache
208 it('suspends and shows inner null fallback', () => {
209 ReactNoop.render(
210 <Suspense fallback={<Text text="Should not show..." />}>
packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+73 -73
@@ -190,7 +190,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
190 );
191 }
192
193 - // @gate enableCache
193 + // @gate enableLegacyCache
194 it('does not restart rendering for initial render', async () => {
195 function Bar(props) {
196 Scheduler.unstable_yieldValue('Bar');
@@ -259,7 +259,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
259 ]);
260 });
261
262 - // @gate enableCache
262 + // @gate enableLegacyCache
263 it('suspends rendering and continues later', async () => {
264 function Bar(props) {
265 Scheduler.unstable_yieldValue('Bar');
@@ -310,7 +310,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
310 expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
311 });
312
313 - // @gate enableCache
313 + // @gate enableLegacyCache
314 it('suspends siblings and later recovers each independently', async () => {
315 // Render two sibling Suspense components
316 ReactNoop.render(
@@ -349,7 +349,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
349 expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
350 });
351
352 - // @gate enableCache
352 + // @gate enableLegacyCache
353 it('continues rendering siblings after suspending', async () => {
354 // A shell is needed. The update cause it to suspend.
355 ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
@@ -402,7 +402,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
402 // Second condition is redundant but guarantees that the test runs in prod.
403 // TODO: Delete this feature flag.
404 // @gate !replayFailedUnitOfWorkWithInvokeGuardedCallback || !__DEV__
405 - // @gate enableCache
405 + // @gate enableLegacyCache
406 it('retries on error', async () => {
407 class ErrorBoundary extends React.Component {
408 state = {error: null};
@@ -466,7 +466,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
466 // Second condition is redundant but guarantees that the test runs in prod.
467 // TODO: Delete this feature flag.
468 // @gate !replayFailedUnitOfWorkWithInvokeGuardedCallback || !__DEV__
469 - // @gate enableCache
469 + // @gate enableLegacyCache
470 it('retries on error after falling back to a placeholder', async () => {
471 class ErrorBoundary extends React.Component {
472 state = {error: null};
@@ -515,7 +515,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
515 ]);
516 });
517
518 - // @gate enableCache
518 + // @gate enableLegacyCache
519 it('can update at a higher priority while in a suspended state', async () => {
520 function App(props) {
521 return (
@@ -555,7 +555,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
555 expect(ReactNoop.getChildren()).toEqual([span('B'), span('1')]);
556 });
557
558 - // @gate enableCache
558 + // @gate enableLegacyCache
559 it('keeps working on lower priority work after being pinged', async () => {
560 // Advance the virtual time so that we're close to the edge of a bucket.
561 ReactNoop.expire(149);
@@ -601,7 +601,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
601 expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
602 });
603
604 - // @gate enableCache
604 + // @gate enableLegacyCache
605 it('tries rendering a lower priority pending update even if a higher priority one suspends', async () => {
606 function App(props) {
607 if (props.hide) {
@@ -708,7 +708,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
708 expect(Scheduler).toHaveYielded(['Sibling', 'Step 4']);
709 });
710
711 - // @gate enableCache
711 + // @gate enableLegacyCache
712 it('forces an expiration after an update times out', async () => {
713 ReactNoop.render(
714 <Fragment>
@@ -753,7 +753,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
753 expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
754 });
755
756 - // @gate enableCache
756 + // @gate enableLegacyCache
757 it('switches to an inner fallback after suspending for a while', async () => {
758 // Advance the virtual time so that we're closer to the edge of a bucket.
759 ReactNoop.expire(200);
@@ -818,7 +818,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
818 ]);
819 });
820
821 - // @gate enableCache
821 + // @gate enableLegacyCache
822 it('renders an expiration boundary synchronously', async () => {
823 spyOnDev(console, 'error');
824 // Synchronously render a tree that suspends
@@ -849,7 +849,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
849 expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
850 });
851
852 - // @gate enableCache
852 + // @gate enableLegacyCache
853 it('suspending inside an expired expiration boundary will bubble to the next one', async () => {
854 ReactNoop.flushSync(() =>
855 ReactNoop.render(
@@ -873,7 +873,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
873 expect(ReactNoop.getChildren()).toEqual([span('Loading (outer)...')]);
874 });
875
876 - // @gate enableCache
876 + // @gate enableLegacyCache
877 it('expires early by default', async () => {
878 ReactNoop.render(
879 <Fragment>
@@ -915,7 +915,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
915 expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
916 });
917
918 - // @gate enableCache
918 + // @gate enableLegacyCache
919 it('does not expire for transitions', async () => {
920 ReactNoop.render(
921 <Fragment>
@@ -961,7 +961,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
961 expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
962 });
963
964 - // @gate enableCache
964 + // @gate enableLegacyCache
965 it('resolves successfully even if fallback render is pending', async () => {
966 const root = ReactNoop.createRoot();
967 root.render(
@@ -1011,7 +1011,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1011 );
1012 });
1013
1014 - // @gate enableCache
1014 + // @gate enableLegacyCache
1015 it('in concurrent mode, does not error when an update suspends without a Suspense boundary during a sync update', () => {
1016 // NOTE: We may change this to be a warning in the future.
1017 expect(() => {
@@ -1021,7 +1021,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1021 }).not.toThrow();
1022 });
1023
1024 - // @gate enableCache
1024 + // @gate enableLegacyCache
1025 it('in legacy mode, errors when an update suspends without a Suspense boundary during a sync update', () => {
1026 const root = ReactNoop.createLegacyRoot();
1027 expect(() => root.render(<AsyncText text="Async" />)).toThrow(
@@ -1029,7 +1029,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1029 );
1030 });
1031
1032 - // @gate enableCache
1032 + // @gate enableLegacyCache
1033 it('a Suspense component correctly handles more than one suspended child', async () => {
1034 ReactNoop.render(
1035 <Suspense fallback={<Text text="Loading..." />}>
@@ -1051,7 +1051,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1051 expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
1052 });
1053
1054 - // @gate enableCache
1054 + // @gate enableLegacyCache
1055 it('can resume rendering earlier than a timeout', async () => {
1056 ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
1057 expect(Scheduler).toFlushAndYield([]);
@@ -1081,7 +1081,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1081 expect(ReactNoop.getChildren()).toEqual([span('Async')]);
1082 });
1083
1084 - // @gate enableCache
1084 + // @gate enableLegacyCache
1085 it('starts working on an update even if its priority falls between two suspended levels', async () => {
1086 function App(props) {
1087 return (
@@ -1136,7 +1136,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1136 // implementation. It doesn't really test what it was intended to test
1137 // anymore, because all updates to the same queue get entangled together.
1138 // Even if they haven't expired. Consider either deleting or rewriting.
1139 - // @gate enableCache
1139 + // @gate enableLegacyCache
1140 it('flushes all expired updates in a single batch', async () => {
1141 class Foo extends React.Component {
1142 componentDidUpdate() {
@@ -1179,7 +1179,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1179 expect(ReactNoop.getChildren()).toEqual([span('goodbye')]);
1180 });
1181
1182 - // @gate enableCache
1182 + // @gate enableLegacyCache
1183 it('a suspended update that expires', async () => {
1184 // Regression test. This test used to fall into an infinite loop.
1185 function ExpensiveText({text}) {
@@ -1222,7 +1222,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1222 });
1223
1224 describe('legacy mode mode', () => {
1225 - // @gate enableCache
1225 + // @gate enableLegacyCache
1226 it('times out immediately', async () => {
1227 function App() {
1228 return (
@@ -1245,7 +1245,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1245 expect(ReactNoop.getChildren()).toEqual([span('Result')]);
1246 });
1247
1248 - // @gate enableCache
1248 + // @gate enableLegacyCache
1249 it('times out immediately when Suspense is in legacy mode', async () => {
1250 class UpdatingText extends React.Component {
1251 state = {step: 1};
@@ -1319,7 +1319,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1319 );
1320 });
1321
1322 - // @gate enableCache
1322 + // @gate enableLegacyCache
1323 it('does not re-render siblings in loose mode', async () => {
1324 class TextWithLifecycle extends React.Component {
1325 componentDidMount() {
@@ -1394,7 +1394,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1394 );
1395 });
1396
1397 - // @gate enableCache
1397 + // @gate enableLegacyCache
1398 it('suspends inside constructor', async () => {
1399 class AsyncTextInConstructor extends React.Component {
1400 constructor(props) {
@@ -1438,7 +1438,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1438 expect(ReactNoop.getChildren()).toEqual([span('Hi')]);
1439 });
1440
1441 - // @gate enableCache
1441 + // @gate enableLegacyCache
1442 it('does not infinite loop if fallback contains lifecycle method', async () => {
1443 class Fallback extends React.Component {
1444 state = {
@@ -1481,7 +1481,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1481 });
1482
1483 if (global.__PERSISTENT__) {
1484 - // @gate enableCache
1484 + // @gate enableLegacyCache
1485 it('hides/unhides suspended children before layout effects fire (persistent)', async () => {
1486 const {useRef, useLayoutEffect} = React;
1487
@@ -1525,7 +1525,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1525 expect(Scheduler).toHaveYielded(['Hi']);
1526 });
1527 } else {
1528 - // @gate enableCache
1528 + // @gate enableLegacyCache
1529 it('hides/unhides suspended children before layout effects fire (mutation)', async () => {
1530 const {useRef, useLayoutEffect} = React;
1531
@@ -1570,7 +1570,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1570 });
1571 }
1572
1573 - // @gate enableCache
1573 + // @gate enableLegacyCache
1574 it('handles errors in the return path of a component that suspends', async () => {
1575 // Covers an edge case where an error is thrown inside the complete phase
1576 // of a component that is in the return path of a component that suspends.
@@ -1655,7 +1655,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1655 });
1656 });
1657
1658 - // @gate enableCache
1658 + // @gate enableLegacyCache
1659 it('does not call lifecycles of a suspended component', async () => {
1660 class TextWithLifecycle extends React.Component {
1661 componentDidMount() {
@@ -1725,7 +1725,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1725 );
1726 });
1727
1728 - // @gate enableCache
1728 + // @gate enableLegacyCache
1729 it('does not call lifecycles of a suspended component (hooks)', async () => {
1730 function TextWithLifecycle(props) {
1731 React.useLayoutEffect(() => {
@@ -1861,7 +1861,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1861 ]);
1862 });
1863
1864 - // @gate enableCache
1864 + // @gate enableLegacyCache
1865 it('suspends for longer if something took a long (CPU bound) time to render', async () => {
1866 function Foo({renderContent}) {
1867 Scheduler.unstable_yieldValue('Foo');
@@ -1929,7 +1929,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1929 expect(ReactNoop.getChildren()).toEqual([span('A')]);
1930 });
1931
1932 - // @gate enableCache
1932 + // @gate enableLegacyCache
1933 it('does not suspends if a fallback has been shown for a long time', async () => {
1934 function Foo() {
1935 Scheduler.unstable_yieldValue('Foo');
@@ -1983,7 +1983,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1983 expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
1984 });
1985
1986 - // @gate enableCache
1986 + // @gate enableLegacyCache
1987 it('does suspend if a fallback has been shown for a short time', async () => {
1988 function Foo() {
1989 Scheduler.unstable_yieldValue('Foo');
@@ -2033,7 +2033,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2033 expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
2034 });
2035
2036 - // @gate enableCache
2036 + // @gate enableLegacyCache
2037 it('does not suspend for very long after a higher priority update', async () => {
2038 function Foo({renderContent}) {
2039 Scheduler.unstable_yieldValue('Foo');
@@ -2087,7 +2087,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2087 });
2088
2089 // TODO: flip to "warns" when this is implemented again.
2090 - // @gate enableCache
2090 + // @gate enableLegacyCache
2091 it('does not warn when a low priority update suspends inside a high priority update for functional components', async () => {
2092 let _setShow;
2093 function App() {
@@ -2111,7 +2111,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2111 });
2112
2113 // TODO: flip to "warns" when this is implemented again.
2114 - // @gate enableCache
2114 + // @gate enableLegacyCache
2115 it('does not warn when a low priority update suspends inside a high priority update for class components', async () => {
2116 let show;
2117 class App extends React.Component {
@@ -2137,7 +2137,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2137 });
2138 });
2139
2140 - // @gate enableCache
2140 + // @gate enableLegacyCache
2141 it('does not warn about wrong Suspense priority if no new fallbacks are shown', async () => {
2142 let showB;
2143 class App extends React.Component {
@@ -2169,7 +2169,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2169 });
2170
2171 // TODO: flip to "warns" when this is implemented again.
2172 - // @gate enableCache
2172 + // @gate enableLegacyCache
2173 it(
2174 'does not warn when component that triggered user-blocking update is between Suspense boundary ' +
2175 'and component that suspended',
@@ -2198,7 +2198,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2198 },
2199 );
2200
2201 - // @gate enableCache
2201 + // @gate enableLegacyCache
2202 it('normal priority updates suspending do not warn for class components', async () => {
2203 let show;
2204 class App extends React.Component {
@@ -2227,7 +2227,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2227 expect(ReactNoop).toMatchRenderedOutput('Loading...');
2228 });
2229
2230 - // @gate enableCache
2230 + // @gate enableLegacyCache
2231 it('normal priority updates suspending do not warn for functional components', async () => {
2232 let _setShow;
2233 function App() {
@@ -2253,7 +2253,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2253 expect(ReactNoop).toMatchRenderedOutput('Loading...');
2254 });
2255
2256 - // @gate enableCache && enableSuspenseAvoidThisFallback
2256 + // @gate enableLegacyCache && enableSuspenseAvoidThisFallback
2257 it('shows the parent fallback if the inner fallback should be avoided', async () => {
2258 function Foo({showC}) {
2259 Scheduler.unstable_yieldValue('Foo');
@@ -2310,7 +2310,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2310 expect(ReactNoop.getChildren()).toEqual([span('A'), span('C'), span('B')]);
2311 });
2312
2313 - // @gate enableCache
2313 + // @gate enableLegacyCache
2314 it('does not show the parent fallback if the inner fallback is not defined', async () => {
2315 function Foo({showC}) {
2316 Scheduler.unstable_yieldValue('Foo');
@@ -2359,7 +2359,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2359 expect(ReactNoop.getChildren()).toEqual([span('A'), span('C'), span('B')]);
2360 });
2361
2362 - // @gate enableCache
2362 + // @gate enableLegacyCache
2363 it('favors showing the inner fallback for nested top level avoided fallback', async () => {
2364 function Foo({showB}) {
2365 Scheduler.unstable_yieldValue('Foo');
@@ -2391,7 +2391,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2391 expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
2392 });
2393
2394 - // @gate enableCache && enableSuspenseAvoidThisFallback
2394 + // @gate enableLegacyCache && enableSuspenseAvoidThisFallback
2395 it('keeps showing an avoided parent fallback if it is already showing', async () => {
2396 function Foo({showB}) {
2397 Scheduler.unstable_yieldValue('Foo');
@@ -2449,7 +2449,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2449 }
2450 });
2451
2452 - // @gate enableCache
2452 + // @gate enableLegacyCache
2453 it('keeps showing an undefined fallback if it is already showing', async () => {
2454 function Foo({showB}) {
2455 Scheduler.unstable_yieldValue('Foo');
@@ -2500,7 +2500,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2500 }
2501 });
2502
2503 - // @gate enableCache
2503 + // @gate enableLegacyCache
2504 it('commits a suspended idle pri render within a reasonable time', async () => {
2505 function Foo({renderContent}) {
2506 return (
@@ -2549,7 +2549,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2549 });
2550
2551 describe('startTransition', () => {
2552 - // @gate enableCache
2552 + // @gate enableLegacyCache
2553 it('top level render', async () => {
2554 function App({page}) {
2555 return (
@@ -2588,7 +2588,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2588 expect(ReactNoop.getChildren()).toEqual([span('B')]);
2589 });
2590
2591 - // @gate enableCache
2591 + // @gate enableLegacyCache
2592 it('hooks', async () => {
2593 let transitionToPage;
2594 function App() {
@@ -2640,7 +2640,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2640 expect(ReactNoop.getChildren()).toEqual([span('B')]);
2641 });
2642
2643 - // @gate enableCache
2643 + // @gate enableLegacyCache
2644 it('classes', async () => {
2645 let transitionToPage;
2646 class App extends React.Component {
@@ -2697,7 +2697,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2697 });
2698
2699 describe('delays transitions when using React.startTransition', () => {
2700 - // @gate enableCache
2700 + // @gate enableLegacyCache
2701 it('top level render', async () => {
2702 function App({page}) {
2703 return (
@@ -2747,7 +2747,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2747 expect(ReactNoop.getChildren()).toEqual([span('B')]);
2748 });
2749
2750 - // @gate enableCache
2750 + // @gate enableLegacyCache
2751 it('hooks', async () => {
2752 let transitionToPage;
2753 function App() {
@@ -2814,7 +2814,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2814 });
2815 });
2816
2817 - // @gate enableCache
2817 + // @gate enableLegacyCache
2818 it('classes', async () => {
2819 let transitionToPage;
2820 class App extends React.Component {
@@ -2884,7 +2884,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2884 });
2885 });
2886
2887 - // @gate enableCache && enableSuspenseAvoidThisFallback
2887 + // @gate enableLegacyCache && enableSuspenseAvoidThisFallback
2888 it('do not show placeholder when updating an avoided boundary with startTransition', async () => {
2889 function App({page}) {
2890 return (
@@ -2928,7 +2928,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2928 );
2929 });
2930
2931 - // @gate enableCache && enableSuspenseAvoidThisFallback
2931 + // @gate enableLegacyCache && enableSuspenseAvoidThisFallback
2932 it('do not show placeholder when mounting an avoided boundary with startTransition', async () => {
2933 function App({page}) {
2934 return (
@@ -2981,7 +2981,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
2981
2982 // TODO: This test is specifically about avoided commits that suspend for a
2983 // JND. We may remove this behavior.
2984 - // @gate enableCache
2984 + // @gate enableLegacyCache
2985 it("suspended commit remains suspended even if there's another update at same expiration", async () => {
2986 // Regression test
2987 function App({text}) {
@@ -3088,7 +3088,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3088 expect(root).toMatchRenderedOutput(<span prop="Foo" />);
3089 });
3090
3091 - // @gate enableCache && enableLegacyHidden
3091 + // @gate enableLegacyCache && enableLegacyHidden
3092 it('should not render hidden content while suspended on higher pri', async () => {
3093 function Offscreen() {
3094 Scheduler.unstable_yieldValue('Offscreen');
@@ -3138,7 +3138,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3138 );
3139 });
3140
3141 - // @gate enableCache && enableLegacyHidden
3141 + // @gate enableLegacyCache && enableLegacyHidden
3142 it('should be able to unblock higher pri content before suspended hidden', async () => {
3143 function Offscreen() {
3144 Scheduler.unstable_yieldValue('Offscreen');
@@ -3193,7 +3193,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3193 );
3194 });
3195
3196 - // @gate enableCache
3196 + // @gate enableLegacyCache
3197 it(
3198 'multiple updates originating inside a Suspense boundary at different ' +
3199 'priority levels are not dropped',
@@ -3247,7 +3247,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3247 },
3248 );
3249
3250 - // @gate enableCache
3250 + // @gate enableLegacyCache
3251 it(
3252 'multiple updates originating inside a Suspense boundary at different ' +
3253 'priority levels are not dropped, including Idle updates',
@@ -3312,7 +3312,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3312 },
3313 );
3314
3315 - // @gate enableCache
3315 + // @gate enableLegacyCache
3316 it(
3317 'fallback component can update itself even after a high pri update to ' +
3318 'the primary tree suspends',
@@ -3397,7 +3397,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3397 },
3398 );
3399
3400 - // @gate enableCache
3400 + // @gate enableLegacyCache
3401 it(
3402 'regression: primary fragment fiber is not always part of setState ' +
3403 'return path',
@@ -3476,7 +3476,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3476 },
3477 );
3478
3479 - // @gate enableCache
3479 + // @gate enableLegacyCache
3480 it(
3481 'regression: primary fragment fiber is not always part of setState ' +
3482 'return path (another case)',
@@ -3558,7 +3558,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3558 },
3559 );
3560
3561 - // @gate enableCache
3561 + // @gate enableLegacyCache
3562 it(
3563 'after showing fallback, should not flip back to primary content until ' +
3564 'the update that suspended finishes',
@@ -3702,7 +3702,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3702 },
3703 );
3704
3705 - // @gate enableCache
3705 + // @gate enableLegacyCache
3706 it('a high pri update can unhide a boundary that suspended at a different level', async () => {
3707 const {useState, useEffect} = React;
3708 const root = ReactNoop.createRoot();
@@ -3799,7 +3799,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3799 );
3800 });
3801
3802 - // @gate enableCache
3802 + // @gate enableLegacyCache
3803 // @gate !enableSyncDefaultUpdates
3804 it('regression: ping at high priority causes update to be dropped', async () => {
3805 const {useState, useTransition} = React;
@@ -3911,7 +3911,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
3911 });
3912
3913 // Regression: https://github.com/facebook/react/issues/18486
3914 - // @gate enableCache
3914 + // @gate enableLegacyCache
3915 it('does not get stuck in pending state with render phase updates', async () => {
3916 let setTextWithShortTransition;
3917 let setTextWithLongTransition;
@@ -4021,7 +4021,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
4021 });
4022 });
4023
4024 - // @gate enableCache
4024 + // @gate enableLegacyCache
4025 it('regression: #18657', async () => {
4026 const {useState} = React;
4027
@@ -4068,7 +4068,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
4068 expect(root).toMatchRenderedOutput(<span prop="B" />);
4069 });
4070
4071 - // @gate enableCache
4071 + // @gate enableLegacyCache
4072 it('retries have lower priority than normal updates', async () => {
4073 const {useState} = React;
4074
@@ -4123,7 +4123,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
4123 );
4124 });
4125
4126 - // @gate enableCache
4126 + // @gate enableLegacyCache
4127 it('should fire effect clean-up when deleting suspended tree', async () => {
4128 const {useEffect} = React;
4129
@@ -4171,7 +4171,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
4171 expect(Scheduler).toHaveYielded(['Unmount Child']);
4172 });
4173
4174 - // @gate enableCache
4174 + // @gate enableLegacyCache
4175 it('should fire effect clean-up when deleting suspended tree (legacy)', async () => {
4176 const {useEffect} = React;
4177
packages/react-reconciler/src/__tests__/ReactThenable-test.js
+1 -1
@@ -16,7 +16,7 @@ describe('ReactThenable', () => {
16 ReactNoop = require('react-noop-renderer');
17 Scheduler = require('scheduler');
18 act = require('jest-react').act;
19 - use = React.experimental_use;
19 + use = React.use;
20 Suspense = React.Suspense;
21 startTransition = React.startTransition;
22 });
packages/react-reconciler/src/__tests__/ReactTransition-test.js
+8 -8
@@ -158,7 +158,7 @@ describe('ReactTransition', () => {
158 }
159 }
160
161 - // @gate enableCache
161 + // @gate enableLegacyCache
162 test('isPending works even if called from outside an input event', async () => {
163 let start;
164 function App() {
@@ -199,7 +199,7 @@ describe('ReactTransition', () => {
199 expect(root).toMatchRenderedOutput('Async');
200 });
201
202 - // @gate enableCache
202 + // @gate enableLegacyCache
203 test(
204 'when multiple transitions update the same queue, only the most recent ' +
205 'one is allowed to finish (no intermediate states)',
@@ -318,7 +318,7 @@ describe('ReactTransition', () => {
318 );
319
320 // Same as previous test, but for class update queue.
321 - // @gate enableCache
321 + // @gate enableLegacyCache
322 test(
323 'when multiple transitions update the same queue, only the most recent ' +
324 'one is allowed to finish (no intermediate states) (classes)',
@@ -442,7 +442,7 @@ describe('ReactTransition', () => {
442 },
443 );
444
445 - // @gate enableCache
445 + // @gate enableLegacyCache
446 test(
447 'when multiple transitions update overlapping queues, all the transitions ' +
448 'across all the queues are entangled',
@@ -547,7 +547,7 @@ describe('ReactTransition', () => {
547 },
548 );
549
550 - // @gate enableCache
550 + // @gate enableLegacyCache
551 test('interrupt a refresh transition if a new transition is scheduled', async () => {
552 const root = ReactNoop.createRoot();
553
@@ -602,7 +602,7 @@ describe('ReactTransition', () => {
602 expect(root).toMatchRenderedOutput('Updated');
603 });
604
605 - // @gate enableCache
605 + // @gate enableLegacyCache
606 test(
607 "interrupt a refresh transition when something suspends and we've " +
608 'already bailed out on another transition in a parent',
@@ -704,7 +704,7 @@ describe('ReactTransition', () => {
704 },
705 );
706
707 - // @gate enableCache
707 + // @gate enableLegacyCache
708 test(
709 'interrupt a refresh transition when something suspends and a parent ' +
710 'component received an interleaved update after its queue was processed',
@@ -824,7 +824,7 @@ describe('ReactTransition', () => {
824 expect(root).toMatchRenderedOutput('Transition pri: 1, Normal pri: 1');
825 });
826
827 - // @gate enableCache
827 + // @gate enableLegacyCache
828 it('should render normal pri updates before transition suspense retries', async () => {
829 let updateTransitionPri;
830 let updateNormalPri;
packages/react-server-dom-webpack/package.json
+3 -3
@@ -1,7 +1,7 @@
1 {
2 "name": "react-server-dom-webpack",
3 "description": "React Server Components bindings for DOM using Webpack. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.",
4 - "version": "0.1.0",
4 + "version": "18.2.0",
5 "keywords": [
6 "react"
7 ],
@@ -50,8 +50,8 @@
50 "node": ">=0.10.0"
51 },
52 "peerDependencies": {
53 - "react": "^17.0.0",
54 - "react-dom": "^17.0.0",
53 + "react": "^18.2.0",
54 + "react-dom": "^18.2.0",
55 "webpack": "^5.59.0"
56 },
57 "dependencies": {
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+1 -1
@@ -41,7 +41,7 @@ describe('ReactFlightDOM', () => {
41
42 Stream = require('stream');
43 React = require('react');
44 - use = React.experimental_use;
44 + use = React.use;
45 Suspense = React.Suspense;
46 ReactDOMClient = require('react-dom/client');
47 ReactServerDOMWriter = require('react-server-dom-webpack/server.node');
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+1 -1
@@ -40,7 +40,7 @@ describe('ReactFlightDOMBrowser', () => {
40 ReactServerDOMWriter = require('react-server-dom-webpack/server.browser');
41 ReactServerDOMReader = require('react-server-dom-webpack/client');
42 Suspense = React.Suspense;
43 - use = React.experimental_use;
43 + use = React.use;
44 });
45
46 async function readResult(stream) {
packages/react/index.classic.fb.js
+2 -2
@@ -27,12 +27,12 @@ export {
27 createMutableSource as unstable_createMutableSource,
28 createRef,
29 createServerContext,
30 - experimental_use,
30 + use,
31 forwardRef,
32 isValidElement,
33 lazy,
34 memo,
35 - experimental_cache,
35 + cache,
36 startTransition,
37 startTransition as unstable_startTransition, // TODO: Remove once call sights updated to startTransition
38 unstable_Cache,
packages/react/index.experimental.js
+2 -2
@@ -24,12 +24,12 @@ export {
24 createFactory,
25 createRef,
26 createServerContext,
27 - experimental_use,
27 + use,
28 forwardRef,
29 isValidElement,
30 lazy,
31 memo,
32 - experimental_cache,
32 + cache,
33 startTransition,
34 unstable_Cache,
35 unstable_DebugTracingMode,
packages/react/index.js
+2 -2
@@ -49,12 +49,12 @@ export {
49 createMutableSource,
50 createRef,
51 createServerContext,
52 - experimental_use,
52 + use,
53 forwardRef,
54 isValidElement,
55 lazy,
56 memo,
57 - experimental_cache,
57 + cache,
58 startTransition,
59 unstable_Cache,
60 unstable_DebugTracingMode,
packages/react/index.modern.fb.js
+2 -2
@@ -26,12 +26,12 @@ export {
26 createMutableSource as unstable_createMutableSource,
27 createRef,
28 createServerContext,
29 - experimental_use,
29 + use,
30 forwardRef,
31 isValidElement,
32 lazy,
33 memo,
34 - experimental_cache,
34 + cache,
35 startTransition,
36 startTransition as unstable_startTransition, // TODO: Remove once call sights updated to startTransition
37 unstable_Cache,
packages/react/index.stable.js
+4 -1
@@ -22,10 +22,14 @@ export {
22 createElement,
23 createFactory,
24 createRef,
25 + createServerContext,
26 + use,
27 forwardRef,
28 isValidElement,
29 lazy,
30 memo,
31 + cache,
32 + unstable_useCacheRefresh,
33 startTransition,
34 useId,
35 useCallback,
@@ -33,7 +37,6 @@ export {
37 useDebugValue,
38 useDeferredValue,
39 useEffect,
36 - experimental_useEvent,
40 useImperativeHandle,
41 useInsertionEffect,
42 useLayoutEffect,
packages/react/src/React.js
+2 -2
@@ -101,7 +101,7 @@ export {
101 forwardRef,
102 lazy,
103 memo,
104 - cache as experimental_cache,
104 + cache,
105 useCallback,
106 useContext,
107 useEffect,
@@ -139,7 +139,7 @@ export {
139 getCacheForType as unstable_getCacheForType,
140 useCacheRefresh as unstable_useCacheRefresh,
141 REACT_CACHE_TYPE as unstable_Cache,
142 - use as experimental_use,
142 + use,
143 useMemoCache as unstable_useMemoCache,
144 // enableScopeAPI
145 REACT_SCOPE_TYPE as unstable_Scope,
packages/react/src/ReactSharedSubset.experimental.js
+2 -2
@@ -22,12 +22,12 @@ export {
22 createElement,
23 createRef,
24 createServerContext,
25 - experimental_use,
25 + use,
26 forwardRef,
27 isValidElement,
28 lazy,
29 memo,
30 - experimental_cache,
30 + cache,
31 startTransition,
32 unstable_DebugTracingMode,
33 unstable_getCacheSignal,
packages/react/src/ReactSharedSubset.js
+28 -4
@@ -7,7 +7,31 @@
7 * @flow
8 */
9
10 -// eslint-disable-next-line react-internal/prod-error-codes
11 -throw new Error(
12 - 'This entry point is not yet supported outside of experimental channels',
13 -);
10 +// Patch fetch
11 +import './ReactFetch';
12 +
13 +export {
14 + __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
15 + Children,
16 + Fragment,
17 + Profiler,
18 + StrictMode,
19 + Suspense,
20 + cloneElement,
21 + createElement,
22 + createRef,
23 + createServerContext,
24 + use,
25 + forwardRef,
26 + isValidElement,
27 + lazy,
28 + memo,
29 + cache,
30 + startTransition,
31 + useId,
32 + useCallback,
33 + useContext,
34 + useDebugValue,
35 + useMemo,
36 + version,
37 +} from './React';
packages/react/src/__tests__/ReactFetch-test.js
+4 -3
@@ -44,14 +44,15 @@ describe('ReactFetch', () => {
44 fetchCount = 0;
45 global.fetch = fetchMock;
46
47 - if (gate(flags => flags.experimental && !flags.www)) {
47 + if (gate(flags => !flags.www)) {
48 jest.mock('react', () => require('react/react.shared-subset'));
49 }
50 +
51 React = require('react');
52 ReactServerDOMServer = require('react-server-dom-webpack/server.browser');
53 ReactServerDOMClient = require('react-server-dom-webpack/client');
53 - use = React.experimental_use;
54 - cache = React.experimental_cache;
54 + use = React.use;
55 + cache = React.cache;
56 });
57
58 async function render(Component) {
packages/shared/ReactFeatureFlags.js
+7 -6
@@ -82,9 +82,10 @@ export const enableLegacyFBSupport = false;
82 // likely to include in an upcoming release.
83 // -----------------------------------------------------------------------------
84
85 -export const enableCache = __EXPERIMENTAL__;
85 +export const enableCache = true;
86 +export const enableLegacyCache = __EXPERIMENTAL__;
87 export const enableCacheElement = __EXPERIMENTAL__;
87 -export const enableFetchInstrumentation = __EXPERIMENTAL__;
88 +export const enableFetchInstrumentation = true;
89
90 export const enableTransitionTracing = false;
91
@@ -101,9 +102,9 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
102
103 export const enableCPUSuspense = __EXPERIMENTAL__;
104
104 -export const enableHostSingletons = __EXPERIMENTAL__;
105 +export const enableHostSingletons = true;
106
106 -export const enableFloat = __EXPERIMENTAL__;
107 +export const enableFloat = true;
108
109 // When a node is unmounted, recurse into the Fiber subtree and clean out
110 // references. Each level cleans up more fiber fields than the previous level.
@@ -118,7 +119,7 @@ export const enableFloat = __EXPERIMENTAL__;
119 // aggressiveness.
120 export const deletedTreeCleanUpLevel = 3;
121
121 -export const enableUseHook = __EXPERIMENTAL__;
122 +export const enableUseHook = true;
123
124 // Enables unstable_useMemoCache hook, intended as a compilation target for
125 // auto-memoization.
@@ -253,7 +254,7 @@ export const enableUpdaterTracking = __PROFILE__;
254
255 // Only enabled in RN, related to enableComponentStackLocations
256 export const disableNativeComponentFrames = false;
256 -export const enableServerContext = __EXPERIMENTAL__;
257 +export const enableServerContext = true;
258
259 // Internal only.
260 export const enableGetInspectorDataForInstanceInProduction = false;
packages/shared/forks/ReactFeatureFlags.native-fb.js
+5 -4
@@ -28,6 +28,7 @@ export const enableProfilerNestedUpdatePhase = __PROFILE__;
28 export const enableProfilerNestedUpdateScheduledHook = false;
29 export const enableUpdaterTracking = __PROFILE__;
30 export const enableCache = false;
31 +export const enableLegacyCache = false;
32 export const enableCacheElement = true;
33 export const enableFetchInstrumentation = false;
34 export const enableSchedulerDebugging = false;
@@ -51,7 +52,7 @@ export const warnAboutSpreadingKeyToJSX = false;
52 export const enableSuspenseAvoidThisFallback = false;
53 export const enableSuspenseAvoidThisFallbackFizz = false;
54 export const enableCPUSuspense = true;
54 -export const enableUseHook = false;
55 +export const enableUseHook = true;
56 export const enableUseMemoCacheHook = true;
57 export const enableUseEventHook = false;
58 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
@@ -76,14 +77,14 @@ export const allowConcurrentByDefault = true;
77 export const enableCustomElementPropertySupport = false;
78
79 export const consoleManagedByDevToolsDuringStrictMode = false;
79 -export const enableServerContext = false;
80 +export const enableServerContext = true;
81
82 export const enableUseMutableSource = true;
83
84 export const enableTransitionTracing = false;
85
85 -export const enableFloat = false;
86 -export const enableHostSingletons = false;
86 +export const enableFloat = true;
87 +export const enableHostSingletons = true;
88
89 export const useModernStrictMode = false;
90 export const enableFizzExternalRuntime = false;
packages/shared/forks/ReactFeatureFlags.native-oss.js
+5 -4
@@ -21,6 +21,7 @@ export const enableProfilerNestedUpdatePhase = __PROFILE__;
21 export const enableProfilerNestedUpdateScheduledHook = false;
22 export const enableUpdaterTracking = __PROFILE__;
23 export const enableCache = false;
24 +export const enableLegacyCache = false;
25 export const enableCacheElement = false;
26 export const enableFetchInstrumentation = false;
27 export const disableJavaScriptURLs = false;
@@ -41,7 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;
42 export const enableSuspenseAvoidThisFallback = false;
43 export const enableSuspenseAvoidThisFallbackFizz = false;
44 export const enableCPUSuspense = false;
44 -export const enableUseHook = false;
45 +export const enableUseHook = true;
46 export const enableUseMemoCacheHook = false;
47 export const enableUseEventHook = false;
48 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
@@ -67,13 +68,13 @@ export const allowConcurrentByDefault = false;
68 export const enableCustomElementPropertySupport = false;
69
70 export const consoleManagedByDevToolsDuringStrictMode = false;
70 -export const enableServerContext = false;
71 +export const enableServerContext = true;
72 export const enableUseMutableSource = false;
73
74 export const enableTransitionTracing = false;
75
75 -export const enableFloat = false;
76 -export const enableHostSingletons = false;
76 +export const enableFloat = true;
77 +export const enableHostSingletons = true;
78
79 export const useModernStrictMode = false;
80 export const enableFizzExternalRuntime = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+7 -6
@@ -20,9 +20,10 @@ export const enableProfilerCommitHooks = __PROFILE__;
20 export const enableProfilerNestedUpdatePhase = __PROFILE__;
21 export const enableProfilerNestedUpdateScheduledHook = false;
22 export const enableUpdaterTracking = false;
23 -export const enableCache = __EXPERIMENTAL__;
23 +export const enableCache = true;
24 +export const enableLegacyCache = __EXPERIMENTAL__;
25 export const enableCacheElement = __EXPERIMENTAL__;
25 -export const enableFetchInstrumentation = __EXPERIMENTAL__;
26 +export const enableFetchInstrumentation = true;
27 export const disableJavaScriptURLs = false;
28 export const disableCommentsAsDOMContainers = true;
29 export const disableInputAttributeSyncing = false;
@@ -41,7 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;
42 export const enableSuspenseAvoidThisFallback = false;
43 export const enableSuspenseAvoidThisFallbackFizz = false;
44 export const enableCPUSuspense = false;
44 -export const enableUseHook = false;
45 +export const enableUseHook = true;
46 export const enableUseMemoCacheHook = false;
47 export const enableUseEventHook = false;
48 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
@@ -67,13 +68,13 @@ export const allowConcurrentByDefault = false;
68 export const enableCustomElementPropertySupport = false;
69
70 export const consoleManagedByDevToolsDuringStrictMode = false;
70 -export const enableServerContext = false;
71 +export const enableServerContext = true;
72 export const enableUseMutableSource = false;
73
74 export const enableTransitionTracing = false;
75
75 -export const enableFloat = false;
76 -export const enableHostSingletons = false;
76 +export const enableFloat = true;
77 +export const enableHostSingletons = true;
78
79 export const useModernStrictMode = false;
80 export const enableFizzExternalRuntime = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+5 -4
@@ -21,6 +21,7 @@ export const enableProfilerNestedUpdatePhase = __PROFILE__;
21 export const enableProfilerNestedUpdateScheduledHook = false;
22 export const enableUpdaterTracking = false;
23 export const enableCache = true;
24 +export const enableLegacyCache = false;
25 export const enableCacheElement = true;
26 export const enableFetchInstrumentation = false;
27 export const disableJavaScriptURLs = false;
@@ -50,7 +51,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
51 export const enableSuspenseAvoidThisFallback = false;
52 export const enableSuspenseAvoidThisFallbackFizz = false;
53 export const enableCPUSuspense = false;
53 -export const enableUseHook = false;
54 +export const enableUseHook = true;
55 export const enableUseMemoCacheHook = false;
56 export const enableUseEventHook = false;
57 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
@@ -65,13 +66,13 @@ export const enableSyncDefaultUpdates = true;
66 export const allowConcurrentByDefault = true;
67
68 export const consoleManagedByDevToolsDuringStrictMode = false;
68 -export const enableServerContext = false;
69 +export const enableServerContext = true;
70 export const enableUseMutableSource = false;
71
72 export const enableTransitionTracing = false;
73
73 -export const enableFloat = false;
74 -export const enableHostSingletons = false;
74 +export const enableFloat = true;
75 +export const enableHostSingletons = true;
76
77 export const useModernStrictMode = false;
78
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+5 -4
@@ -21,6 +21,7 @@ export const enableProfilerNestedUpdatePhase = __PROFILE__;
21 export const enableProfilerNestedUpdateScheduledHook = false;
22 export const enableUpdaterTracking = false;
23 export const enableCache = true;
24 +export const enableLegacyCache = true;
25 export const enableCacheElement = true;
26 export const enableFetchInstrumentation = false;
27 export const enableSchedulerDebugging = false;
@@ -41,7 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;
42 export const enableSuspenseAvoidThisFallback = true;
43 export const enableSuspenseAvoidThisFallbackFizz = false;
44 export const enableCPUSuspense = false;
44 -export const enableUseHook = false;
45 +export const enableUseHook = true;
46 export const enableUseMemoCacheHook = false;
47 export const enableUseEventHook = false;
48 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
@@ -67,15 +68,15 @@ export const allowConcurrentByDefault = true;
68 export const enableCustomElementPropertySupport = false;
69
70 export const consoleManagedByDevToolsDuringStrictMode = false;
70 -export const enableServerContext = false;
71 +export const enableServerContext = true;
72
73 // Some www surfaces are still using this. Remove once they have been migrated.
74 export const enableUseMutableSource = true;
75
76 export const enableTransitionTracing = false;
77
77 -export const enableFloat = false;
78 -export const enableHostSingletons = false;
78 +export const enableFloat = true;
79 +export const enableHostSingletons = true;
80
81 export const useModernStrictMode = false;
82 export const enableFizzExternalRuntime = false;
packages/shared/forks/ReactFeatureFlags.testing.js
+5 -4
@@ -21,6 +21,7 @@ export const enableProfilerNestedUpdatePhase = __PROFILE__;
21 export const enableProfilerNestedUpdateScheduledHook = false;
22 export const enableUpdaterTracking = false;
23 export const enableCache = __EXPERIMENTAL__;
24 +export const enableLegacyCache = __EXPERIMENTAL__;
25 export const enableCacheElement = __EXPERIMENTAL__;
26 export const enableFetchInstrumentation = __EXPERIMENTAL__;
27 export const disableJavaScriptURLs = false;
@@ -41,7 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;
42 export const enableSuspenseAvoidThisFallback = false;
43 export const enableSuspenseAvoidThisFallbackFizz = false;
44 export const enableCPUSuspense = false;
44 -export const enableUseHook = false;
45 +export const enableUseHook = true;
46 export const enableUseMemoCacheHook = false;
47 export const enableUseEventHook = false;
48 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
@@ -67,13 +68,13 @@ export const allowConcurrentByDefault = false;
68 export const enableCustomElementPropertySupport = false;
69
70 export const consoleManagedByDevToolsDuringStrictMode = false;
70 -export const enableServerContext = false;
71 +export const enableServerContext = true;
72 export const enableUseMutableSource = false;
73
74 export const enableTransitionTracing = false;
75
75 -export const enableFloat = false;
76 -export const enableHostSingletons = false;
76 +export const enableFloat = true;
77 +export const enableHostSingletons = true;
78
79 export const useModernStrictMode = false;
80 export const enableFizzExternalRuntime = false;
packages/shared/forks/ReactFeatureFlags.testing.www.js
+5 -4
@@ -21,6 +21,7 @@ export const enableProfilerNestedUpdatePhase = false;
21 export const enableProfilerNestedUpdateScheduledHook = false;
22 export const enableUpdaterTracking = false;
23 export const enableCache = true;
24 +export const enableLegacyCache = true;
25 export const enableCacheElement = true;
26 export const enableFetchInstrumentation = false;
27 export const disableJavaScriptURLs = true;
@@ -41,7 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;
42 export const enableSuspenseAvoidThisFallback = true;
43 export const enableSuspenseAvoidThisFallbackFizz = false;
44 export const enableCPUSuspense = true;
44 -export const enableUseHook = false;
45 +export const enableUseHook = true;
46 export const enableUseMemoCacheHook = false;
47 export const enableUseEventHook = false;
48 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
@@ -67,14 +68,14 @@ export const allowConcurrentByDefault = true;
68 export const enableCustomElementPropertySupport = false;
69
70 export const consoleManagedByDevToolsDuringStrictMode = false;
70 -export const enableServerContext = false;
71 +export const enableServerContext = true;
72 // Some www surfaces are still using this. Remove once they have been migrated.
73 export const enableUseMutableSource = true;
74
75 export const enableTransitionTracing = false;
76
76 -export const enableFloat = false;
77 -export const enableHostSingletons = false;
77 +export const enableFloat = true;
78 +export const enableHostSingletons = true;
79
80 export const useModernStrictMode = false;
81 export const enableFizzExternalRuntime = false;
packages/shared/forks/ReactFeatureFlags.www.js
+3 -2
@@ -50,11 +50,11 @@ export const enableUpdaterTracking = __PROFILE__;
50 export const enableSuspenseAvoidThisFallback = true;
51 export const enableSuspenseAvoidThisFallbackFizz = false;
52 export const enableCPUSuspense = true;
53 -export const enableFloat = false;
53 +export const enableFloat = true;
54 export const enableUseHook = true;
55 export const enableUseMemoCacheHook = true;
56 export const enableUseEventHook = true;
57 -export const enableHostSingletons = false;
57 +export const enableHostSingletons = true;
58
59 // Logs additional User Timing API marks for use with an experimental profiling tool.
60 export const enableSchedulingProfiler: boolean =
@@ -71,6 +71,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;
71 export const enableGetInspectorDataForInstanceInProduction = false;
72
73 export const enableCache = true;
74 +export const enableLegacyCache = true;
75 export const enableCacheElement = true;
76 export const enableFetchInstrumentation = false;
77