[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.

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 {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.
@@ -177,11 +178,15 @@ 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 (!enableUseResourceEffectHook) {
+      const create = effect.create;
+      const inst = effect.inst;
+      const destroy = create();
+      // $FlowFixMe[incompatible-type] (@poteto)
+      inst.destroy = destroy;
+      // $FlowFixMe[incompatible-return] (@poteto)
+      return destroy;
+    }
   },
 };
 

packages/react-reconciler/src/ReactFiberCommitEffects.js

@@ -18,6 +18,7 @@ import {
   enableProfilerNestedUpdatePhase,
   enableSchedulingProfiler,
   enableScopeAPI,
+  enableUseResourceEffectHook,
 } from 'shared/ReactFeatureFlags';
 import {
   ClassComponent,
@@ -70,6 +71,7 @@ import {
 } from './ReactFiberCallUserSpace';
 
 import {runWithFiberInDEV} from './ReactCurrentFiber';
+import {ResourceEffectKind, SimpleEffectKind} from './ReactFiberHooks';
 
 function shouldProfile(current: Fiber): boolean {
   return (
@@ -146,19 +148,51 @@ export function commitHookEffectListMount(
 
           // Mount
           let destroy;
+          if (
+            enableUseResourceEffectHook &&
+            effect.kind === ResourceEffectKind
+          ) {
+            if (typeof effect.create === 'function') {
+              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,
+                  );
+                }
+              }
+            } else if (
+              typeof effect.update === 'function' &&
+              effect.resource != null
+            ) {
+              // TODO(@poteto) what about multiple updates?
+              effect.update(effect.resource);
+            }
+            destroy = effect.destroy;
+          }
           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 +210,11 @@ export function commitHookEffectListMount(
                 hookName = 'useLayoutEffect';
               } else if ((effect.tag & HookInsertion) !== NoFlags) {
                 hookName = 'useInsertionEffect';
+              } else if (
+                enableUseResourceEffectHook &&
+                effect.kind === ResourceEffectKind
+              ) {
+                hookName = 'useResourceEffect';
               } else {
                 hookName = 'useEffect';
               }
@@ -244,9 +283,21 @@ export function commitHookEffectListUnmount(
         if ((effect.tag & flags) === flags) {
           // Unmount
           const inst = effect.inst;
+          if (
+            enableUseResourceEffectHook &&
+            effect.kind === ResourceEffectKind &&
+            effect.resource != null &&
+            (effect.create != null ||
+              // TODO(@poteto) this feels gross
+              finishedWork.return == null)
+          ) {
+            inst.destroy = effect.destroy;
+          }
           const destroy = inst.destroy;
           if (destroy !== undefined) {
             inst.destroy = undefined;
+            const resource = effect.resource;
+            effect.resource = null;
             if (enableSchedulingProfiler) {
               if ((flags & HookPassive) !== NoHookEffect) {
                 markComponentPassiveEffectUnmountStarted(finishedWork);
@@ -260,7 +311,12 @@ export function commitHookEffectListUnmount(
                 setIsRunningInsertionEffect(true);
               }
             }
-            safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+            safelyCallDestroy(
+              finishedWork,
+              nearestMountedAncestor,
+              destroy,
+              resource,
+            );
             if (__DEV__) {
               if ((flags & HookInsertion) !== NoHookEffect) {
                 setIsRunningInsertionEffect(false);
@@ -876,19 +932,21 @@ export function safelyDetachRef(
 function safelyCallDestroy(
   current: Fiber,
   nearestMountedAncestor: Fiber | null,
-  destroy: () => void,
+  destroy: mixed => void,
+  resource: mixed,
 ) {
+  const destroy_ = resource == null ? destroy : destroy.bind(null, resource);
   if (__DEV__) {
     runWithFiberInDEV(
       current,
       callDestroyInDEV,
       current,
       nearestMountedAncestor,
-      destroy,
+      destroy_,
     );
   } else {
     try {
-      destroy();
+      destroy_();
     } catch (error) {
       captureCommitPhaseError(current, nearestMountedAncestor, error);
     }