From bfdbbd27d0986d669a08feeb639bf2bf4f5ddfc0 Mon Sep 17 00:00:00 2001 From: lauren Date: Tue, 5 Nov 2024 14:45:35 -0500 Subject: [PATCH] [crud] Basic implementation wip: - [ ] more tests - [ ] error handling - [ ] flow shenanigans --- .../src/ReactFiberCallUserSpace.js | 22 +- .../src/ReactFiberCommitEffects.js | 46 ++- .../react-reconciler/src/ReactFiberHooks.js | 372 +++++++++++++++++- .../src/ReactInternalTypes.js | 8 + .../ReactHooksWithNoopRenderer-test.js | 167 ++++++++ packages/react/index.development.js | 1 + .../react/index.experimental.development.js | 1 + packages/react/index.experimental.js | 1 + packages/react/index.fb.js | 1 + packages/react/index.js | 1 + packages/react/src/ReactClient.js | 2 + packages/react/src/ReactHooks.js | 18 + packages/shared/ReactFeatureFlags.js | 5 + .../forks/ReactFeatureFlags.native-fb.js | 1 + .../forks/ReactFeatureFlags.native-oss.js | 1 + .../forks/ReactFeatureFlags.test-renderer.js | 2 + ...actFeatureFlags.test-renderer.native-fb.js | 1 + .../ReactFeatureFlags.test-renderer.www.js | 2 + .../shared/forks/ReactFeatureFlags.www.js | 2 + 19 files changed, 630 insertions(+), 24 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberCallUserSpace.js b/packages/react-reconciler/src/ReactFiberCallUserSpace.js index ada092438a..ec9585bd6f 100644 --- 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,22 @@ 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; + } else if (typeof effect.destroy === 'function') { + const inst = effect.inst; + const _destroy = effect.destroy; + const destroy = () => { + _destroy(effect.resource); + effect.resource = null; + }; + inst.destroy = destroy; + return destroy; + } }, }; diff --git a/packages/react-reconciler/src/ReactFiberCommitEffects.js b/packages/react-reconciler/src/ReactFiberCommitEffects.js index 4d10c9ee6f..0a6b8bf34a 100644 --- a/packages/react-reconciler/src/ReactFiberCommitEffects.js +++ b/packages/react-reconciler/src/ReactFiberCommitEffects.js @@ -71,6 +71,7 @@ import { } from './ReactFiberCallUserSpace'; import {runWithFiberInDEV} from './ReactCurrentFiber'; +import {ResourceEffectKind} from './ReactFiberHooks'; function shouldProfile(current: Fiber): boolean { return ( @@ -151,15 +152,37 @@ export function commitHookEffectListMount( if ((flags & HookInsertion) !== NoHookEffect) { setIsRunningInsertionEffect(true); } - destroy = runWithFiberInDEV(finishedWork, callCreateInDEV, effect); + if (effect.kind === ResourceEffectKind) { + if (typeof effect.create === 'function') { + effect.resource = effect.create(); + } else if (typeof effect.update === 'function') { + // TODO: what about multiple updates? + effect.update(effect.resource); + } + } 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 (effect.kind === ResourceEffectKind) { + if (typeof effect.create === 'function') { + effect.resource = effect.create(); + } else if (typeof effect.update === 'function') { + // TODO: what about multiple updates? + effect.update(effect.resource); + } + } else { + const create = effect.create; + const inst = effect.inst; + destroy = create(); + inst.destroy = destroy; + } } if (enableSchedulingProfiler) { @@ -243,6 +266,19 @@ export function commitHookEffectListUnmount( let effect = firstEffect; do { if ((effect.tag & flags) === flags) { + if (effect.kind === ResourceEffectKind) { + if ( + effect.resource != null && + typeof effect.destroy === 'function' + ) { + effect.inst.destroy = function () { + // $FlowFixMe trust me bro + effect.destroy(effect.resource); + effect.resource = null; + }; + } + } + // Unmount const inst = effect.inst; const destroy = inst.destroy; diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js index 01f3b400ad..d3ade42c92 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.js +++ b/packages/react-reconciler/src/ReactFiberHooks.js @@ -48,6 +48,7 @@ import { disableLegacyMode, enableNoCloningMemoCache, enableContextProfiling, + enableUseResourceEffectHook, } from 'shared/ReactFeatureFlags'; import { REACT_CONTEXT_TYPE, @@ -218,12 +219,33 @@ type EffectInstance = { destroy: void | (() => void), }; -export type Effect = { +export const SimpleEffectKind: 0 = 0; +export const ResourceEffectKind: 1 = 1; +export type EffectKind = typeof SimpleEffectKind | typeof ResourceEffectKind; +export type Effect = SimpleEffect | ResourceEffect; +export type SimpleEffect = { + kind: typeof SimpleEffectKind, tag: HookFlags, - create: () => (() => void) | void, inst: EffectInstance, - deps: Array | null, + create: () => (() => void) | void, + createDeps: Array | null, + update: void | null, + updateDeps: void | null, + destroy: void | null, next: Effect, + resource: mixed, +}; +export type ResourceEffect = { + kind: typeof ResourceEffectKind, + tag: HookFlags, + create: () => {}, + inst: EffectInstance, + createDeps: Array | void | null, + update: ((resource: mixed) => void) | void, + updateDeps: Array | void | null, + destroy: ((resource: mixed) => void) | void, + next: Effect, + resource: mixed, }; type StoreInstance = { @@ -1720,8 +1742,9 @@ function mountSyncExternalStore( fiber.flags |= PassiveEffect; pushEffect( HookHasEffect | HookPassive, - updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot), createEffectInstance(), + SimpleEffectKind, + updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot), null, ); @@ -1790,9 +1813,10 @@ function updateSyncExternalStore( fiber.flags |= PassiveEffect; pushEffect( HookHasEffect | HookPassive, - updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot), createEffectInstance(), - null, + SimpleEffectKind, + updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot), + undefined, ); // Unless we're rendering a blocking lane, schedule a consistency check. @@ -2450,8 +2474,9 @@ function updateActionStateImpl( currentlyRenderingFiber.flags |= PassiveEffect; pushEffect( HookHasEffect | HookPassive, - actionStateActionEffect.bind(null, actionQueue, action), createEffectInstance(), + SimpleEffectKind, + actionStateActionEffect.bind(null, actionQueue, action), null, ); } @@ -2510,15 +2535,26 @@ function rerenderActionState( function pushEffect( tag: HookFlags, - create: () => (() => void) | void, inst: EffectInstance, - deps: Array | null, + kind: EffectKind, + create: () => (() => void) | {} | void, + createDeps: Array | void | null, + update: (({}) => void) | void, + updateDeps: Array | void | null, + destroy: (({}) => void) | void, + resource: mixed, ): Effect { + // $FlowFixMe jordan help pls const effect: Effect = { + kind, tag, create, + createDeps, + update, + updateDeps, + destroy, inst, - deps, + resource, // Circular next: (null: any), }; @@ -2567,8 +2603,9 @@ function mountEffectImpl( currentlyRenderingFiber.flags |= fiberFlags; hook.memoizedState = pushEffect( HookHasEffect | hookFlags, - create, createEffectInstance(), + SimpleEffectKind, + create, nextDeps, ); } @@ -2589,9 +2626,16 @@ function updateEffectImpl( if (currentHook !== null) { if (nextDeps !== null) { const prevEffect: Effect = currentHook.memoizedState; - const prevDeps = prevEffect.deps; + const prevDeps = prevEffect.createDeps; + // $FlowFixMe lauren if (areHookInputsEqual(nextDeps, prevDeps)) { - hook.memoizedState = pushEffect(hookFlags, create, inst, nextDeps); + hook.memoizedState = pushEffect( + hookFlags, + inst, + SimpleEffectKind, + create, + nextDeps, + ); return; } } @@ -2601,8 +2645,9 @@ function updateEffectImpl( hook.memoizedState = pushEffect( HookHasEffect | hookFlags, - create, inst, + SimpleEffectKind, + create, nextDeps, ); } @@ -2639,6 +2684,148 @@ function updateEffect( updateEffectImpl(PassiveEffect, HookPassive, create, deps); } +function mountResourceEffect( + create: () => {} | void, + createDeps: Array | void | null, + update: (({}) => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, +) { + if ( + __DEV__ && + (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode && + (currentlyRenderingFiber.mode & NoStrictPassiveEffectsMode) === NoMode + ) { + mountResourceEffectImpl( + MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect, + HookPassive, + create, + createDeps, + update, + updateDeps, + destroy, + ); + } else { + mountResourceEffectImpl( + PassiveEffect | PassiveStaticEffect, + HookPassive, + create, + createDeps, + update, + updateDeps, + destroy, + ); + } +} + +function mountResourceEffectImpl( + fiberFlags: Flags, + hookFlags: HookFlags, + create: () => {} | void, + createDeps: Array | void | null, + update: (({}) => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, +) { + const hook = mountWorkInProgressHook(); + currentlyRenderingFiber.flags |= fiberFlags; + hook.memoizedState = pushEffect( + HookHasEffect | hookFlags, + createEffectInstance(), + ResourceEffectKind, + create, + createDeps, + update, + updateDeps, + destroy, + ); +} + +function updateResourceEffect( + create: () => {} | void, + createDeps: Array | void | null, + update: (({}) => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, +) { + updateResourceEffectImpl( + PassiveEffect, + HookPassive, + create, + createDeps, + update, + updateDeps, + destroy, + ); +} + +function updateResourceEffectImpl( + fiberFlags: Flags, + hookFlags: HookFlags, + create: () => {} | void, + createDeps: Array | void | null, + update: (({}) => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, +) { + const hook = updateWorkInProgressHook(); + const effect: Effect = hook.memoizedState; + const inst = effect.inst; + + const nextCreateDepsArray = createDeps != null ? createDeps : []; + const nextUpdateDeps = updateDeps !== undefined ? updateDeps : null; + let isCreateDepsSame: boolean; + if (currentHook !== null) { + const prevEffect: Effect = currentHook.memoizedState; + const prevCreateDepsArray = + prevEffect.createDeps != null ? prevEffect.createDeps : []; + isCreateDepsSame = areHookInputsEqual( + nextCreateDepsArray, + prevCreateDepsArray, + ); + + if (nextUpdateDeps !== null) { + const prevUpdateDeps = + prevEffect.updateDeps != null ? prevEffect.updateDeps : null; + if ( + isCreateDepsSame && + areHookInputsEqual(nextUpdateDeps, prevUpdateDeps) + ) { + hook.memoizedState = pushEffect( + hookFlags, + inst, + ResourceEffectKind, + create, + nextUpdateDeps, + update, + updateDeps, + destroy, + ); + hook.memoizedState.resource = prevEffect.resource; + return; + } + } + } + + currentlyRenderingFiber.flags |= fiberFlags; + + hook.memoizedState = pushEffect( + HookHasEffect | hookFlags, + inst, + ResourceEffectKind, + // $FlowFixMe lauren + isCreateDepsSame ? undefined : create, + nextCreateDepsArray, + update, + nextUpdateDeps, + isCreateDepsSame ? undefined : destroy, + ); + if (currentHook != null) { + const currentHookState: Effect = currentHook.memoizedState; + hook.memoizedState.resource = currentHookState.resource; + } +} + function useEffectEventImpl) => Return>( payload: EventFunctionPayload, ) { @@ -3789,6 +3976,9 @@ if (enableUseMemoCacheHook) { if (enableUseEffectEventHook) { (ContextOnlyDispatcher: Dispatcher).useEffectEvent = throwInvalidHookError; } +if (enableUseResourceEffectHook) { + (ContextOnlyDispatcher: Dispatcher).useResourceEffect = throwInvalidHookError; +} if (enableAsyncActions) { (ContextOnlyDispatcher: Dispatcher).useHostTransitionStatus = throwInvalidHookError; @@ -3832,6 +4022,9 @@ if (enableUseMemoCacheHook) { if (enableUseEffectEventHook) { (HooksDispatcherOnMount: Dispatcher).useEffectEvent = mountEvent; } +if (enableUseResourceEffectHook) { + (HooksDispatcherOnMount: Dispatcher).useResourceEffect = mountResourceEffect; +} if (enableAsyncActions) { (HooksDispatcherOnMount: Dispatcher).useHostTransitionStatus = useHostTransitionStatus; @@ -3875,6 +4068,10 @@ if (enableUseMemoCacheHook) { if (enableUseEffectEventHook) { (HooksDispatcherOnUpdate: Dispatcher).useEffectEvent = updateEvent; } +if (enableUseResourceEffectHook) { + (HooksDispatcherOnUpdate: Dispatcher).useResourceEffect = + updateResourceEffect; +} if (enableAsyncActions) { (HooksDispatcherOnUpdate: Dispatcher).useHostTransitionStatus = useHostTransitionStatus; @@ -3918,6 +4115,10 @@ if (enableUseMemoCacheHook) { if (enableUseEffectEventHook) { (HooksDispatcherOnRerender: Dispatcher).useEffectEvent = updateEvent; } +if (enableUseResourceEffectHook) { + (HooksDispatcherOnRerender: Dispatcher).useResourceEffect = + updateResourceEffect; +} if (enableAsyncActions) { (HooksDispatcherOnRerender: Dispatcher).useHostTransitionStatus = useHostTransitionStatus; @@ -4108,6 +4309,26 @@ if (__DEV__) { return mountEvent(callback); }; } + if (enableUseResourceEffectHook) { + (HooksDispatcherOnMountInDEV: Dispatcher).useResourceEffect = + function useResourceEffect( + create: () => {} | void, + createDeps: Array | void | null, + update: (() => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, + ): void { + currentHookNameInDev = 'useResourceEffect'; + mountHookTypesDev(); + return mountResourceEffect( + create, + createDeps, + update, + updateDeps, + destroy, + ); + }; + } if (enableAsyncActions) { (HooksDispatcherOnMountInDEV: Dispatcher).useHostTransitionStatus = useHostTransitionStatus; @@ -4300,6 +4521,26 @@ if (__DEV__) { return mountEvent(callback); }; } + if (enableUseResourceEffectHook) { + (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useResourceEffect = + function useResourceEffect( + create: () => {} | void, + createDeps: Array | void | null, + update: (() => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, + ): void { + currentHookNameInDev = 'useResourceEffect'; + updateHookTypesDev(); + return mountResourceEffect( + create, + createDeps, + update, + updateDeps, + destroy, + ); + }; + } if (enableAsyncActions) { (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useHostTransitionStatus = useHostTransitionStatus; @@ -4491,6 +4732,26 @@ if (__DEV__) { return updateEvent(callback); }; } + if (enableUseResourceEffectHook) { + (HooksDispatcherOnUpdateInDEV: Dispatcher).useResourceEffect = + function useResourceEffect( + create: () => {} | void, + createDeps: Array | void | null, + update: (() => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, + ) { + currentHookNameInDev = 'useResourceEffect'; + updateHookTypesDev(); + return updateResourceEffect( + create, + createDeps, + update, + updateDeps, + destroy, + ); + }; + } if (enableAsyncActions) { (HooksDispatcherOnUpdateInDEV: Dispatcher).useHostTransitionStatus = useHostTransitionStatus; @@ -4682,6 +4943,26 @@ if (__DEV__) { return updateEvent(callback); }; } + if (enableUseResourceEffectHook) { + (HooksDispatcherOnRerenderInDEV: Dispatcher).useResourceEffect = + function useResourceEffect( + create: () => {} | void, + createDeps: Array | void | null, + update: (() => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, + ) { + currentHookNameInDev = 'useResourceEffect'; + updateHookTypesDev(); + return updateResourceEffect( + create, + createDeps, + update, + updateDeps, + destroy, + ); + }; + } if (enableAsyncActions) { (HooksDispatcherOnRerenderInDEV: Dispatcher).useHostTransitionStatus = useHostTransitionStatus; @@ -4897,6 +5178,27 @@ if (__DEV__) { return mountEvent(callback); }; } + if (InvalidNestedHooksDispatcherOnMountInDEV) { + (HooksDispatcherOnRerenderInDEV: Dispatcher).useResourceEffect = + function useResourceEffect( + create: () => {} | void, + createDeps: Array | void | null, + update: (() => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, + ): void { + currentHookNameInDev = 'useResourceEffect'; + warnInvalidHookAccess(); + mountHookTypesDev(); + return mountResourceEffect( + create, + createDeps, + update, + updateDeps, + destroy, + ); + }; + } if (enableAsyncActions) { (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useHostTransitionStatus = useHostTransitionStatus; @@ -5115,6 +5417,27 @@ if (__DEV__) { return updateEvent(callback); }; } + if (enableUseResourceEffectHook) { + (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useResourceEffect = + function useResourceEffect( + create: () => {} | void, + createDeps: Array | void | null, + update: (() => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, + ) { + currentHookNameInDev = 'useResourceEffect'; + warnInvalidHookAccess(); + updateHookTypesDev(); + return updateResourceEffect( + create, + createDeps, + update, + updateDeps, + destroy, + ); + }; + } if (enableAsyncActions) { (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useHostTransitionStatus = useHostTransitionStatus; @@ -5333,6 +5656,27 @@ if (__DEV__) { return updateEvent(callback); }; } + if (enableUseResourceEffectHook) { + (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useResourceEffect = + function useResourceEffect( + create: () => {} | void, + createDeps: Array | void | null, + update: (() => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, + ) { + currentHookNameInDev = 'useResourceEffect'; + warnInvalidHookAccess(); + updateHookTypesDev(); + return updateResourceEffect( + create, + createDeps, + update, + updateDeps, + destroy, + ); + }; + } if (enableAsyncActions) { (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useHostTransitionStatus = useHostTransitionStatus; diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js index 1c98a9e9c7..00d10693bb 100644 --- a/packages/react-reconciler/src/ReactInternalTypes.js +++ b/packages/react-reconciler/src/ReactInternalTypes.js @@ -47,6 +47,7 @@ export type HookType = | 'useRef' | 'useEffect' | 'useEffectEvent' + | 'useResourceEffect' | 'useInsertionEffect' | 'useLayoutEffect' | 'useCallback' @@ -412,6 +413,13 @@ export type Dispatcher = { deps: Array | void | null, ): void, useEffectEvent?: ) => mixed>(callback: F) => F, + useResourceEffect?: ( + create: () => {} | void, + createDeps: Array | void | null, + update: (() => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, + ) => void, useInsertionEffect( create: () => (() => void) | void, deps: Array | void | null, diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js index bc87e47083..9db98dd329 100644 --- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js +++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js @@ -41,6 +41,7 @@ let waitFor; let waitForThrow; let waitForPaint; let assertLog; +let useResourceEffect; describe('ReactHooksWithNoopRenderer', () => { beforeEach(() => { @@ -66,6 +67,7 @@ describe('ReactHooksWithNoopRenderer', () => { useDeferredValue = React.useDeferredValue; Suspense = React.Suspense; Activity = React.unstable_Activity; + useResourceEffect = React.experimental_useResourceEffect; ContinuousEventPriority = require('react-reconciler/constants').ContinuousEventPriority; if (gate(flags => flags.enableSuspenseList)) { @@ -3252,6 +3254,171 @@ describe('ReactHooksWithNoopRenderer', () => { }); }); + // @gate enableUseResourceEffectHook + describe('useResourceEffect', () => { + class Resource { + id: string; + opts: mixed; + constructor(id, opts) { + this.id = id; + this.opts = opts; + Scheduler.log(`create(${this.id}, ${this.opts.username})`); + } + update(opts) { + this.opts = opts; + Scheduler.log(`update(${this.id}, ${this.opts.username})`); + } + destroy() { + Scheduler.log(`destroy(${this.id}, ${this.opts.username})`); + } + } + + // @gate enableUseResourceEffectHook + it('simple mount and update', async () => { + const root = ReactNoop.createRoot(); + + function App({id, username}) { + const opts = useMemo(() => { + return {username}; + }, [username]); + useResourceEffect( + () => new Resource(id, opts), + [id], + resource => resource.update(opts), + [opts], + resource => resource.destroy(), + ); + return null; + } + + await act(() => { + root.render(); + }); + assertLog(['create(1, Jack)']); + + await act(() => { + root.render(); + }); + assertLog(['update(1, Lauren)']); + + await act(() => { + root.render(); + }); + assertLog(['update(1, Jordan)']); + + await act(() => { + root.render(); + }); + assertLog(['destroy(1, Jordan)', 'create(2, Jack)']); + + await act(() => { + root.render(null); + }); + assertLog(['destroy(2, Jack)']); + }); + + // @gate enableUseResourceEffectHook + it('simple mount with no update', async () => { + const root = ReactNoop.createRoot(); + + function App({id, username}) { + const opts = useMemo(() => { + return {username}; + }, [username]); + useResourceEffect( + () => new Resource(id, opts), + [id], + resource => resource.update(opts), + [opts], + resource => resource.destroy(), + ); + return null; + } + + await act(() => { + root.render(); + }); + assertLog(['create(1, Jack)']); + + await act(() => { + root.render(null); + }); + assertLog(['destroy(1, Jack)']); + }); + + // @gate enableUseResourceEffectHook + it('calls update on every render if no deps are specified', async () => { + const root = ReactNoop.createRoot(); + + function App({id, username}) { + const opts = useMemo(() => { + return {username}; + }, [username]); + useResourceEffect( + () => new Resource(id, opts), + [id], + resource => resource.update(opts), + ); + return null; + } + + await act(() => { + root.render(); + }); + assertLog(['create(1, Jack)']); + + await act(() => { + root.render(); + }); + assertLog(['update(1, Jack)']); + + await act(() => { + root.render(); + }); + assertLog(['create(2, Jack)']); + + await act(() => { + root.render(); + }); + + assertLog(['update(2, Lauren)']); + }); + + // @gate enableUseResourceEffectHook + it('calls useResourceEffect methods only on mount/unmount', async () => { + const root = ReactNoop.createRoot(); + + function App({id, username}) { + const opts = useMemo(() => { + return {username}; + }, [username]); + useResourceEffect( + () => new Resource(id, opts), + [], + resource => resource.update(opts), + [], + resource => resource.destroy(), + ); + return null; + } + + await act(() => { + root.render(); + }); + assertLog(['create(1, Jack)']); + + await act(() => { + root.render(); + }); + assertLog([]); + + await act(() => { + root.render(null); + }); + assertLog(['destroy(1, Jack)']); + }); + }); + describe('useCallback', () => { it('memoizes callback by comparing inputs', async () => { class IncrementButton extends React.PureComponent { diff --git a/packages/react/index.development.js b/packages/react/index.development.js index 398e672404..8472789ba3 100644 --- a/packages/react/index.development.js +++ b/packages/react/index.development.js @@ -60,6 +60,7 @@ export { useDeferredValue, useEffect, experimental_useEffectEvent, + experimental_useResourceEffect, useImperativeHandle, useInsertionEffect, useLayoutEffect, diff --git a/packages/react/index.experimental.development.js b/packages/react/index.experimental.development.js index 676b9eea4d..d41774e1fe 100644 --- a/packages/react/index.experimental.development.js +++ b/packages/react/index.experimental.development.js @@ -41,6 +41,7 @@ export { useDeferredValue, useEffect, experimental_useEffectEvent, + experimental_useResourceEffect, useImperativeHandle, useInsertionEffect, useLayoutEffect, diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js index ae98e3b91f..b43d25ca41 100644 --- a/packages/react/index.experimental.js +++ b/packages/react/index.experimental.js @@ -41,6 +41,7 @@ export { useDeferredValue, useEffect, experimental_useEffectEvent, + experimental_useResourceEffect, useImperativeHandle, useInsertionEffect, useLayoutEffect, diff --git a/packages/react/index.fb.js b/packages/react/index.fb.js index 7999655f30..7892f31dd4 100644 --- a/packages/react/index.fb.js +++ b/packages/react/index.fb.js @@ -19,6 +19,7 @@ export { createElement, createRef, experimental_useEffectEvent, + experimental_useResourceEffect, forwardRef, Fragment, isValidElement, diff --git a/packages/react/index.js b/packages/react/index.js index 2edb0a2c1d..5d9593767e 100644 --- a/packages/react/index.js +++ b/packages/react/index.js @@ -61,6 +61,7 @@ export { useDeferredValue, useEffect, experimental_useEffectEvent, + experimental_useResourceEffect, useImperativeHandle, useInsertionEffect, useLayoutEffect, diff --git a/packages/react/src/ReactClient.js b/packages/react/src/ReactClient.js index ed064fe803..15f70bf70a 100644 --- a/packages/react/src/ReactClient.js +++ b/packages/react/src/ReactClient.js @@ -42,6 +42,7 @@ import { useContext, useEffect, useEffectEvent, + useResourceEffect, useImperativeHandle, useDebugValue, useInsertionEffect, @@ -89,6 +90,7 @@ export { useContext, useEffect, useEffectEvent as experimental_useEffectEvent, + useResourceEffect as experimental_useResourceEffect, useImperativeHandle, useDebugValue, useInsertionEffect, diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js index 956a2a96b4..5ed60e96b8 100644 --- a/packages/react/src/ReactHooks.js +++ b/packages/react/src/ReactHooks.js @@ -226,6 +226,24 @@ export function useEffectEvent) => mixed>( return dispatcher.useEffectEvent(callback); } +export function useResourceEffect( + create: () => {} | void, + createDeps: Array | void | null, + update: (() => void) | void, + updateDeps: Array | void | null, + destroy: (() => void) | void, +): void { + const dispatcher = resolveDispatcher(); + // $FlowFixMe[not-a-function] This is unstable, thus optional + return dispatcher.useResourceEffect( + create, + createDeps, + update, + updateDeps, + destroy, + ); +} + export function useOptimistic( passthrough: S, reducer: ?(S, A) => S, diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index a0722c3138..920f179735 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -161,6 +161,11 @@ export const transitionLaneExpirationMs = 5000; */ export const enableInfiniteRenderLoopDetection = false; +/** + * Experimental new hook for better managing resources in effects. + */ +export const enableUseResourceEffectHook = __EXPERIMENTAL__; + // ----------------------------------------------------------------------------- // Ready for next major. // diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index b4339c50a5..f238662b4c 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -94,6 +94,7 @@ export const retryLaneExpirationMs = 5000; export const syncLaneExpirationMs = 250; export const transitionLaneExpirationMs = 5000; export const useModernStrictMode = true; +export const enableUseResourceEffectHook = false; // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index ea670690a5..6e687ea097 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -86,6 +86,7 @@ export const syncLaneExpirationMs = 250; export const transitionLaneExpirationMs = 5000; export const useModernStrictMode = true; export const enableSiblingPrerendering = false; +export const enableUseResourceEffectHook = false; // Profiling Only export const enableProfilerTimer = __PROFILE__; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 2eb241af6c..ed8de8d651 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -84,6 +84,8 @@ export const renameElementSymbol = true; export const enableShallowPropDiffing = false; export const enableSiblingPrerendering = false; +export const enableUseResourceEffectHook = false; + // TODO: This must be in sync with the main ReactFeatureFlags file because // the Test Renderer's value must be the same as the one used by the // react package. diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js index 1d505aaf56..43d18db940 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js @@ -81,6 +81,7 @@ export const transitionLaneExpirationMs = 5000; export const useModernStrictMode = true; export const enableFabricCompleteRootInCommitPhase = false; export const enableSiblingPrerendering = false; +export const enableUseResourceEffectHook = false; // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 5c836b48fe..186c2a43e3 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -97,5 +97,7 @@ export const enableOwnerStacks = false; export const enableShallowPropDiffing = false; export const enableSiblingPrerendering = false; +export const enableUseResourceEffectHook = false; + // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index b86394ecf7..44d1bc9d87 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -125,5 +125,7 @@ export const disableLegacyMode: boolean = export const enableOwnerStacks = false; export const enableShallowPropDiffing = false; +export const enableUseResourceEffectHook = true; + // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType);