Skip to content

Commit

Permalink
[crud] Basic implementation
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@poteto
poteto committed Nov 15, 2024
1 parent 8c20731 commit 1d42d2c
Show file tree
Hide file tree
Showing 9 changed files with 1,289 additions and 33 deletions.
39 changes: 33 additions & 6 deletions packages/react-reconciler/src/ReactFiberCallUserSpace.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ import type {CapturedValue} from './ReactCapturedValue';

import {isRendering, setIsRendering} from './ReactCurrentFiber';
import {captureCommitPhaseError} from './ReactFiberWorkLoop';
import {
ResourceEffectIdentityKind,
ResourceEffectUpdateKind,
} 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.
Expand Down Expand Up @@ -176,12 +180,35 @@ 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 (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,
);
}
}
}
},
};

Expand Down
161 changes: 154 additions & 7 deletions packages/react-reconciler/src/ReactFiberCommitEffects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
enableProfilerNestedUpdatePhase,
enableSchedulingProfiler,
enableScopeAPI,
enableUseResourceEffectHook,
} from 'shared/ReactFeatureFlags';
import {
ClassComponent,
Expand Down Expand Up @@ -49,6 +50,7 @@ import {
Layout as HookLayout,
Insertion as HookInsertion,
Passive as HookPassive,
HasEffect as HookHasEffect,
} from './ReactHookEffectTags';
import {didWarnAboutReassigningProps} from './ReactFiberBeginWork';
import {
Expand All @@ -70,6 +72,10 @@ import {
} from './ReactFiberCallUserSpace';

import {runWithFiberInDEV} from './ReactCurrentFiber';
import {
ResourceEffectIdentityKind,
ResourceEffectUpdateKind,
} from './ReactFiberHooks';

function shouldProfile(current: Fiber): boolean {
return (
Expand Down Expand Up @@ -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) {
Expand All @@ -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';
}
Expand All @@ -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(
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 1d42d2c

Please sign in to comment.