[crud] Basic implementation (#31523)

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.

Author: poteto

packages/react-reconciler/src/ReactFiberCallUserSpace.js

@@ -14,6 +14,11 @@ import type {CapturedValue} from './ReactCapturedValue';
 
 import {isRendering, setIsRendering} from './ReactCurrentFiber';
 import {captureCommitPhaseError} from './ReactFiberWorkLoop';
+import {
+  ResourceEffectIdentityKind,
+  ResourceEffectUpdateKind,
+} from './ReactFiberHooks';
+import {enableUseResourceEffectHook} from 'shared/ReactFeatureFlags';
 
 // 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.
@@ -176,12 +181,54 @@ export const callComponentWillUnmountInDEV: (
   : (null: any);
 
 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;
+  'react-stack-bottom-frame': function (
+    effect: Effect,
+  ): (() => void) | mixed | void {
+    if (!enableUseResourceEffectHook) {
+      if (effect.resourceKind != null) {
+        if (__DEV__) {
+          console.error(
+            'Expected only SimpleEffects when enableUseResourceEffectHook is disabled, ' +
+              'got %s',
+            effect.resourceKind,
+          );
+        }
+      }
+      const create = effect.create;
+      const inst = effect.inst;
+      // $FlowFixMe[not-a-function] (@poteto)
+      const destroy = create();
+      // $FlowFixMe[incompatible-type] (@poteto)
+      inst.destroy = destroy;
+      return destroy;
+    } else {
+      if (effect.resourceKind == null) {
+        const create = effect.create;
+        const inst = effect.inst;
+        const destroy = create();
+        inst.destroy = destroy;
+        return destroy;
+      }
+      switch (effect.resourceKind) {
+        case ResourceEffectIdentityKind: {
+          return effect.create();
+        }
+        case ResourceEffectUpdateKind: {
+          if (typeof effect.update === 'function') {
+            effect.update(effect.inst.resource);
+          }
+          break;
+        }
+        default: {
+          if (__DEV__) {
+            console.error(
+              'Unhandled Effect kind %s. This is a bug in React.',
+              effect.kind,
+            );
+          }
+        }
+      }
+    }
   },
 };
 

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,10 @@ import {
 } from './ReactFiberCallUserSpace';
 
 import {runWithFiberInDEV} from './ReactCurrentFiber';
+import {
+  ResourceEffectIdentityKind,
+  ResourceEffectUpdateKind,
+} from './ReactFiberHooks';
 
 function shouldProfile(current: Fiber): boolean {
   return (
@@ -146,19 +152,90 @@ export function commitHookEffectListMount(
 
           // Mount
           let destroy;
+          if (enableUseResourceEffectHook) {
+            if (effect.resourceKind === ResourceEffectIdentityKind) {
+              if (__DEV__) {
+                effect.inst.resource = runWithFiberInDEV(
+                  finishedWork,
+                  callCreateInDEV,
+                  effect,
+                );
+                if (effect.inst.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.inst.resource,
+                  );
+                }
+              } else {
+                effect.inst.resource = effect.create();
+              }
+              destroy = effect.inst.destroy;
+            }
+            if (effect.resourceKind === ResourceEffectUpdateKind) {
+              if (
+                // We don't want to fire updates on remount during Activity
+                (flags & HookHasEffect) > 0 &&
+                typeof effect.update === 'function' &&
+                effect.inst.resource != null
+              ) {
+                // TODO(@poteto) what about multiple updates?
+                if (__DEV__) {
+                  runWithFiberInDEV(finishedWork, callCreateInDEV, effect);
+                } else {
+                  effect.update(effect.inst.resource);
+                }
+              }
+            }
+          }
           if (__DEV__) {
             if ((flags & HookInsertion) !== NoHookEffect) {
               setIsRunningInsertionEffect(true);
             }
-            destroy = runWithFiberInDEV(finishedWork, callCreateInDEV, effect);
+            if (enableUseResourceEffectHook) {
+              if (effect.resourceKind == null) {
+                destroy = runWithFiberInDEV(
+                  finishedWork,
+                  callCreateInDEV,
+                  effect,
+                );
+              }
+            } else {
+              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 (enableUseResourceEffectHook) {
+              if (effect.resourceKind == null) {
+                const create = effect.create;
+                const inst = effect.inst;
+                destroy = create();
+                inst.destroy = destroy;
+              }
+            } else {
+              if (effect.resourceKind != null) {
+                if (__DEV__) {
+                  console.error(
+                    'Expected only SimpleEffects when enableUseResourceEffectHook is disabled, ' +
+                      'got %s',
+                    effect.resourceKind,
+                  );
+                }
+              }
+              const create = effect.create;
+              const inst = effect.inst;
+              // $FlowFixMe[incompatible-type] (@poteto)
+              // $FlowFixMe[not-a-function] (@poteto)
+              destroy = create();
+              // $FlowFixMe[incompatible-type] (@poteto)
+              inst.destroy = destroy;
+            }
           }
 
           if (enableSchedulingProfiler) {
@@ -176,6 +253,11 @@ export function commitHookEffectListMount(
                 hookName = 'useLayoutEffect';
               } else if ((effect.tag & HookInsertion) !== NoFlags) {
                 hookName = 'useInsertionEffect';
+              } else if (
+                enableUseResourceEffectHook &&
+                effect.resourceKind != null
+              ) {
+                hookName = 'useResourceEffect';
               } else {
                 hookName = 'useEffect';
               }
@@ -202,6 +284,7 @@ export function commitHookEffectListMount(
                   `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
                   'Learn more about data fetching with Hooks: https://react.dev/link/hooks-data-fetching';
               } else {
+                // $FlowFixMe[unsafe-addition] (@poteto)
                 addendum = ' You returned: ' + destroy;
               }
               runWithFiberInDEV(
@@ -246,7 +329,13 @@ export function commitHookEffectListUnmount(
           const inst = effect.inst;
           const destroy = inst.destroy;
           if (destroy !== undefined) {
-            inst.destroy = undefined;
+            if (enableUseResourceEffectHook) {
+              if (effect.resourceKind == null) {
+                inst.destroy = undefined;
+              }
+            } else {
+              inst.destroy = undefined;
+            }
             if (enableSchedulingProfiler) {
               if ((flags & HookPassive) !== NoHookEffect) {
                 markComponentPassiveEffectUnmountStarted(finishedWork);
@@ -260,7 +349,41 @@ export function commitHookEffectListUnmount(
                 setIsRunningInsertionEffect(true);
               }
             }
-            safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+            if (enableUseResourceEffectHook) {
+              if (
+                effect.resourceKind === ResourceEffectIdentityKind &&
+                effect.inst.resource != null
+              ) {
+                safelyCallDestroyWithResource(
+                  finishedWork,
+                  nearestMountedAncestor,
+                  destroy,
+                  effect.inst.resource,
+                );
+                if (effect.next.resourceKind === ResourceEffectUpdateKind) {
+                  // $FlowFixMe[prop-missing] (@poteto)
+                  effect.next.update = undefined;
+                } else {
+                  if (__DEV__) {
+                    console.error(
+                      'Expected a ResourceEffectUpdateKind to follow ResourceEffectIdentityKind, ' +
+                        'got %s. This is a bug in React.',
+                      effect.next.resourceKind,
+                    );
+                  }
+                }
+                effect.inst.resource = null;
+              }
+              if (effect.resourceKind == null) {
+                safelyCallDestroy(
+                  finishedWork,
+                  nearestMountedAncestor,
+                  destroy,
+                );
+              }
+            } else {
+              safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+            }
             if (__DEV__) {
               if ((flags & HookInsertion) !== NoHookEffect) {
                 setIsRunningInsertionEffect(false);
@@ -895,6 +1018,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,