[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);
 
 constcallCreate={
-'react-stack-bottom-frame': function(effect: Effect): (()=>void)|void{
-const create =effect.create;
-constinst=effect.inst;
-constdestroy=create();
-inst.destroy=destroy;
-returndestroy;
+'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,
+);
+}
+}
+constcreate=effect.create;
+constinst=effect.inst;
+// $FlowFixMe[not-a-function] (@poteto)
+constdestroy=create();
+// $FlowFixMe[incompatible-type] (@poteto)
+inst.destroy=destroy;
+returndestroy;
+}else{
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=effect.inst;
+constdestroy=create();
+inst.destroy=destroy;
+returndestroy;
+}
+switch(effect.resourceKind){
+caseResourceEffectIdentityKind: {
+returneffect.create();
+}
+caseResourceEffectUpdateKind: {
+if(typeofeffect.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 {
 LayoutasHookLayout,
 InsertionasHookInsertion,
 PassiveasHookPassive,
+HasEffectasHookHasEffect,
 }from'./ReactHookEffectTags';
 import{didWarnAboutReassigningProps}from'./ReactFiberBeginWork';
 import{
@@ -70,6 +72,10 @@ import {
 }from'./ReactFiberCallUserSpace';
 
 import{runWithFiberInDEV}from'./ReactCurrentFiber';
+import{
+ResourceEffectIdentityKind,
+ResourceEffectUpdateKind,
+}from'./ReactFiberHooks';
 
 functionshouldProfile(current: Fiber): boolean{
 return(
@@ -146,19 +152,90 @@ export function commitHookEffectListMount(
 
 // Mount
 letdestroy;
+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&&
+typeofeffect.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{
-constcreate=effect.create;
-constinst=effect.inst;
-destroy=create();
-inst.destroy=destroy;
+if(enableUseResourceEffectHook){
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=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,
+);
+}
+}
+constcreate=effect.create;
+constinst=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';
 }elseif((effect.tag&HookInsertion)!==NoFlags){
 hookName='useInsertionEffect';
+}elseif(
+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(
 constinst=effect.inst;
 constdestroy=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(
 }
 }
 
+functionsafelyCallDestroyWithResource(
+current: Fiber,
+nearestMountedAncestor: Fiber|null,
+destroy: mixed=>void,
+resource: mixed,
+){
+constdestroy_=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,

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);
 
 constcallCreate={
-'react-stack-bottom-frame': function(effect: Effect): (()=>void)|void{
-const create =effect.create;
-constinst=effect.inst;
-constdestroy=create();
-inst.destroy=destroy;
-returndestroy;
+'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,
+);
+}
+}
+constcreate=effect.create;
+constinst=effect.inst;
+// $FlowFixMe[not-a-function] (@poteto)
+constdestroy=create();
+// $FlowFixMe[incompatible-type] (@poteto)
+inst.destroy=destroy;
+returndestroy;
+}else{
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=effect.inst;
+constdestroy=create();
+inst.destroy=destroy;
+returndestroy;
+}
+switch(effect.resourceKind){
+caseResourceEffectIdentityKind: {
+returneffect.create();
+}
+caseResourceEffectUpdateKind: {
+if(typeofeffect.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 {
 LayoutasHookLayout,
 InsertionasHookInsertion,
 PassiveasHookPassive,
+HasEffectasHookHasEffect,
 }from'./ReactHookEffectTags';
 import{didWarnAboutReassigningProps}from'./ReactFiberBeginWork';
 import{
@@ -70,6 +72,10 @@ import {
 }from'./ReactFiberCallUserSpace';
 
 import{runWithFiberInDEV}from'./ReactCurrentFiber';
+import{
+ResourceEffectIdentityKind,
+ResourceEffectUpdateKind,
+}from'./ReactFiberHooks';
 
 functionshouldProfile(current: Fiber): boolean{
 return(
@@ -146,19 +152,90 @@ export function commitHookEffectListMount(
 
 // Mount
 letdestroy;
+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&&
+typeofeffect.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{
-constcreate=effect.create;
-constinst=effect.inst;
-destroy=create();
-inst.destroy=destroy;
+if(enableUseResourceEffectHook){
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=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,
+);
+}
+}
+constcreate=effect.create;
+constinst=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';
 }elseif((effect.tag&HookInsertion)!==NoFlags){
 hookName='useInsertionEffect';
+}elseif(
+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(
 constinst=effect.inst;
 constdestroy=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(
 }
 }
 
+functionsafelyCallDestroyWithResource(
+current: Fiber,
+nearestMountedAncestor: Fiber|null,
+destroy: mixed=>void,
+resource: mixed,
+){
+constdestroy_=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,

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);
 
 constcallCreate={
-'react-stack-bottom-frame': function(effect: Effect): (()=>void)|void{
-const create =effect.create;
-constinst=effect.inst;
-constdestroy=create();
-inst.destroy=destroy;
-returndestroy;
+'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,
+);
+}
+}
+constcreate=effect.create;
+constinst=effect.inst;
+// $FlowFixMe[not-a-function] (@poteto)
+constdestroy=create();
+// $FlowFixMe[incompatible-type] (@poteto)
+inst.destroy=destroy;
+returndestroy;
+}else{
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=effect.inst;
+constdestroy=create();
+inst.destroy=destroy;
+returndestroy;
+}
+switch(effect.resourceKind){
+caseResourceEffectIdentityKind: {
+returneffect.create();
+}
+caseResourceEffectUpdateKind: {
+if(typeofeffect.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 {
 LayoutasHookLayout,
 InsertionasHookInsertion,
 PassiveasHookPassive,
+HasEffectasHookHasEffect,
 }from'./ReactHookEffectTags';
 import{didWarnAboutReassigningProps}from'./ReactFiberBeginWork';
 import{
@@ -70,6 +72,10 @@ import {
 }from'./ReactFiberCallUserSpace';
 
 import{runWithFiberInDEV}from'./ReactCurrentFiber';
+import{
+ResourceEffectIdentityKind,
+ResourceEffectUpdateKind,
+}from'./ReactFiberHooks';
 
 functionshouldProfile(current: Fiber): boolean{
 return(
@@ -146,19 +152,90 @@ export function commitHookEffectListMount(
 
 // Mount
 letdestroy;
+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&&
+typeofeffect.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{
-constcreate=effect.create;
-constinst=effect.inst;
-destroy=create();
-inst.destroy=destroy;
+if(enableUseResourceEffectHook){
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=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,
+);
+}
+}
+constcreate=effect.create;
+constinst=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';
 }elseif((effect.tag&HookInsertion)!==NoFlags){
 hookName='useInsertionEffect';
+}elseif(
+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(
 constinst=effect.inst;
 constdestroy=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(
 }
 }
 
+functionsafelyCallDestroyWithResource(
+current: Fiber,
+nearestMountedAncestor: Fiber|null,
+destroy: mixed=>void,
+resource: mixed,
+){
+constdestroy_=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,

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);
 
 constcallCreate={
-'react-stack-bottom-frame': function(effect: Effect): (()=>void)|void{
-const create =effect.create;
-constinst=effect.inst;
-constdestroy=create();
-inst.destroy=destroy;
-returndestroy;
+'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,
+);
+}
+}
+constcreate=effect.create;
+constinst=effect.inst;
+// $FlowFixMe[not-a-function] (@poteto)
+constdestroy=create();
+// $FlowFixMe[incompatible-type] (@poteto)
+inst.destroy=destroy;
+returndestroy;
+}else{
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=effect.inst;
+constdestroy=create();
+inst.destroy=destroy;
+returndestroy;
+}
+switch(effect.resourceKind){
+caseResourceEffectIdentityKind: {
+returneffect.create();
+}
+caseResourceEffectUpdateKind: {
+if(typeofeffect.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 {
 LayoutasHookLayout,
 InsertionasHookInsertion,
 PassiveasHookPassive,
+HasEffectasHookHasEffect,
 }from'./ReactHookEffectTags';
 import{didWarnAboutReassigningProps}from'./ReactFiberBeginWork';
 import{
@@ -70,6 +72,10 @@ import {
 }from'./ReactFiberCallUserSpace';
 
 import{runWithFiberInDEV}from'./ReactCurrentFiber';
+import{
+ResourceEffectIdentityKind,
+ResourceEffectUpdateKind,
+}from'./ReactFiberHooks';
 
 functionshouldProfile(current: Fiber): boolean{
 return(
@@ -146,19 +152,90 @@ export function commitHookEffectListMount(
 
 // Mount
 letdestroy;
+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&&
+typeofeffect.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{
-constcreate=effect.create;
-constinst=effect.inst;
-destroy=create();
-inst.destroy=destroy;
+if(enableUseResourceEffectHook){
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=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,
+);
+}
+}
+constcreate=effect.create;
+constinst=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';
 }elseif((effect.tag&HookInsertion)!==NoFlags){
 hookName='useInsertionEffect';
+}elseif(
+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(
 constinst=effect.inst;
 constdestroy=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(
 }
 }
 
+functionsafelyCallDestroyWithResource(
+current: Fiber,
+nearestMountedAncestor: Fiber|null,
+destroy: mixed=>void,
+resource: mixed,
+){
+constdestroy_=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,

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);
 
 constcallCreate={
-'react-stack-bottom-frame': function(effect: Effect): (()=>void)|void{
-const create =effect.create;
-constinst=effect.inst;
-constdestroy=create();
-inst.destroy=destroy;
-returndestroy;
+'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,
+);
+}
+}
+constcreate=effect.create;
+constinst=effect.inst;
+// $FlowFixMe[not-a-function] (@poteto)
+constdestroy=create();
+// $FlowFixMe[incompatible-type] (@poteto)
+inst.destroy=destroy;
+returndestroy;
+}else{
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=effect.inst;
+constdestroy=create();
+inst.destroy=destroy;
+returndestroy;
+}
+switch(effect.resourceKind){
+caseResourceEffectIdentityKind: {
+returneffect.create();
+}
+caseResourceEffectUpdateKind: {
+if(typeofeffect.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 {
 LayoutasHookLayout,
 InsertionasHookInsertion,
 PassiveasHookPassive,
+HasEffectasHookHasEffect,
 }from'./ReactHookEffectTags';
 import{didWarnAboutReassigningProps}from'./ReactFiberBeginWork';
 import{
@@ -70,6 +72,10 @@ import {
 }from'./ReactFiberCallUserSpace';
 
 import{runWithFiberInDEV}from'./ReactCurrentFiber';
+import{
+ResourceEffectIdentityKind,
+ResourceEffectUpdateKind,
+}from'./ReactFiberHooks';
 
 functionshouldProfile(current: Fiber): boolean{
 return(
@@ -146,19 +152,90 @@ export function commitHookEffectListMount(
 
 // Mount
 letdestroy;
+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&&
+typeofeffect.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{
-constcreate=effect.create;
-constinst=effect.inst;
-destroy=create();
-inst.destroy=destroy;
+if(enableUseResourceEffectHook){
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=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,
+);
+}
+}
+constcreate=effect.create;
+constinst=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';
 }elseif((effect.tag&HookInsertion)!==NoFlags){
 hookName='useInsertionEffect';
+}elseif(
+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(
 constinst=effect.inst;
 constdestroy=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(
 }
 }
 
+functionsafelyCallDestroyWithResource(
+current: Fiber,
+nearestMountedAncestor: Fiber|null,
+destroy: mixed=>void,
+resource: mixed,
+){
+constdestroy_=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,

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);
 
 constcallCreate={
-'react-stack-bottom-frame': function(effect: Effect): (()=>void)|void{
-const create =effect.create;
-constinst=effect.inst;
-constdestroy=create();
-inst.destroy=destroy;
-returndestroy;
+'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,
+);
+}
+}
+constcreate=effect.create;
+constinst=effect.inst;
+// $FlowFixMe[not-a-function] (@poteto)
+constdestroy=create();
+// $FlowFixMe[incompatible-type] (@poteto)
+inst.destroy=destroy;
+returndestroy;
+}else{
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=effect.inst;
+constdestroy=create();
+inst.destroy=destroy;
+returndestroy;
+}
+switch(effect.resourceKind){
+caseResourceEffectIdentityKind: {
+returneffect.create();
+}
+caseResourceEffectUpdateKind: {
+if(typeofeffect.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 {
 LayoutasHookLayout,
 InsertionasHookInsertion,
 PassiveasHookPassive,
+HasEffectasHookHasEffect,
 }from'./ReactHookEffectTags';
 import{didWarnAboutReassigningProps}from'./ReactFiberBeginWork';
 import{
@@ -70,6 +72,10 @@ import {
 }from'./ReactFiberCallUserSpace';
 
 import{runWithFiberInDEV}from'./ReactCurrentFiber';
+import{
+ResourceEffectIdentityKind,
+ResourceEffectUpdateKind,
+}from'./ReactFiberHooks';
 
 functionshouldProfile(current: Fiber): boolean{
 return(
@@ -146,19 +152,90 @@ export function commitHookEffectListMount(
 
 // Mount
 letdestroy;
+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&&
+typeofeffect.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{
-constcreate=effect.create;
-constinst=effect.inst;
-destroy=create();
-inst.destroy=destroy;
+if(enableUseResourceEffectHook){
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=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,
+);
+}
+}
+constcreate=effect.create;
+constinst=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';
 }elseif((effect.tag&HookInsertion)!==NoFlags){
 hookName='useInsertionEffect';
+}elseif(
+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(
 constinst=effect.inst;
 constdestroy=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(
 }
 }
 
+functionsafelyCallDestroyWithResource(
+current: Fiber,
+nearestMountedAncestor: Fiber|null,
+destroy: mixed=>void,
+resource: mixed,
+){
+constdestroy_=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,

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);
 
 constcallCreate={
-'react-stack-bottom-frame': function(effect: Effect): (()=>void)|void{
-const create =effect.create;
-constinst=effect.inst;
-constdestroy=create();
-inst.destroy=destroy;
-returndestroy;
+'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,
+);
+}
+}
+constcreate=effect.create;
+constinst=effect.inst;
+// $FlowFixMe[not-a-function] (@poteto)
+constdestroy=create();
+// $FlowFixMe[incompatible-type] (@poteto)
+inst.destroy=destroy;
+returndestroy;
+}else{
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=effect.inst;
+constdestroy=create();
+inst.destroy=destroy;
+returndestroy;
+}
+switch(effect.resourceKind){
+caseResourceEffectIdentityKind: {
+returneffect.create();
+}
+caseResourceEffectUpdateKind: {
+if(typeofeffect.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 {
 LayoutasHookLayout,
 InsertionasHookInsertion,
 PassiveasHookPassive,
+HasEffectasHookHasEffect,
 }from'./ReactHookEffectTags';
 import{didWarnAboutReassigningProps}from'./ReactFiberBeginWork';
 import{
@@ -70,6 +72,10 @@ import {
 }from'./ReactFiberCallUserSpace';
 
 import{runWithFiberInDEV}from'./ReactCurrentFiber';
+import{
+ResourceEffectIdentityKind,
+ResourceEffectUpdateKind,
+}from'./ReactFiberHooks';
 
 functionshouldProfile(current: Fiber): boolean{
 return(
@@ -146,19 +152,90 @@ export function commitHookEffectListMount(
 
 // Mount
 letdestroy;
+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&&
+typeofeffect.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{
-constcreate=effect.create;
-constinst=effect.inst;
-destroy=create();
-inst.destroy=destroy;
+if(enableUseResourceEffectHook){
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=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,
+);
+}
+}
+constcreate=effect.create;
+constinst=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';
 }elseif((effect.tag&HookInsertion)!==NoFlags){
 hookName='useInsertionEffect';
+}elseif(
+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(
 constinst=effect.inst;
 constdestroy=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(
 }
 }
 
+functionsafelyCallDestroyWithResource(
+current: Fiber,
+nearestMountedAncestor: Fiber|null,
+destroy: mixed=>void,
+resource: mixed,
+){
+constdestroy_=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,

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);
 
 constcallCreate={
-'react-stack-bottom-frame': function(effect: Effect): (()=>void)|void{
-const create =effect.create;
-constinst=effect.inst;
-constdestroy=create();
-inst.destroy=destroy;
-returndestroy;
+'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,
+);
+}
+}
+constcreate=effect.create;
+constinst=effect.inst;
+// $FlowFixMe[not-a-function] (@poteto)
+constdestroy=create();
+// $FlowFixMe[incompatible-type] (@poteto)
+inst.destroy=destroy;
+returndestroy;
+}else{
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=effect.inst;
+constdestroy=create();
+inst.destroy=destroy;
+returndestroy;
+}
+switch(effect.resourceKind){
+caseResourceEffectIdentityKind: {
+returneffect.create();
+}
+caseResourceEffectUpdateKind: {
+if(typeofeffect.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 {
 LayoutasHookLayout,
 InsertionasHookInsertion,
 PassiveasHookPassive,
+HasEffectasHookHasEffect,
 }from'./ReactHookEffectTags';
 import{didWarnAboutReassigningProps}from'./ReactFiberBeginWork';
 import{
@@ -70,6 +72,10 @@ import {
 }from'./ReactFiberCallUserSpace';
 
 import{runWithFiberInDEV}from'./ReactCurrentFiber';
+import{
+ResourceEffectIdentityKind,
+ResourceEffectUpdateKind,
+}from'./ReactFiberHooks';
 
 functionshouldProfile(current: Fiber): boolean{
 return(
@@ -146,19 +152,90 @@ export function commitHookEffectListMount(
 
 // Mount
 letdestroy;
+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&&
+typeofeffect.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{
-constcreate=effect.create;
-constinst=effect.inst;
-destroy=create();
-inst.destroy=destroy;
+if(enableUseResourceEffectHook){
+if(effect.resourceKind==null){
+constcreate=effect.create;
+constinst=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,
+);
+}
+}
+constcreate=effect.create;
+constinst=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';
 }elseif((effect.tag&HookInsertion)!==NoFlags){
 hookName='useInsertionEffect';
+}elseif(
+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(
 constinst=effect.inst;
 constdestroy=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(
 }
 }
 
+functionsafelyCallDestroyWithResource(
+current: Fiber,
+nearestMountedAncestor: Fiber|null,
+destroy: mixed=>void,
+resource: mixed,
+){
+constdestroy_=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,