Added rudimentary support for Cache to DevTools

Author: Brian Vaughn

packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap

@@ -685,4 +685,5 @@ exports[`Store should show the right display names for special component types 1
       <Baz> [withFoo][withBar]
       <Baz> [Memo][withFoo][withBar]
       <Baz> [ForwardRef][withFoo][withBar]
+      <Cache>
 `;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -886,6 +886,7 @@ describe('Store', () => {
         <FakeHigherOrderComponent />
         <MemoizedFakeHigherOrderComponent />
         <ForwardRefFakeHigherOrderComponent />
+        <React.unstable_Cache />
       </React.Fragment>
     );
 

packages/react-devtools-shared/src/backend/renderer.js

@@ -171,6 +171,7 @@ export function getInternalReactConstants(
   // Currently the version in Git is 17.0.2 (but that version has not been/may not end up being released).
   if (gt(version, '17.0.1')) {
     ReactTypeOfWork = {
+      CacheComponent: 24, // Experimental
       ClassComponent: 1,
       ContextConsumer: 9,
       ContextProvider: 10,
@@ -200,6 +201,7 @@ export function getInternalReactConstants(
     };
   } else if (gte(version, '17.0.0-alpha')) {
     ReactTypeOfWork = {
+      CacheComponent: -1, // Doens't exist yet
       ClassComponent: 1,
       ContextConsumer: 9,
       ContextProvider: 10,
@@ -229,6 +231,7 @@ export function getInternalReactConstants(
     };
   } else if (gte(version, '16.6.0-beta.0')) {
     ReactTypeOfWork = {
+      CacheComponent: -1, // Doens't exist yet
       ClassComponent: 1,
       ContextConsumer: 9,
       ContextProvider: 10,
@@ -258,6 +261,7 @@ export function getInternalReactConstants(
     };
   } else if (gte(version, '16.4.3-alpha')) {
     ReactTypeOfWork = {
+      CacheComponent: -1, // Doens't exist yet
       ClassComponent: 2,
       ContextConsumer: 11,
       ContextProvider: 12,
@@ -287,6 +291,7 @@ export function getInternalReactConstants(
     };
   } else {
     ReactTypeOfWork = {
+      CacheComponent: -1, // Doens't exist yet
       ClassComponent: 2,
       ContextConsumer: 12,
       ContextProvider: 13,
@@ -330,6 +335,7 @@ export function getInternalReactConstants(
   }
 
   const {
+    CacheComponent,
     ClassComponent,
     IncompleteClassComponent,
     FunctionComponent,
@@ -377,6 +383,8 @@ export function getInternalReactConstants(
     let resolvedContext: any = null;
 
     switch (tag) {
+      case CacheComponent:
+        return 'Cache';
       case ClassComponent:
       case IncompleteClassComponent:
         return getDisplayName(resolvedType);
@@ -481,12 +489,13 @@ export function attach(
   } = getInternalReactConstants(renderer.version);
   const {NoFlags, PerformedWork, Placement} = ReactTypeOfSideEffect;
   const {
-    FunctionComponent,
+    CacheComponent,
     ClassComponent,
     ContextConsumer,
     DehydratedSuspenseComponent,
-    Fragment,
     ForwardRef,
+    Fragment,
+    FunctionComponent,
     HostRoot,
     HostPortal,
     HostComponent,
@@ -2330,6 +2339,10 @@ export function attach(
         tag === ForwardRef) &&
       (!!memoizedState || !!dependencies);
 
+    // TODO Show custom UI for Cache like we do for Suspense
+    // For now, just hide state data entirely since it's not meant to be inspected.
+    const showState = !usesHooks && tag !== CacheComponent;
+
     const typeSymbol = getTypeSymbol(type);
 
     let canViewSource = false;
@@ -2496,7 +2509,7 @@ export function attach(
       context,
       hooks,
       props: memoizedProps,
-      state: usesHooks ? null : memoizedState,
+      state: showState ? memoizedState : null,
 
       // List of owners
       owners,

packages/react-devtools-shared/src/backend/types.js

@@ -26,6 +26,7 @@ export type WorkFlags = number;
 export type ExpirationTime = number;
 
 export type WorkTagMap = {|
+  CacheComponent: WorkTag,
   ClassComponent: WorkTag,
   ContextConsumer: WorkTag,
   ContextProvider: WorkTag,

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

@@ -19,6 +19,7 @@ import {
   Profiler,
   StrictMode,
   Suspense,
+  unstable_Cache as Cache,
 } from 'react';
 
 const Context = createContext('abc');
@@ -61,15 +62,17 @@ export default function ElementTypes() {
           <Context.Consumer>{value => null}</Context.Consumer>
         </Context.Provider>
         <StrictMode>
-          <Suspense fallback={<div>Loading...</div>}>
-            <ClassComponent />
-            <FunctionComponent />
-            <MemoFunctionComponent />
-            <ForwardRefComponent />
-            <ForwardRefComponentWithAnonymousFunction />
-            <ForwardRefComponentWithCustomDisplayName />
-            <LazyComponent />
-          </Suspense>
+          <Cache>
+            <Suspense fallback={<div>Loading...</div>}>
+              <ClassComponent />
+              <FunctionComponent />
+              <MemoFunctionComponent />
+              <ForwardRefComponent />
+              <ForwardRefComponentWithAnonymousFunction />
+              <ForwardRefComponentWithCustomDisplayName />
+              <LazyComponent />
+            </Suspense>
+          </Cache>
         </StrictMode>
       </Fragment>
     </Profiler>