Allow DevTools to toggle Suspense state

Author: gaearon

packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js

@@ -16,15 +16,25 @@ describe('React hooks DevTools integration', () => {
   let ReactTestRenderer;
   let act;
   let overrideHookState;
+  let overrideProps;
+  let suspendedFibers;
 
   beforeEach(() => {
+    suspendedFibers = new Set();
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
       inject: injected => {
         overrideHookState = injected.overrideHookState;
+        overrideProps = injected.overrideProps;
       },
       supportsFiber: true,
       onCommitFiberRoot: () => {},
       onCommitFiberUnmount: () => {},
+      shouldSuspendFiber(rendererId, fiber) {
+        return (
+          suspendedFibers.has(fiber) ||
+          (fiber.alternate && suspendedFibers.has(fiber.alternate))
+        );
+      },
     };
 
     jest.resetModules();
@@ -173,4 +183,41 @@ describe('React hooks DevTools integration', () => {
       });
     }
   });
+
+  it('should support triggering suspense in DEV', () => {
+    function MyComponent() {
+      return 'Done';
+    }
+
+    const renderer = ReactTestRenderer.create(
+      <React.Suspense fallback={'Loading'}>
+        <MyComponent />
+      </React.Suspense>,
+    );
+    expect(renderer.toJSON()).toEqual('Done');
+
+    const fiber = renderer.root._currentFiber().return;
+    if (__DEV__) {
+      // Mark as loading
+      suspendedFibers.add(fiber);
+      overrideProps(fiber, [], null); // Re-render
+      expect(renderer.toJSON()).toEqual('Loading');
+
+      overrideProps(fiber, [], null); // Re-render
+      expect(renderer.toJSON()).toEqual('Loading');
+
+      // Mark as done
+      suspendedFibers.delete(fiber);
+      overrideProps(fiber, [], null); // Re-render
+      expect(renderer.toJSON()).toEqual('Done');
+
+      overrideProps(fiber, [], null); // Re-render
+      expect(renderer.toJSON()).toEqual('Done');
+
+      // Mark as loading again
+      suspendedFibers.add(fiber);
+      overrideProps(fiber, [], null); // Re-render
+      expect(renderer.toJSON()).toEqual('Loading');
+    }
+  });
 });

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -77,6 +77,7 @@ import {
   cloneChildFibers,
 } from './ReactChildFiber';
 import {processUpdateQueue} from './ReactUpdateQueue';
+import {shouldSuspend} from './ReactFiberDevToolsHook';
 import {
   NoWork,
   Never,
@@ -1389,6 +1390,12 @@ function updateSuspenseComponent(
   const mode = workInProgress.mode;
   const nextProps = workInProgress.pendingProps;
 
+  if (__DEV__) {
+    if (shouldSuspend(workInProgress)) {
+      workInProgress.effectTag |= DidCapture;
+    }
+  }
+
   // We should attempt to render the primary children unless this boundary
   // already suspended during this render (`alreadyCaptured` is true).
   let nextState: SuspenseState | null = workInProgress.memoizedState;

packages/react-reconciler/src/ReactFiberDevToolsHook.js

@@ -16,6 +16,9 @@ declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
 
 let onCommitFiberRoot = null;
 let onCommitFiberUnmount = null;
+let shouldSuspendFiber = function() {
+  return false;
+};
 let hasLoggedError = false;
 
 function catchErrors(fn) {
@@ -71,6 +74,13 @@ export function injectInternals(internals: Object): boolean {
     onCommitFiberUnmount = catchErrors(fiber =>
       hook.onCommitFiberUnmount(rendererID, fiber),
     );
+    if (__DEV__) {
+      if (hook.shouldSuspendFiber) {
+        shouldSuspendFiber = catchErrors(fiber =>
+          hook.shouldSuspendFiber(rendererID, fiber),
+        );
+      }
+    }
   } catch (err) {
     // Catch all errors because it is unsafe to throw during initialization.
     if (__DEV__) {
@@ -96,3 +106,7 @@ export function onCommitUnmount(fiber: Fiber) {
     onCommitFiberUnmount(fiber);
   }
 }
+
+export function shouldSuspend(fiber: Fiber) {
+  return shouldSuspendFiber(fiber);
+}

packages/react-reconciler/src/ReactFiberReconciler.js

@@ -404,7 +404,11 @@ if (__DEV__) {
   // Support DevTools props for function components, forwardRef, memo, host components, etc.
   overrideProps = (fiber: Fiber, path: Array<string | number>, value: any) => {
     flushPassiveEffects();
-    fiber.pendingProps = copyWithSet(fiber.memoizedProps, path, value);
+    if (path.length > 0) {
+      fiber.pendingProps = copyWithSet(fiber.memoizedProps, path, value);
+    } else {
+      fiber.pendingProps = {...fiber.pendingProps};
+    }
     if (fiber.alternate) {
       fiber.alternate.pendingProps = fiber.pendingProps;
     }

packages/react/src/__tests__/ReactProfiler-test.internal.js

@@ -103,6 +103,7 @@ const mockDevToolsForTest = () => {
     onCommitRoot: () => {},
     onCommitUnmount: () => {},
     isDevToolsPresent: true,
+    shouldSuspend: () => false,
   }));
 };
 

scripts/rollup/results.json

@@ -515,8 +515,8 @@
       "filename": "ReactDOM-dev.js",
       "bundleType": "FB_WWW_DEV",
       "packageName": "react-dom",
-      "size": 821918,
-      "gzip": 182691
+      "size": 849701,
+      "gzip": 188278
     },
     {
       "filename": "ReactDOM-prod.js",