Promote concurrent mode APIs from experimental to stable

Author: Brian Vaughn

packages/react-devtools-scheduling-profiler/src/hooks.js

@@ -7,11 +7,7 @@
  * @flow
  */
 
-import {
-  unstable_createMutableSource as createMutableSource,
-  unstable_useMutableSource as useMutableSource,
-  useLayoutEffect,
-} from 'react';
+import {createMutableSource, useMutableSource, useLayoutEffect} from 'react';
 
 import {
   updateDisplayDensity,

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js

@@ -10,7 +10,7 @@
 import * as React from 'react';
 import {
   createContext,
-  unstable_startTransition as startTransition,
+  startTransition,
   unstable_useCacheRefresh as useCacheRefresh,
   useCallback,
   useContext,

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js

@@ -11,7 +11,7 @@ import * as React from 'react';
 import {
   useContext,
   unstable_useCacheRefresh as useCacheRefresh,
-  unstable_useTransition as useTransition,
+  useTransition,
 } from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';

packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js

@@ -8,12 +8,7 @@
  */
 
 import * as React from 'react';
-import {
-  unstable_useTransition as useTransition,
-  useContext,
-  useRef,
-  useState,
-} from 'react';
+import {useTransition, useContext, useRef, useState} from 'react';
 import EditableName from './EditableName';
 import EditableValue from './EditableValue';
 import NewArrayValue from './NewArrayValue';

packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js

@@ -34,7 +34,7 @@ import {
   useMemo,
   useReducer,
   useRef,
-  unstable_startTransition as startTransition,
+  startTransition,
 } from 'react';
 import {createRegExp} from '../utils';
 import {BridgeContext, StoreContext} from '../context';

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js

@@ -10,7 +10,7 @@
 import type {Wakeable} from 'shared/ReactTypes';
 import type {GitHubIssue} from './githubAPI';
 
-import {unstable_getCacheForType} from 'react';
+import {unstable_getCacheForType as getCacheForType} from 'react';
 import {searchGitHubIssues} from './githubAPI';
 
 const API_TIMEOUT = 3000;
@@ -55,7 +55,7 @@ function createMap(): GitHubIssueMap {
 }
 
 function getRecordMap(): Map<string, Record<GitHubIssue>> {
-  return unstable_getCacheForType(createMap);
+  return getCacheForType(createMap);
 }
 
 export function findGitHubIssue(errorMessage: string): GitHubIssue | null {

packages/react-devtools-shared/src/inspectedElementCache.js

@@ -8,8 +8,8 @@
  */
 
 import {
-  unstable_getCacheForType,
-  unstable_startTransition as startTransition,
+  unstable_getCacheForType as getCacheForType,
+  startTransition,
 } from 'react';
 import Store from './devtools/store';
 import {inspectElement as inspectElementMutableSource} from './inspectedElementMutableSource';
@@ -60,7 +60,7 @@ function createMap(): InspectedElementMap {
 }
 
 function getRecordMap(): WeakMap<Element, Record<InspectedElementFrontend>> {
-  return unstable_getCacheForType(createMap);
+  return getCacheForType(createMap);
 }
 
 function createCacheSeed(

packages/react-devtools-shell/src/app/SuspenseTree/index.js

@@ -8,12 +8,7 @@
  */
 
 import * as React from 'react';
-import {
-  Fragment,
-  Suspense,
-  unstable_SuspenseList as SuspenseList,
-  useState,
-} from 'react';
+import {Fragment, Suspense, SuspenseList, useState} from 'react';
 
 function SuspenseTree() {
   return (

packages/react-dom/index.classic.fb.js

@@ -22,15 +22,14 @@ export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
   createRoot,
-  createRoot as unstable_createRoot,
+  createRoot as unstable_createRoot, // TODO Remove once callsites use createRoot
   findDOMNode,
   flushSync,
   hydrate,
   render,
   unmountComponentAtNode,
   unstable_batchedUpdates,
   unstable_createEventHandle,
-  unstable_createPortal, // Temporary alias
   unstable_flushControlled,
   unstable_isNewReconciler,
   unstable_renderSubtreeIntoContainer,

packages/react-dom/index.experimental.js

@@ -10,14 +10,13 @@
 export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
-  createRoot as unstable_createRoot,
+  createRoot,
   findDOMNode,
   flushSync,
   hydrate,
   render,
   unmountComponentAtNode,
   unstable_batchedUpdates,
-  unstable_createPortal, // Temporary alias
   unstable_flushControlled,
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.

packages/react-dom/index.js

@@ -21,7 +21,6 @@ export {
   unmountComponentAtNode,
   unstable_batchedUpdates,
   unstable_createEventHandle,
-  unstable_createPortal, // Temporary alias
   unstable_flushControlled,
   unstable_isNewReconciler,
   unstable_renderSubtreeIntoContainer,

packages/react-dom/index.modern.fb.js

@@ -11,7 +11,7 @@ export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
   createRoot,
-  createRoot as unstable_createRoot,
+  createRoot as unstable_createRoot, // TODO Remove once callsites use createRoot
   flushSync,
   unstable_batchedUpdates,
   unstable_createEventHandle,

packages/react-dom/index.stable.js

@@ -10,13 +10,13 @@
 export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
+  createRoot,
   findDOMNode,
   flushSync,
   hydrate,
   render,
   unmountComponentAtNode,
   unstable_batchedUpdates,
-  unstable_createPortal, // Temporary alias
   unstable_renderSubtreeIntoContainer,
   version,
 } from './src/client/ReactDOM';

packages/react-dom/src/__tests__/ReactDOMFiber-test.js

@@ -246,34 +246,6 @@ describe('ReactDOMFiber', () => {
     expect(container.innerHTML).toBe('');
   });
 
-  // TODO: remove in React 18
-  if (!__EXPERIMENTAL__) {
-    it('should support unstable_createPortal alias', () => {
-      const portalContainer = document.createElement('div');
-
-      expect(() =>
-        ReactDOM.render(
-          <div>
-            {ReactDOM.unstable_createPortal(<div>portal</div>, portalContainer)}
-          </div>,
-          container,
-        ),
-      ).toWarnDev(
-        'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
-          'and will be removed in React 18+. Update your code to use ' +
-          'ReactDOM.createPortal() instead. It has the exact same API, ' +
-          'but without the "unstable_" prefix.',
-        {withoutStack: true},
-      );
-      expect(portalContainer.innerHTML).toBe('<div>portal</div>');
-      expect(container.innerHTML).toBe('<div></div>');
-
-      ReactDOM.unmountComponentAtNode(container);
-      expect(portalContainer.innerHTML).toBe('');
-      expect(container.innerHTML).toBe('');
-    });
-  }
-
   it('should render many portals', () => {
     const portalContainer1 = document.createElement('div');
     const portalContainer2 = document.createElement('div');

packages/react-dom/src/client/ReactDOM.js

@@ -78,7 +78,6 @@ setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority);
 setGetCurrentUpdatePriority(getCurrentUpdatePriority);
 setAttemptHydrationAtPriority(runWithPriority);
 
-let didWarnAboutUnstableCreatePortal = false;
 let didWarnAboutUnstableRenderSubtreeIntoContainer = false;
 
 if (__DEV__) {
@@ -155,25 +154,6 @@ function renderSubtreeIntoContainer(
   );
 }
 
-function unstable_createPortal(
-  children: ReactNodeList,
-  container: Container,
-  key: ?string = null,
-) {
-  if (__DEV__) {
-    if (!didWarnAboutUnstableCreatePortal) {
-      didWarnAboutUnstableCreatePortal = true;
-      console.warn(
-        'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
-          'and will be removed in React 18+. Update your code to use ' +
-          'ReactDOM.createPortal() instead. It has the exact same API, ' +
-          'but without the "unstable_" prefix.',
-      );
-    }
-  }
-  return createPortal(children, container, key);
-}
-
 const Internals = {
   // Keep in sync with ReactTestUtils.js, and ReactTestUtilsAct.js.
   // This is an array for better minification.
@@ -206,10 +186,6 @@ export {
   scheduleHydration as unstable_scheduleHydration,
   // Disabled behind disableUnstableRenderSubtreeIntoContainer
   renderSubtreeIntoContainer as unstable_renderSubtreeIntoContainer,
-  // Disabled behind disableUnstableCreatePortal
-  // Temporary alias since we already shipped React 16 RC with it.
-  // TODO: remove in React 18.
-  unstable_createPortal,
   // enableCreateEventHandleAPI
   createEventHandle as unstable_createEventHandle,
   // TODO: Remove this once callers migrate to alternatives.

packages/react-is/index.experimental.js

@@ -23,7 +23,7 @@ export {
   Profiler,
   StrictMode,
   Suspense,
-  unstable_SuspenseList,
+  SuspenseList,
   isAsyncMode,
   isConcurrentMode,
   isContextConsumer,
@@ -37,5 +37,5 @@ export {
   isProfiler,
   isStrictMode,
   isSuspense,
-  unstable_isSuspenseList,
+  isSuspenseList,
 } from './src/ReactIs';

packages/react-is/index.stable.js

@@ -23,6 +23,7 @@ export {
   Profiler,
   StrictMode,
   Suspense,
+  SuspenseList,
   isAsyncMode,
   isConcurrentMode,
   isContextConsumer,
@@ -36,4 +37,5 @@ export {
   isProfiler,
   isStrictMode,
   isSuspense,
+  isSuspenseList,
 } from './src/ReactIs';

packages/react-is/src/ReactIs.js

@@ -72,7 +72,7 @@ export const Portal = REACT_PORTAL_TYPE;
 export const Profiler = REACT_PROFILER_TYPE;
 export const StrictMode = REACT_STRICT_MODE_TYPE;
 export const Suspense = REACT_SUSPENSE_TYPE;
-export const unstable_SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+export const SuspenseList = REACT_SUSPENSE_LIST_TYPE;
 
 export {isValidElementType};
 
@@ -143,6 +143,6 @@ export function isStrictMode(object: any) {
 export function isSuspense(object: any) {
   return typeOf(object) === REACT_SUSPENSE_TYPE;
 }
-export function unstable_isSuspenseList(object: any) {
+export function isSuspenseList(object: any) {
   return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
 }

packages/react-is/src/__tests__/ReactIs-test.js

@@ -186,22 +186,21 @@ describe('ReactIs', () => {
     expect(ReactIs.isSuspense(<div />)).toBe(false);
   });
 
-  // @gate experimental
   it('should identify suspense list', () => {
-    expect(ReactIs.isValidElementType(React.unstable_SuspenseList)).toBe(true);
-    expect(ReactIs.typeOf(<React.unstable_SuspenseList />)).toBe(
-      ReactIs.unstable_SuspenseList,
+    expect(ReactIs.isValidElementType(React.SuspenseList)).toBe(true);
+    expect(ReactIs.typeOf(<React.SuspenseList />)).toBe(
+      ReactIs.SuspenseList,
     );
     expect(
-      ReactIs.unstable_isSuspenseList(<React.unstable_SuspenseList />),
+      ReactIs.isSuspenseList(<React.SuspenseList />),
     ).toBe(true);
     expect(
-      ReactIs.unstable_isSuspenseList({type: ReactIs.unstable_SuspenseList}),
+      ReactIs.isSuspenseList({type: ReactIs.SuspenseList}),
     ).toBe(false);
-    expect(ReactIs.unstable_isSuspenseList('React.unstable_SuspenseList')).toBe(
+    expect(ReactIs.isSuspenseList('React.SuspenseList')).toBe(
       false,
     );
-    expect(ReactIs.unstable_isSuspenseList(<div />)).toBe(false);
+    expect(ReactIs.isSuspenseList(<div />)).toBe(false);
   });
 
   it('should identify profile root', () => {

packages/react/index.classic.fb.js

@@ -17,7 +17,7 @@ export {
   StrictMode,
   Suspense,
   SuspenseList,
-  SuspenseList as unstable_SuspenseList,
+  SuspenseList as unstable_SuspenseList, // TODO: Remove once call sights updated to SuspenseList
   cloneElement,
   createContext,
   createElement,
@@ -30,7 +30,7 @@ export {
   lazy,
   memo,
   startTransition,
-  startTransition as unstable_startTransition,
+  startTransition as unstable_startTransition, // TODO: Remove once call sights updated to startTransition
   unstable_Cache,
   unstable_DebugTracingMode,
   unstable_LegacyHidden,
@@ -42,7 +42,7 @@ export {
   useContext,
   useDebugValue,
   useDeferredValue,
-  useDeferredValue as unstable_useDeferredValue,
+  useDeferredValue as unstable_useDeferredValue, // TODO: Remove once call sights updated to useDeferredValue
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
@@ -53,7 +53,7 @@ export {
   useRef,
   useState,
   useTransition,
-  useTransition as unstable_useTransition,
+  useTransition as unstable_useTransition, // TODO: Remove once call sights updated to useTransition
   version,
 } from './src/React';
 export {jsx, jsxs, jsxDEV} from './src/jsx/ReactJSX';

packages/react/index.experimental.js

@@ -16,7 +16,7 @@ export {
   PureComponent,
   StrictMode,
   Suspense,
-  SuspenseList as unstable_SuspenseList,
+  SuspenseList,
   cloneElement,
   createContext,
   createElement,
@@ -27,7 +27,7 @@ export {
   isValidElement,
   lazy,
   memo,
-  startTransition as unstable_startTransition,
+  startTransition,
   unstable_Cache,
   unstable_DebugTracingMode,
   unstable_LegacyHidden,
@@ -37,7 +37,6 @@ export {
   useCallback,
   useContext,
   useDebugValue,
-  useDeferredValue as unstable_useDeferredValue,
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
@@ -46,6 +45,6 @@ export {
   useReducer,
   useRef,
   useState,
-  useTransition as unstable_useTransition,
+  useTransition,
   version,
 } from './src/React';