Skip to content

Commit 23e5edd

Browse files
rickhanloniirickhanlonii
authored
[flags] clean up enableUseEffectEventHook (facebook#35541)
This is landed everywhere
1 parent 3926e24 commit 23e5edd

17 files changed

+309
-139
lines changed

‎packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6509,7 +6509,6 @@ describe('ReactDOMFizzServer', () => {
65096509
});
65106510

65116511
describe('useEffectEvent', () => {
6512-
// @gate enableUseEffectEventHook
65136512
it('can server render a component with useEffectEvent', async () => {
65146513
const ref = React.createRef();
65156514
function App() {
@@ -6540,7 +6539,6 @@ describe('ReactDOMFizzServer', () => {
65406539
expect(getVisibleChildren(container)).toEqual(<button>1</button>);
65416540
});
65426541

6543-
// @gate enableUseEffectEventHook
65446542
it('throws if useEffectEvent is called during a server render', async () => {
65456543
const logs = [];
65466544
function App() {
@@ -6572,7 +6570,6 @@ describe('ReactDOMFizzServer', () => {
65726570
expect(reportedServerErrors).toEqual([caughtError]);
65736571
});
65746572

6575-
// @gate enableUseEffectEventHook
65766573
it('does not guarantee useEffectEvent return values during server rendering are distinct', async () => {
65776574
function App() {
65786575
const onClick1 = React.useEffectEvent(() => {});

‎packages/react-reconciler/src/ReactFiberCommitWork.js‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,14 @@ import type {ViewTransitionState} from './ReactFiberViewTransitionComponent';
4747
import {
4848
alwaysThrottleRetries,
4949
enableCreateEventHandleAPI,
50+
enableEffectEventMutationPhase,
5051
enableHiddenSubtreeInsertionEffectCleanup,
5152
enableProfilerTimer,
5253
enableProfilerCommitHooks,
5354
enableSuspenseCallback,
5455
enableScopeAPI,
5556
enableUpdaterTracking,
5657
enableTransitionTracing,
57-
enableUseEffectEventHook,
5858
enableLegacyHidden,
5959
disableLegacyMode,
6060
enableComponentPerformanceTrack,
@@ -500,17 +500,14 @@ function commitBeforeMutationEffectsOnFiber(
500500
case FunctionComponent:
501501
case ForwardRef:
502502
case SimpleMemoComponent: {
503-
if (enableUseEffectEventHook) {
504-
if ((flags & Update) !== NoFlags) {
505-
const updateQueue: FunctionComponentUpdateQueue | null =
506-
(finishedWork.updateQueue: any);
507-
const eventPayloads =
508-
updateQueue !== null ? updateQueue.events : null;
509-
if (eventPayloads !== null) {
510-
for (let ii = 0; ii < eventPayloads.length; ii++) {
511-
const {ref, nextImpl} = eventPayloads[ii];
512-
ref.impl = nextImpl;
513-
}
503+
if (!enableEffectEventMutationPhase && (flags & Update) !== NoFlags) {
504+
const updateQueue: FunctionComponentUpdateQueue | null =
505+
(finishedWork.updateQueue: any);
506+
const eventPayloads = updateQueue !== null ? updateQueue.events : null;
507+
if (eventPayloads !== null) {
508+
for (let ii = 0; ii < eventPayloads.length; ii++) {
509+
const {ref, nextImpl} = eventPayloads[ii];
510+
ref.impl = nextImpl;
514511
}
515512
}
516513
}
@@ -2050,6 +2047,19 @@ function commitMutationEffectsOnFiber(
20502047
commitReconciliationEffects(finishedWork, lanes);
20512048

20522049
if (flags & Update) {
2050+
// Mutate event effect callbacks before insertion effects.
2051+
if (enableEffectEventMutationPhase) {
2052+
const updateQueue: FunctionComponentUpdateQueue | null =
2053+
(finishedWork.updateQueue: any);
2054+
const eventPayloads =
2055+
updateQueue !== null ? updateQueue.events : null;
2056+
if (eventPayloads !== null) {
2057+
for (let ii = 0; ii < eventPayloads.length; ii++) {
2058+
const {ref, nextImpl} = eventPayloads[ii];
2059+
ref.impl = nextImpl;
2060+
}
2061+
}
2062+
}
20532063
commitHookEffectListUnmount(
20542064
HookInsertion | HookHasEffect,
20552065
finishedWork,

‎packages/react-reconciler/src/ReactFiberFlags.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
import {
1111
enableCreateEventHandleAPI,
12-
enableUseEffectEventHook,
12+
enableEffectEventMutationPhase,
1313
} from 'shared/ReactFeatureFlags';
1414

1515
export type Flags = number;
@@ -102,12 +102,11 @@ export const BeforeMutationMask: number =
102102
// TODO: Only need to visit Deletions during BeforeMutation phase if an
103103
// element is focused.
104104
Update | ChildDeletion | Visibility
105-
: enableUseEffectEventHook
106-
? // TODO: The useEffectEvent hook uses the snapshot phase for clean up but it
107-
// really should use the mutation phase for this or at least schedule an
108-
// explicit Snapshot phase flag for this.
109-
Update
110-
: 0);
105+
: // useEffectEvent uses the snapshot phase,
106+
// but we're moving it to the mutation phase.
107+
enableEffectEventMutationPhase
108+
? 0
109+
: Update);
111110

112111
// For View Transition support we use the snapshot phase to scan the tree for potentially
113112
// affected ViewTransition components.

‎packages/react-reconciler/src/ReactFiberHooks.js‎

Lines changed: 56 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
3838
import {
3939
enableSchedulingProfiler,
4040
enableTransitionTracing,
41-
enableUseEffectEventHook,
4241
enableLegacyCache,
4342
disableLegacyMode,
4443
enableNoCloningMemoCache,
@@ -3893,10 +3892,8 @@ export const ContextOnlyDispatcher: Dispatcher = {
38933892
useOptimistic: throwInvalidHookError,
38943893
useMemoCache: throwInvalidHookError,
38953894
useCacheRefresh: throwInvalidHookError,
3895+
useEffectEvent: throwInvalidHookError,
38963896
};
3897-
if (enableUseEffectEventHook) {
3898-
(ContextOnlyDispatcher: Dispatcher).useEffectEvent = throwInvalidHookError;
3899-
}
39003897

39013898
const HooksDispatcherOnMount: Dispatcher = {
39023899
readContext,
@@ -3923,10 +3920,8 @@ const HooksDispatcherOnMount: Dispatcher = {
39233920
useOptimistic: mountOptimistic,
39243921
useMemoCache,
39253922
useCacheRefresh: mountRefresh,
3923+
useEffectEvent: mountEvent,
39263924
};
3927-
if (enableUseEffectEventHook) {
3928-
(HooksDispatcherOnMount: Dispatcher).useEffectEvent = mountEvent;
3929-
}
39303925

39313926
const HooksDispatcherOnUpdate: Dispatcher = {
39323927
readContext,
@@ -3953,10 +3948,8 @@ const HooksDispatcherOnUpdate: Dispatcher = {
39533948
useOptimistic: updateOptimistic,
39543949
useMemoCache,
39553950
useCacheRefresh: updateRefresh,
3951+
useEffectEvent: updateEvent,
39563952
};
3957-
if (enableUseEffectEventHook) {
3958-
(HooksDispatcherOnUpdate: Dispatcher).useEffectEvent = updateEvent;
3959-
}
39603953

39613954
const HooksDispatcherOnRerender: Dispatcher = {
39623955
readContext,
@@ -3983,10 +3976,8 @@ const HooksDispatcherOnRerender: Dispatcher = {
39833976
useOptimistic: rerenderOptimistic,
39843977
useMemoCache,
39853978
useCacheRefresh: updateRefresh,
3979+
useEffectEvent: updateEvent,
39863980
};
3987-
if (enableUseEffectEventHook) {
3988-
(HooksDispatcherOnRerender: Dispatcher).useEffectEvent = updateEvent;
3989-
}
39903981

39913982
let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
39923983
let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
@@ -4176,17 +4167,14 @@ if (__DEV__) {
41764167
mountHookTypesDev();
41774168
return mountRefresh();
41784169
},
4170+
useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
4171+
callback: F,
4172+
): F {
4173+
currentHookNameInDev = 'useEffectEvent';
4174+
mountHookTypesDev();
4175+
return mountEvent(callback);
4176+
},
41794177
};
4180-
if (enableUseEffectEventHook) {
4181-
(HooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent =
4182-
function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
4183-
callback: F,
4184-
): F {
4185-
currentHookNameInDev = 'useEffectEvent';
4186-
mountHookTypesDev();
4187-
return mountEvent(callback);
4188-
};
4189-
}
41904178

41914179
HooksDispatcherOnMountWithHookTypesInDEV = {
41924180
readContext<T>(context: ReactContext<T>): T {
@@ -4343,17 +4331,14 @@ if (__DEV__) {
43434331
updateHookTypesDev();
43444332
return mountRefresh();
43454333
},
4334+
useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
4335+
callback: F,
4336+
): F {
4337+
currentHookNameInDev = 'useEffectEvent';
4338+
updateHookTypesDev();
4339+
return mountEvent(callback);
4340+
},
43464341
};
4347-
if (enableUseEffectEventHook) {
4348-
(HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useEffectEvent =
4349-
function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
4350-
callback: F,
4351-
): F {
4352-
currentHookNameInDev = 'useEffectEvent';
4353-
updateHookTypesDev();
4354-
return mountEvent(callback);
4355-
};
4356-
}
43574342

43584343
HooksDispatcherOnUpdateInDEV = {
43594344
readContext<T>(context: ReactContext<T>): T {
@@ -4510,17 +4495,14 @@ if (__DEV__) {
45104495
updateHookTypesDev();
45114496
return updateRefresh();
45124497
},
4498+
useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
4499+
callback: F,
4500+
): F {
4501+
currentHookNameInDev = 'useEffectEvent';
4502+
updateHookTypesDev();
4503+
return updateEvent(callback);
4504+
},
45134505
};
4514-
if (enableUseEffectEventHook) {
4515-
(HooksDispatcherOnUpdateInDEV: Dispatcher).useEffectEvent =
4516-
function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
4517-
callback: F,
4518-
): F {
4519-
currentHookNameInDev = 'useEffectEvent';
4520-
updateHookTypesDev();
4521-
return updateEvent(callback);
4522-
};
4523-
}
45244506

45254507
HooksDispatcherOnRerenderInDEV = {
45264508
readContext<T>(context: ReactContext<T>): T {
@@ -4677,17 +4659,14 @@ if (__DEV__) {
46774659
updateHookTypesDev();
46784660
return updateRefresh();
46794661
},
4662+
useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
4663+
callback: F,
4664+
): F {
4665+
currentHookNameInDev = 'useEffectEvent';
4666+
updateHookTypesDev();
4667+
return updateEvent(callback);
4668+
},
46804669
};
4681-
if (enableUseEffectEventHook) {
4682-
(HooksDispatcherOnRerenderInDEV: Dispatcher).useEffectEvent =
4683-
function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
4684-
callback: F,
4685-
): F {
4686-
currentHookNameInDev = 'useEffectEvent';
4687-
updateHookTypesDev();
4688-
return updateEvent(callback);
4689-
};
4690-
}
46914670

46924671
InvalidNestedHooksDispatcherOnMountInDEV = {
46934672
readContext<T>(context: ReactContext<T>): T {
@@ -4868,18 +4847,15 @@ if (__DEV__) {
48684847
mountHookTypesDev();
48694848
return mountRefresh();
48704849
},
4850+
useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
4851+
callback: F,
4852+
): F {
4853+
currentHookNameInDev = 'useEffectEvent';
4854+
warnInvalidHookAccess();
4855+
mountHookTypesDev();
4856+
return mountEvent(callback);
4857+
},
48714858
};
4872-
if (enableUseEffectEventHook) {
4873-
(InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent =
4874-
function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
4875-
callback: F,
4876-
): F {
4877-
currentHookNameInDev = 'useEffectEvent';
4878-
warnInvalidHookAccess();
4879-
mountHookTypesDev();
4880-
return mountEvent(callback);
4881-
};
4882-
}
48834859

48844860
InvalidNestedHooksDispatcherOnUpdateInDEV = {
48854861
readContext<T>(context: ReactContext<T>): T {
@@ -5060,18 +5036,15 @@ if (__DEV__) {
50605036
updateHookTypesDev();
50615037
return updateRefresh();
50625038
},
5039+
useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
5040+
callback: F,
5041+
): F {
5042+
currentHookNameInDev = 'useEffectEvent';
5043+
warnInvalidHookAccess();
5044+
updateHookTypesDev();
5045+
return updateEvent(callback);
5046+
},
50635047
};
5064-
if (enableUseEffectEventHook) {
5065-
(InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useEffectEvent =
5066-
function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
5067-
callback: F,
5068-
): F {
5069-
currentHookNameInDev = 'useEffectEvent';
5070-
warnInvalidHookAccess();
5071-
updateHookTypesDev();
5072-
return updateEvent(callback);
5073-
};
5074-
}
50755048

50765049
InvalidNestedHooksDispatcherOnRerenderInDEV = {
50775050
readContext<T>(context: ReactContext<T>): T {
@@ -5252,16 +5225,13 @@ if (__DEV__) {
52525225
updateHookTypesDev();
52535226
return updateRefresh();
52545227
},
5228+
useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
5229+
callback: F,
5230+
): F {
5231+
currentHookNameInDev = 'useEffectEvent';
5232+
warnInvalidHookAccess();
5233+
updateHookTypesDev();
5234+
return updateEvent(callback);
5235+
},
52555236
};
5256-
if (enableUseEffectEventHook) {
5257-
(InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useEffectEvent =
5258-
function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
5259-
callback: F,
5260-
): F {
5261-
currentHookNameInDev = 'useEffectEvent';
5262-
warnInvalidHookAccess();
5263-
updateHookTypesDev();
5264-
return updateEvent(callback);
5265-
};
5266-
}
52675237
}

‎packages/react-reconciler/src/ReactInternalTypes.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -409,8 +409,7 @@ export type Dispatcher = {
409409
create: () => (() => void) | void,
410410
deps: Array<mixed> | void | null,
411411
): void,
412-
// TODO: Non-nullable once `enableUseEffectEventHook` is on everywhere.
413-
useEffectEvent?: <Args, F: (...Array<Args>) => mixed>(callback: F) => F,
412+
useEffectEvent: <Args, F: (...Array<Args>) => mixed>(callback: F) => F,
414413
useInsertionEffect(
415414
create: () => (() => void) | void,
416415
deps: Array<mixed> | void | null,

0 commit comments

Comments
 (0)