[crud] Basic implementation

This PR introduces a new experimental hook `useResourceEffect`, which is something that we're doing some very early initial tests on. This may likely not pan out and will be removed or modified if so. Please do not rely on it as it will break.
facebook · Nov 12, 2024 · 55c5497 · 55c5497
1 parent 3770c11
commit 55c5497
Show file tree

Hide file tree

Showing 18 changed files with 1,260 additions and 29 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberCallUserSpace.js b/packages/react-reconciler/src/ReactFiberCallUserSpace.js
@@ -14,6 +14,7 @@ import type {CapturedValue} from './ReactCapturedValue';
 
 import {isRendering, setIsRendering} from './ReactCurrentFiber';
 import {captureCommitPhaseError} from './ReactFiberWorkLoop';
+import {SimpleEffectKind} from './ReactFiberHooks';
 
 // These indirections exists so we can exclude its stack frame in DEV (and anything below it).
 // TODO: Consider marking the whole bundle instead of these boundaries.
@@ -177,11 +178,13 @@ export const callComponentWillUnmountInDEV: (
 
 const callCreate = {
   'react-stack-bottom-frame': function (effect: Effect): (() => void) | void {
-    const create = effect.create;
-    const inst = effect.inst;
-    const destroy = create();
-    inst.destroy = destroy;
-    return destroy;
+    if (effect.kind === SimpleEffectKind) {
+      const create = effect.create;
+      const inst = effect.inst;
+      const destroy = create();
+      inst.destroy = destroy;
+      return destroy;
+    }
   },
 };
 

diff --git a/packages/react-reconciler/src/ReactFiberCommitEffects.js b/packages/react-reconciler/src/ReactFiberCommitEffects.js
@@ -18,6 +18,7 @@ import {
   enableProfilerNestedUpdatePhase,
   enableSchedulingProfiler,
   enableScopeAPI,
+  enableUseResourceEffectHook,
 } from 'shared/ReactFeatureFlags';
 import {
   ClassComponent,
@@ -49,6 +50,7 @@ import {
   Layout as HookLayout,
   Insertion as HookInsertion,
   Passive as HookPassive,
+  HasEffect as HookHasEffect,
 } from './ReactHookEffectTags';
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork';
 import {
@@ -70,6 +72,11 @@ import {
 } from './ReactFiberCallUserSpace';
 
 import {runWithFiberInDEV} from './ReactCurrentFiber';
+import {
+  ResourceEffectIdentityKind,
+  ResourceEffectUpdateKind,
+  SimpleEffectKind,
+} from './ReactFiberHooks';
 
 function shouldProfile(current: Fiber): boolean {
   return (
@@ -146,19 +153,56 @@ export function commitHookEffectListMount(
 
           // Mount
           let destroy;
+          if (enableUseResourceEffectHook) {
+            if (effect.kind === ResourceEffectIdentityKind) {
+              effect.resource = effect.create();
+              if (__DEV__) {
+                if (effect.resource == null) {
+                  console.error(
+                    'useResourceEffect must provide a callback which returns a resource. ' +
+                      'If a managed resource is not needed here, use useEffect. Received %s',
+                    effect.resource,
+                  );
+                }
+              }
+              if (effect.next.kind === ResourceEffectUpdateKind) {
+                effect.next.resource = effect.resource;
+              }
+              destroy = effect.destroy;
+            }
+            if (effect.kind === ResourceEffectUpdateKind) {
+              if (
+                // We don't want to fire updates on remount during Activity
+                (flags & HookHasEffect) > 0 &&
+                typeof effect.update === 'function' &&
+                effect.resource != null
+              ) {
+                // TODO(@poteto) what about multiple updates?
+                effect.update(effect.resource);
+              }
+            }
+          }
           if (__DEV__) {
             if ((flags & HookInsertion) !== NoHookEffect) {
               setIsRunningInsertionEffect(true);
             }
-            destroy = runWithFiberInDEV(finishedWork, callCreateInDEV, effect);
+            if (effect.kind === SimpleEffectKind) {
+              destroy = runWithFiberInDEV(
+                finishedWork,
+                callCreateInDEV,
+                effect,
+              );
+            }
             if ((flags & HookInsertion) !== NoHookEffect) {
               setIsRunningInsertionEffect(false);
             }
           } else {
-            const create = effect.create;
-            const inst = effect.inst;
-            destroy = create();
-            inst.destroy = destroy;
+            if (effect.kind === SimpleEffectKind) {
+              const create = effect.create;
+              const inst = effect.inst;
+              destroy = create();
+              inst.destroy = destroy;
+            }
           }
 
           if (enableSchedulingProfiler) {
@@ -176,6 +220,11 @@ export function commitHookEffectListMount(
                 hookName = 'useLayoutEffect';
               } else if ((effect.tag & HookInsertion) !== NoFlags) {
                 hookName = 'useInsertionEffect';
+              } else if (
+                enableUseResourceEffectHook &&
+                effect.kind === ResourceEffectIdentityKind
+              ) {
+                hookName = 'useResourceEffect';
               } else {
                 hookName = 'useEffect';
               }
@@ -244,9 +293,28 @@ export function commitHookEffectListUnmount(
         if ((effect.tag & flags) === flags) {
           // Unmount
           const inst = effect.inst;
+          if (
+            enableUseResourceEffectHook &&
+            effect.kind === ResourceEffectIdentityKind &&
+            effect.resource != null
+          ) {
+            inst.destroy = effect.destroy;
+          }
           const destroy = inst.destroy;
           if (destroy !== undefined) {
             inst.destroy = undefined;
+            let resource;
+            if (enableUseResourceEffectHook) {
+              if (effect.kind === ResourceEffectIdentityKind) {
+                resource = effect.resource;
+                effect.resource = null;
+                // TODO(@poteto) very sketchy
+                if (effect.next.kind === ResourceEffectUpdateKind) {
+                  effect.next.resource = null;
+                  effect.next.update = undefined;
+                }
+              }
+            }
             if (enableSchedulingProfiler) {
               if ((flags & HookPassive) !== NoHookEffect) {
                 markComponentPassiveEffectUnmountStarted(finishedWork);
@@ -260,7 +328,16 @@ export function commitHookEffectListUnmount(
                 setIsRunningInsertionEffect(true);
               }
             }
-            safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+            if (enableUseResourceEffectHook) {
+              safelyCallDestroyWithResource(
+                finishedWork,
+                nearestMountedAncestor,
+                destroy,
+                resource,
+              );
+            } else {
+              safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+            }
             if (__DEV__) {
               if ((flags & HookInsertion) !== NoHookEffect) {
                 setIsRunningInsertionEffect(false);
@@ -895,6 +972,30 @@ function safelyCallDestroy(
   }
 }
 
+function safelyCallDestroyWithResource(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  destroy: mixed => void,
+  resource: mixed,
+) {
+  const destroy_ = resource == null ? destroy : destroy.bind(null, resource);
+  if (__DEV__) {
+    runWithFiberInDEV(
+      current,
+      callDestroyInDEV,
+      current,
+      nearestMountedAncestor,
+      destroy_,
+    );
+  } else {
+    try {
+      destroy_();
+    } catch (error) {
+      captureCommitPhaseError(current, nearestMountedAncestor, error);
+    }
+  }
+}
+
 function commitProfiler(
   finishedWork: Fiber,
   current: Fiber | null,