facebook · gaearon · Oct 10, 2018 · Oct 10, 2018 · Oct 10, 2018 · Oct 10, 2018
diff --git a/fixtures/unstable-async/suspense/README.md b/fixtures/unstable-async/suspense/README.md
@@ -14,19 +14,13 @@ No. The APIs being tested here are unstable and some of them have still not been
 
 Clone the React repository.
 
-First, open this file locally:
-
-* `packages/shared/ReactFeatureFlags.js` (make sure you didn't open a similarly named file!)
-
-Set [the `enableSuspense` flag](https://github.com/facebook/react/blob/d79238f1eeb6634ba7a3df23c3b2709b56cbb8b2/packages/shared/ReactFeatureFlags.js#L19) to `true` and save the file.
-
-**After you've done that,** follow these steps:
+Follow these steps:
 
 ```shell
 # 1: Build react from source
 cd /path/to/react
 yarn
-yarn build dom-client,core,react-cache,schedule --type=NODE
+yarn build dom-client,core,react-cache,scheduler --type=NODE
 
 # 2: Install fixture dependencies
 cd fixtures/unstable-async/suspense/

diff --git a/fixtures/unstable-async/suspense/src/components/App.js b/fixtures/unstable-async/suspense/src/components/App.js
@@ -1,4 +1,4 @@
-import React, {Placeholder, PureComponent} from 'react';
+import React, {unstable_Suspense as Suspense, PureComponent} from 'react';
 import {unstable_scheduleCallback} from 'scheduler';
 import {
   unstable_trace as trace,
@@ -76,21 +76,21 @@ export default class App extends PureComponent {
           }}>
           Return to list
         </button>
-        <Placeholder delayMs={2000} fallback={<Spinner size="large" />}>
+        <Suspense maxDuration={2000} fallback={<Spinner size="large" />}>
           <UserPageLoader id={id} />
-        </Placeholder>
+        </Suspense>
       </div>
     );
   }
 
   renderList(loadingId) {
     return (
-      <Placeholder delayMs={1500} fallback={<Spinner size="large" />}>
+      <Suspense maxDuration={1500} fallback={<Spinner size="large" />}>
         <ContributorListPage
           loadingId={loadingId}
           onUserClick={this.handleUserClick}
         />
-      </Placeholder>
+      </Suspense>
     );
   }
 }
diff --git a/fixtures/unstable-async/suspense/src/components/UserPage.js b/fixtures/unstable-async/suspense/src/components/UserPage.js
@@ -1,4 +1,4 @@
-import React, {Placeholder} from 'react';
+import React, {unstable_Suspense as Suspense} from 'react';
 import {createResource} from 'react-cache';
 import Spinner from './Spinner';
 import {cache} from '../cache';
@@ -14,9 +14,9 @@ export default function UserPage({id}) {
         alignItems: 'start',
       }}>
       <UserDetails id={id} />
-      <Placeholder delayMs={1000} fallback={<Spinner size="medium" />}>
+      <Suspense maxDuration={1000} fallback={<Spinner size="medium" />}>
         <Repositories id={id} />
-      </Placeholder>
+      </Suspense>
     </div>
   );
 }
@@ -118,7 +118,7 @@ function Img({src, alt, ...rest}) {
 
 function UserPicture({source}) {
   return (
-    <Placeholder delayMs={1500} fallback={<img src={source} alt="poster" />}>
+    <Suspense maxDuration={1500} fallback={<img src={source} alt="poster" />}>
       <Img
         src={source}
         alt="profile picture"
@@ -128,7 +128,7 @@ function UserPicture({source}) {
           borderRadius: '0.5rem',
         }}
       />
-    </Placeholder>
+    </Suspense>
   );
 }
 

diff --git a/...actDOMServerPlaceholders-test.internal.js → ..._/ReactDOMServerSuspense-test.internal.js b/...actDOMServerPlaceholders-test.internal.js → ..._/ReactDOMServerSuspense-test.internal.js
@@ -21,7 +21,6 @@ function initModules() {
   jest.resetModuleRegistry();
 
   ReactFeatureFlags = require('shared/ReactFeatureFlags');
-  ReactFeatureFlags.enableSuspense = true;
   ReactFeatureFlags.enableSuspenseServerRenderer = true;
 
   React = require('react');
@@ -39,7 +38,7 @@ const {resetModules, serverRender} = ReactDOMServerIntegrationUtils(
   initModules,
 );
 
-describe('ReactDOMServerPlaceholders', () => {
+describe('ReactDOMServerSuspense', () => {
   beforeEach(() => {
     resetModules();
   });
@@ -49,9 +48,9 @@ describe('ReactDOMServerPlaceholders', () => {
       throw new Promise(() => {});
     };
     const e = await serverRender(
-      <React.Placeholder fallback={<div />}>
+      <React.unstable_Suspense fallback={<div />}>
         <Suspended />
-      </React.Placeholder>,
+      </React.unstable_Suspense>,
     );
 
     expect(e.tagName).toBe('DIV');

diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -33,7 +33,7 @@ import {
   REACT_FRAGMENT_TYPE,
   REACT_STRICT_MODE_TYPE,
   REACT_CONCURRENT_MODE_TYPE,
-  REACT_PLACEHOLDER_TYPE,
+  REACT_SUSPENSE_TYPE,
   REACT_PORTAL_TYPE,
   REACT_PROFILER_TYPE,
   REACT_PROVIDER_TYPE,
@@ -916,7 +916,7 @@ class ReactDOMServerRenderer {
           this.stack.push(frame);
           return '';
         }
-        case REACT_PLACEHOLDER_TYPE: {
+        case REACT_SUSPENSE_TYPE: {
           if (enableSuspenseServerRenderer) {
             const nextChildren = toArray(
               // Always use the fallback when synchronously rendering to string.

diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js
@@ -33,7 +33,7 @@ import {
   ContextProvider,
   ContextConsumer,
   Profiler,
-  PlaceholderComponent,
+  SuspenseComponent,
   FunctionComponentLazy,
   ClassComponentLazy,
   ForwardRefLazy,
@@ -58,7 +58,7 @@ import {
   REACT_PROVIDER_TYPE,
   REACT_CONTEXT_TYPE,
   REACT_CONCURRENT_MODE_TYPE,
-  REACT_PLACEHOLDER_TYPE,
+  REACT_SUSPENSE_TYPE,
   REACT_PURE_TYPE,
 } from 'shared/ReactSymbols';
 
@@ -442,8 +442,8 @@ export function createFiberFromElement(
         break;
       case REACT_PROFILER_TYPE:
         return createFiberFromProfiler(pendingProps, mode, expirationTime, key);
-      case REACT_PLACEHOLDER_TYPE:
-        fiberTag = PlaceholderComponent;
+      case REACT_SUSPENSE_TYPE:
+        fiberTag = SuspenseComponent;
         break;
       default: {
         if (typeof type === 'object' && type !== null) {

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -30,7 +30,7 @@ import {
   ContextProvider,
   ContextConsumer,
   Profiler,
-  PlaceholderComponent,
+  SuspenseComponent,
   PureComponent,
   PureComponentLazy,
 } from 'shared/ReactWorkTags';
@@ -45,7 +45,6 @@ import {
 } from 'shared/ReactSideEffectTags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
-  enableSuspense,
   debugRenderPhaseSideEffects,
   debugRenderPhaseSideEffectsForStrictMode,
   enableProfilerTimer,
@@ -935,18 +934,16 @@ function mountIndeterminateComponent(
   }
 }
 
-function updatePlaceholderComponent(
+function updateSuspenseComponent(
   current,
   workInProgress,
   renderExpirationTime,
 ) {
-  if (enableSuspense) {
   const nextProps = workInProgress.pendingProps;
 
   // Check if we already attempted to render the normal state. If we did,
   // and we timed out, render the placeholder state.
-    const alreadyCaptured =
-      (workInProgress.effectTag & DidCapture) === NoEffect;
+  const alreadyCaptured = (workInProgress.effectTag & DidCapture) === NoEffect;
 
   let nextDidTimeout;
   if (current !== null && workInProgress.updateQueue !== null) {
@@ -1003,9 +1000,6 @@ function updatePlaceholderComponent(
   workInProgress.memoizedProps = nextProps;
   workInProgress.memoizedState = nextDidTimeout;
   return workInProgress.child;
-  } else {
-    return null;
-  }
 }
 
 function updatePortalComponent(
@@ -1342,8 +1336,8 @@ function beginWork(
       return updateHostComponent(current, workInProgress, renderExpirationTime);
     case HostText:
       return updateHostText(current, workInProgress);
-    case PlaceholderComponent:
-      return updatePlaceholderComponent(
+    case SuspenseComponent:
+      return updateSuspenseComponent(
         current,
         workInProgress,
         renderExpirationTime,

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -22,7 +22,6 @@ import type {CapturedValue, CapturedError} from './ReactCapturedValue';
 import {
   enableSchedulerTracing,
   enableProfilerTimer,
-  enableSuspense,
 } from 'shared/ReactFeatureFlags';
 import {
   ClassComponent,
@@ -32,7 +31,7 @@ import {
   HostText,
   HostPortal,
   Profiler,
-  PlaceholderComponent,
+  SuspenseComponent,
 } from 'shared/ReactWorkTags';
 import {
   invokeGuardedCallback,
@@ -352,8 +351,7 @@ function commitLifeCycles(
       }
       return;
     }
-    case PlaceholderComponent: {
-      if (enableSuspense) {
+    case SuspenseComponent: {
       if ((finishedWork.mode & StrictMode) === NoEffect) {
         // In loose mode, a placeholder times out by scheduling a synchronous
         // update in the commit phase. Use `updateQueue` field to signal that
@@ -368,7 +366,6 @@ function commitLifeCycles(
         const currentTime = requestCurrentTime();
         finishedWork.stateNode = {timedOutAt: currentTime};
       }
-      }
       return;
     }
     default: {
@@ -863,7 +860,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case Profiler: {
       return;
     }
-    case PlaceholderComponent: {
+    case SuspenseComponent: {
       return;
     }
     default: {

diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js
@@ -34,7 +34,7 @@ import {
   Fragment,
   Mode,
   Profiler,
-  PlaceholderComponent,
+  SuspenseComponent,
   ForwardRefLazy,
   PureComponent,
   PureComponentLazy,
@@ -508,7 +508,7 @@ function completeWork(
     case ForwardRef:
     case ForwardRefLazy:
       break;
-    case PlaceholderComponent:
+    case SuspenseComponent:
       break;
     case Fragment:
       break;

diff --git a/packages/react-reconciler/src/ReactFiberScheduler.js b/packages/react-reconciler/src/ReactFiberScheduler.js
@@ -49,7 +49,6 @@ import {
   enableUserTimingAPI,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   warnAboutDeprecatedLifecycles,
-  enableSuspense,
 } from 'shared/ReactFeatureFlags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
@@ -1374,7 +1373,7 @@ function renderRoot(
     }
   }
 
-  if (enableSuspense && !isExpired && nextLatestAbsoluteTimeoutMs !== -1) {
+  if (!isExpired && nextLatestAbsoluteTimeoutMs !== -1) {
     // The tree was suspended.
     const suspendedExpirationTime = expirationTime;
     markSuspendedPriorityLevel(root, suspendedExpirationTime);
@@ -1567,7 +1566,6 @@ function retrySuspendedRoot(
   fiber: Fiber,
   suspendedTime: ExpirationTime,
 ) {
-  if (enableSuspense) {
   let retryTime;
 
   if (isPriorityLevelSuspended(root, suspendedTime)) {
@@ -1576,7 +1574,7 @@ function retrySuspendedRoot(
 
     markPingedPriorityLevel(root, retryTime);
   } else {
-      // Placeholder already timed out. Compute a new expiration time
+    // Suspense already timed out. Compute a new expiration time
     const currentTime = requestCurrentTime();
     retryTime = computeExpirationForFiber(currentTime, fiber);
     markPendingPriorityLevel(root, retryTime);
@@ -1587,7 +1585,7 @@ function retrySuspendedRoot(
   // we should not trigger another update here. One case this happens is when
   // we are in sync mode and a single promise is thrown both on initial render
   // and on update; we attach two .then(retrySuspendedRoot) callbacks and each
-    // one performs Sync work, rerendering the Placeholder.
+  // one performs Sync work, rerendering the Suspense.
 
   if ((fiber.mode & ConcurrentMode) !== NoContext) {
     if (root === nextRoot && nextRenderExpirationTime === suspendedTime) {
@@ -1603,7 +1601,6 @@ function retrySuspendedRoot(
     requestWork(root, rootExpirationTime);
   }
 }
-}
 
 function scheduleWorkToRoot(fiber: Fiber, expirationTime): FiberRoot | null {
   recordScheduleUpdate();
@@ -1877,7 +1874,7 @@ function onSuspend(
   msUntilTimeout: number,
 ): void {
   root.expirationTime = rootExpirationTime;
-  if (enableSuspense && msUntilTimeout === 0 && !shouldYield()) {
+  if (msUntilTimeout === 0 && !shouldYield()) {
     // Don't wait an additional tick. Commit the tree immediately.
     root.pendingCommitExpirationTime = suspendedExpirationTime;
     root.finishedWork = finishedWork;
@@ -1895,7 +1892,6 @@ function onYield(root) {
 }
 
 function onTimeout(root, finishedWork, suspendedExpirationTime) {
-  if (enableSuspense) {
   // The root timed out. Commit it.
   root.pendingCommitExpirationTime = suspendedExpirationTime;
   root.finishedWork = finishedWork;
@@ -1906,7 +1902,6 @@ function onTimeout(root, finishedWork, suspendedExpirationTime) {
   currentSchedulerTime = currentRendererTime;
   flushRoot(root, suspendedExpirationTime);
 }
-}
 
 function onCommit(root, expirationTime) {
   root.expirationTime = expirationTime;
@@ -2247,7 +2242,7 @@ function performWorkOnRoot(
       // If this root previously suspended, clear its existing timeout, since
       // we're about to try rendering again.
       const timeoutHandle = root.timeoutHandle;
-      if (enableSuspense && timeoutHandle !== noTimeout) {
+      if (timeoutHandle !== noTimeout) {
         root.timeoutHandle = noTimeout;
         // $FlowFixMe Complains noTimeout is not a TimeoutID, despite the check above
         cancelTimeout(timeoutHandle);
@@ -2271,7 +2266,7 @@ function performWorkOnRoot(
       // If this root previously suspended, clear its existing timeout, since
       // we're about to try rendering again.
       const timeoutHandle = root.timeoutHandle;
-      if (enableSuspense && timeoutHandle !== noTimeout) {
+      if (timeoutHandle !== noTimeout) {
         root.timeoutHandle = noTimeout;
         // $FlowFixMe Complains noTimeout is not a TimeoutID, despite the check above
         cancelTimeout(timeoutHandle);