Add built-in Suspense cache with support for invalidation (refreshing) (

#20456)
facebook · Dec 18, 2020 · efc57e5 · efc57e5
1 parent 00a5b08
commit efc57e5
Show file tree

Hide file tree

Showing 39 changed files with 2,387 additions and 59 deletions.
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -489,6 +489,10 @@ function useOpaqueIdentifier(): OpaqueIDType {
  );
 }
 
+function useCacheRefresh(): <T>(?() => T, ?T) => void {
+ invariant(false, 'Not implemented.');
+}
+
 function noop(): void {}
 
 export let currentPartialRenderer: PartialRenderer = (null: any);
@@ -520,4 +524,5 @@ export const Dispatcher: DispatcherType = {
 
 if (enableCache) {
  Dispatcher.getCacheForType = getCacheForType;
+ Dispatcher.useCacheRefresh = useCacheRefresh;
 }
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
@@ -27,6 +27,7 @@ import {
  enableProfilerTimer,
  enableFundamentalAPI,
  enableScopeAPI,
+ enableCache,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
@@ -54,6 +55,7 @@ import {
  ScopeComponent,
  OffscreenComponent,
  LegacyHiddenComponent,
+ CacheComponent,
 } from './ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 
@@ -88,6 +90,7 @@ import {
  REACT_SCOPE_TYPE,
  REACT_OFFSCREEN_TYPE,
  REACT_LEGACY_HIDDEN_TYPE,
+ REACT_CACHE_TYPE,
 } from 'shared/ReactSymbols';
 
 export type {Fiber};
@@ -501,6 +504,11 @@ export function createFiberFromTypeAndProps(
  return createFiberFromScope(type, pendingProps, mode, lanes, key);
  }
  // eslint-disable-next-line no-fallthrough
+ case REACT_CACHE_TYPE:
+ if (enableCache) {
+ return createFiberFromCache(pendingProps, mode, lanes, key);
+ }
+ // eslint-disable-next-line no-fallthrough
  default: {
  if (typeof type === 'object' && type !== null) {
  switch (type.$$typeof) {
@@ -745,6 +753,24 @@ export function createFiberFromLegacyHidden(
  return fiber;
 }
 
+export function createFiberFromCache(
+ pendingProps: any,
+ mode: TypeOfMode,
+ lanes: Lanes,
+ key: null | string,
+) {
+ const fiber = createFiber(CacheComponent, pendingProps, key, mode);
+ // TODO: The Cache fiber shouldn't have a type. It has a tag.
+ // This needs to be fixed in getComponentName so that it relies on the tag
+ // instead.
+ if (__DEV__) {
+ fiber.type = REACT_CACHE_TYPE;
+ }
+ fiber.elementType = REACT_CACHE_TYPE;
+ fiber.lanes = lanes;
+ return fiber;
+}
+
 export function createFiberFromText(
  content: string,
  mode: TypeOfMode,

diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
@@ -27,6 +27,7 @@ import {
  enableProfilerTimer,
  enableFundamentalAPI,
  enableScopeAPI,
+ enableCache,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
@@ -54,6 +55,7 @@ import {
  ScopeComponent,
  OffscreenComponent,
  LegacyHiddenComponent,
+ CacheComponent,
 } from './ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 
@@ -88,6 +90,7 @@ import {
  REACT_SCOPE_TYPE,
  REACT_OFFSCREEN_TYPE,
  REACT_LEGACY_HIDDEN_TYPE,
+ REACT_CACHE_TYPE,
 } from 'shared/ReactSymbols';
 
 export type {Fiber};
@@ -501,6 +504,11 @@ export function createFiberFromTypeAndProps(
  return createFiberFromScope(type, pendingProps, mode, lanes, key);
  }
  // eslint-disable-next-line no-fallthrough
+ case REACT_CACHE_TYPE:
+ if (enableCache) {
+ return createFiberFromCache(pendingProps, mode, lanes, key);
+ }
+ // eslint-disable-next-line no-fallthrough
  default: {
  if (typeof type === 'object' && type !== null) {
  switch (type.$$typeof) {
@@ -745,6 +753,24 @@ export function createFiberFromLegacyHidden(
  return fiber;
 }
 
+export function createFiberFromCache(
+ pendingProps: any,
+ mode: TypeOfMode,
+ lanes: Lanes,
+ key: null | string,
+) {
+ const fiber = createFiber(CacheComponent, pendingProps, key, mode);
+ // TODO: The Cache fiber shouldn't have a type. It has a tag.
+ // This needs to be fixed in getComponentName so that it relies on the tag
+ // instead.
+ if (__DEV__) {
+ fiber.type = REACT_CACHE_TYPE;
+ }
+ fiber.elementType = REACT_CACHE_TYPE;
+ fiber.lanes = lanes;
+ return fiber;
+}
+
 export function createFiberFromText(
  content: string,
  mode: TypeOfMode,