Commit 23e5edd

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

17 files changed

Lines changed: 309 additions & 139 deletions

‎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
constref=React.createRef();
65156514
functionApp(){
@@ -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
constlogs=[];
65466544
functionApp(){
@@ -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
functionApp(){
65786575
constonClick1=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
caseFunctionComponent:
501501
caseForwardRef:
502502
caseSimpleMemoComponent: {
503-
if(enableUseEffectEventHook){
504-
if((flags&Update)!==NoFlags){
505-
constupdateQueue: FunctionComponentUpdateQueue|null=
506-
(finishedWork.updateQueue: any);
507-
consteventPayloads=
508-
updateQueue!==null ? updateQueue.events : null;
509-
if(eventPayloads!==null){
510-
for(letii=0;ii<eventPayloads.length;ii++){
511-
const{ref, nextImpl}=eventPayloads[ii];
512-
ref.impl=nextImpl;
513-
}
503+
if(!enableEffectEventMutationPhase&&(flags&Update)!==NoFlags){
504+
constupdateQueue: FunctionComponentUpdateQueue|null=
505+
(finishedWork.updateQueue: any);
506+
consteventPayloads=updateQueue!==null ? updateQueue.events : null;
507+
if(eventPayloads!==null){
508+
for(letii=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+
constupdateQueue: FunctionComponentUpdateQueue|null=
2053+
(finishedWork.updateQueue: any);
2054+
consteventPayloads=
2055+
updateQueue!==null ? updateQueue.events : null;
2056+
if(eventPayloads!==null){
2057+
for(letii=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
exporttypeFlags=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
returnmountRefresh();
41784169
},
4170+
useEffectEvent<Args,Return,F: (...Array<Args>) =>Return>(
4171+
callback: F,
4172+
): F{
4173+
currentHookNameInDev='useEffectEvent';
4174+
mountHookTypesDev();
4175+
returnmountEvent(callback);
4176+
},
41794177
};
4180-
if(enableUseEffectEventHook){
4181-
(HooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent=
4182-
functionuseEffectEvent<Args,Return,F: (...Array<Args>)=>Return>(
4183-
callback: F,
4184-
): F{
4185-
currentHookNameInDev ='useEffectEvent';
4186-
mountHookTypesDev();
4187-
returnmountEvent(callback);
4188-
};
4189-
}
41904178

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

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

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

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

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

50765049
InvalidNestedHooksDispatcherOnRerenderInDEV={
50775050
readContext<T>(context: ReactContext<T>): T{
@@ -5252,16 +5225,13 @@ if (__DEV__) {
52525225
updateHookTypesDev();
52535226
returnupdateRefresh();
52545227
},
5228+
useEffectEvent<Args,Return,F: (...Array<Args>) =>Return>(
5229+
callback: F,
5230+
): F{
5231+
currentHookNameInDev='useEffectEvent';
5232+
warnInvalidHookAccess();
5233+
updateHookTypesDev();
5234+
returnupdateEvent(callback);
5235+
},
52555236
};
5256-
if(enableUseEffectEventHook){
5257-
(InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useEffectEvent=
5258-
functionuseEffectEvent<Args,Return,F: (...Array<Args>)=>Return>(
5259-
callback: F,
5260-
): F{
5261-
currentHookNameInDev ='useEffectEvent';
5262-
warnInvalidHookAccess();
5263-
updateHookTypesDev();
5264-
returnupdateEvent(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)
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Commit 23e5edd
Browse files
rickhanloniirickhanlonii
authored
[flags] clean up enableUseEffectEventHook (#35541)
This is landed everywhere
1 parent 3926e24 commit 23e5edd
17 files changed
Lines changed: 309 additions & 139 deletions
‎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
constref=React.createRef();
65156514
functionApp(){
@@ -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
constlogs=[];
65466544
functionApp(){
@@ -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
functionApp(){
65786575
constonClick1=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
caseFunctionComponent:
501501
caseForwardRef:
502502
caseSimpleMemoComponent: {
503-
if(enableUseEffectEventHook){
504-
if((flags&Update)!==NoFlags){
505-
constupdateQueue: FunctionComponentUpdateQueue|null=
506-
(finishedWork.updateQueue: any);
507-
consteventPayloads=
508-
updateQueue!==null ? updateQueue.events : null;
509-
if(eventPayloads!==null){
510-
for(letii=0;ii<eventPayloads.length;ii++){
511-
const{ref, nextImpl}=eventPayloads[ii];
512-
ref.impl=nextImpl;
513-
}
503+
if(!enableEffectEventMutationPhase&&(flags&Update)!==NoFlags){
504+
constupdateQueue: FunctionComponentUpdateQueue|null=
505+
(finishedWork.updateQueue: any);
506+
consteventPayloads=updateQueue!==null ? updateQueue.events : null;
507+
if(eventPayloads!==null){
508+
for(letii=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+
constupdateQueue: FunctionComponentUpdateQueue|null=
2053+
(finishedWork.updateQueue: any);
2054+
consteventPayloads=
2055+
updateQueue!==null ? updateQueue.events : null;
2056+
if(eventPayloads!==null){
2057+
for(letii=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
exporttypeFlags=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
returnmountRefresh();
41784169
},
4170+
 useEffectEvent<Args,Return,F: (...Array<Args>) =>Return>(
4171+
callback: F,
4172+
): F{
4173+
currentHookNameInDev='useEffectEvent';
4174+
mountHookTypesDev();
4175+
returnmountEvent(callback);
4176+
},
41794177
};
4180-
if(enableUseEffectEventHook){
4181-
(HooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent=
4182-
functionuseEffectEvent<Args,Return,F: (...Array<Args>)=>Return>(
4183-
callback: F,
4184-
): F{
4185-
 currentHookNameInDev ='useEffectEvent';
4186-
mountHookTypesDev();
4187-
returnmountEvent(callback);
4188-
};
4189-
}
41904178

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

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

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

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

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

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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit 23e5edd
Browse files
rickhanloniirickhanlonii
authored
[flags] clean up enableUseEffectEventHook (#35541)
This is landed everywhere
1 parent 3926e24 commit 23e5edd
17 files changed
Lines changed: 309 additions & 139 deletions
‎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
constref=React.createRef();
65156514
functionApp(){
@@ -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
constlogs=[];
65466544
functionApp(){
@@ -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
functionApp(){
65786575
constonClick1=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
caseFunctionComponent:
501501
caseForwardRef:
502502
caseSimpleMemoComponent: {
503-
if(enableUseEffectEventHook){
504-
if((flags&Update)!==NoFlags){
505-
constupdateQueue: FunctionComponentUpdateQueue|null=
506-
(finishedWork.updateQueue: any);
507-
consteventPayloads=
508-
updateQueue!==null ? updateQueue.events : null;
509-
if(eventPayloads!==null){
510-
for(letii=0;ii<eventPayloads.length;ii++){
511-
const{ref, nextImpl}=eventPayloads[ii];
512-
ref.impl=nextImpl;
513-
}
503+
if(!enableEffectEventMutationPhase&&(flags&Update)!==NoFlags){
504+
constupdateQueue: FunctionComponentUpdateQueue|null=
505+
(finishedWork.updateQueue: any);
506+
consteventPayloads=updateQueue!==null ? updateQueue.events : null;
507+
if(eventPayloads!==null){
508+
for(letii=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+
constupdateQueue: FunctionComponentUpdateQueue|null=
2053+
(finishedWork.updateQueue: any);
2054+
consteventPayloads=
2055+
updateQueue!==null ? updateQueue.events : null;
2056+
if(eventPayloads!==null){
2057+
for(letii=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
exporttypeFlags=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
returnmountRefresh();
41784169
},
4170+
 useEffectEvent<Args,Return,F: (...Array<Args>) =>Return>(
4171+
callback: F,
4172+
): F{
4173+
currentHookNameInDev='useEffectEvent';
4174+
mountHookTypesDev();
4175+
returnmountEvent(callback);
4176+
},
41794177
};
4180-
if(enableUseEffectEventHook){
4181-
(HooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent=
4182-
functionuseEffectEvent<Args,Return,F: (...Array<Args>)=>Return>(
4183-
callback: F,
4184-
): F{
4185-
 currentHookNameInDev ='useEffectEvent';
4186-
mountHookTypesDev();
4187-
returnmountEvent(callback);
4188-
};
4189-
}
41904178

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

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

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

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

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

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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit 23e5edd
Browse files
rickhanloniirickhanlonii
authored
[flags] clean up enableUseEffectEventHook (#35541)
This is landed everywhere
1 parent 3926e24 commit 23e5edd
17 files changed
Lines changed: 309 additions & 139 deletions
‎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
constref=React.createRef();
65156514
functionApp(){
@@ -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
constlogs=[];
65466544
functionApp(){
@@ -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
functionApp(){
65786575
constonClick1=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
caseFunctionComponent:
501501
caseForwardRef:
502502
caseSimpleMemoComponent: {
503-
if(enableUseEffectEventHook){
504-
if((flags&Update)!==NoFlags){
505-
constupdateQueue: FunctionComponentUpdateQueue|null=
506-
(finishedWork.updateQueue: any);
507-
consteventPayloads=
508-
updateQueue!==null ? updateQueue.events : null;
509-
if(eventPayloads!==null){
510-
for(letii=0;ii<eventPayloads.length;ii++){
511-
const{ref, nextImpl}=eventPayloads[ii];
512-
ref.impl=nextImpl;
513-
}
503+
if(!enableEffectEventMutationPhase&&(flags&Update)!==NoFlags){
504+
constupdateQueue: FunctionComponentUpdateQueue|null=
505+
(finishedWork.updateQueue: any);
506+
consteventPayloads=updateQueue!==null ? updateQueue.events : null;
507+
if(eventPayloads!==null){
508+
for(letii=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+
constupdateQueue: FunctionComponentUpdateQueue|null=
2053+
(finishedWork.updateQueue: any);
2054+
consteventPayloads=
2055+
updateQueue!==null ? updateQueue.events : null;
2056+
if(eventPayloads!==null){
2057+
for(letii=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
exporttypeFlags=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
returnmountRefresh();
41784169
},
4170+
 useEffectEvent<Args,Return,F: (...Array<Args>) =>Return>(
4171+
callback: F,
4172+
): F{
4173+
currentHookNameInDev='useEffectEvent';
4174+
mountHookTypesDev();
4175+
returnmountEvent(callback);
4176+
},
41794177
};
4180-
if(enableUseEffectEventHook){
4181-
(HooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent=
4182-
functionuseEffectEvent<Args,Return,F: (...Array<Args>)=>Return>(
4183-
callback: F,
4184-
): F{
4185-
 currentHookNameInDev ='useEffectEvent';
4186-
mountHookTypesDev();
4187-
returnmountEvent(callback);
4188-
};
4189-
}
41904178

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

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

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

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

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

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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Commit 23e5edd
Browse files
rickhanloniirickhanlonii
authored
[flags] clean up enableUseEffectEventHook (#35541)
This is landed everywhere
1 parent 3926e24 commit 23e5edd
17 files changed
Lines changed: 309 additions & 139 deletions
‎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
constref=React.createRef();
65156514
functionApp(){
@@ -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
constlogs=[];
65466544
functionApp(){
@@ -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
functionApp(){
65786575
constonClick1=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
caseFunctionComponent:
501501
caseForwardRef:
502502
caseSimpleMemoComponent: {
503-
if(enableUseEffectEventHook){
504-
if((flags&Update)!==NoFlags){
505-
constupdateQueue: FunctionComponentUpdateQueue|null=
506-
(finishedWork.updateQueue: any);
507-
consteventPayloads=
508-
updateQueue!==null ? updateQueue.events : null;
509-
if(eventPayloads!==null){
510-
for(letii=0;ii<eventPayloads.length;ii++){
511-
const{ref, nextImpl}=eventPayloads[ii];
512-
ref.impl=nextImpl;
513-
}
503+
if(!enableEffectEventMutationPhase&&(flags&Update)!==NoFlags){
504+
constupdateQueue: FunctionComponentUpdateQueue|null=
505+
(finishedWork.updateQueue: any);
506+
consteventPayloads=updateQueue!==null ? updateQueue.events : null;
507+
if(eventPayloads!==null){
508+
for(letii=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+
constupdateQueue: FunctionComponentUpdateQueue|null=
2053+
(finishedWork.updateQueue: any);
2054+
consteventPayloads=
2055+
updateQueue!==null ? updateQueue.events : null;
2056+
if(eventPayloads!==null){
2057+
for(letii=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
exporttypeFlags=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
returnmountRefresh();
41784169
},
4170+
 useEffectEvent<Args,Return,F: (...Array<Args>) =>Return>(
4171+
callback: F,
4172+
): F{
4173+
currentHookNameInDev='useEffectEvent';
4174+
mountHookTypesDev();
4175+
returnmountEvent(callback);
4176+
},
41794177
};
4180-
if(enableUseEffectEventHook){
4181-
(HooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent=
4182-
functionuseEffectEvent<Args,Return,F: (...Array<Args>)=>Return>(
4183-
callback: F,
4184-
): F{
4185-
 currentHookNameInDev ='useEffectEvent';
4186-
mountHookTypesDev();
4187-
returnmountEvent(callback);
4188-
};
4189-
}
41904178

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

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

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

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

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

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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit 23e5edd
Browse files
rickhanloniirickhanlonii
authored
[flags] clean up enableUseEffectEventHook (#35541)
This is landed everywhere
1 parent 3926e24 commit 23e5edd
17 files changed
Lines changed: 309 additions & 139 deletions
‎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
constref=React.createRef();
65156514
functionApp(){
@@ -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
constlogs=[];
65466544
functionApp(){
@@ -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
functionApp(){
65786575
constonClick1=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
caseFunctionComponent:
501501
caseForwardRef:
502502
caseSimpleMemoComponent: {
503-
if(enableUseEffectEventHook){
504-
if((flags&Update)!==NoFlags){
505-
constupdateQueue: FunctionComponentUpdateQueue|null=
506-
(finishedWork.updateQueue: any);
507-
consteventPayloads=
508-
updateQueue!==null ? updateQueue.events : null;
509-
if(eventPayloads!==null){
510-
for(letii=0;ii<eventPayloads.length;ii++){
511-
const{ref, nextImpl}=eventPayloads[ii];
512-
ref.impl=nextImpl;
513-
}
503+
if(!enableEffectEventMutationPhase&&(flags&Update)!==NoFlags){
504+
constupdateQueue: FunctionComponentUpdateQueue|null=
505+
(finishedWork.updateQueue: any);
506+
consteventPayloads=updateQueue!==null ? updateQueue.events : null;
507+
if(eventPayloads!==null){
508+
for(letii=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+
constupdateQueue: FunctionComponentUpdateQueue|null=
2053+
(finishedWork.updateQueue: any);
2054+
consteventPayloads=
2055+
updateQueue!==null ? updateQueue.events : null;
2056+
if(eventPayloads!==null){
2057+
for(letii=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
exporttypeFlags=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
returnmountRefresh();
41784169
},
4170+
 useEffectEvent<Args,Return,F: (...Array<Args>) =>Return>(
4171+
callback: F,
4172+
): F{
4173+
currentHookNameInDev='useEffectEvent';
4174+
mountHookTypesDev();
4175+
returnmountEvent(callback);
4176+
},
41794177
};
4180-
if(enableUseEffectEventHook){
4181-
(HooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent=
4182-
functionuseEffectEvent<Args,Return,F: (...Array<Args>)=>Return>(
4183-
callback: F,
4184-
): F{
4185-
 currentHookNameInDev ='useEffectEvent';
4186-
mountHookTypesDev();
4187-
returnmountEvent(callback);
4188-
};
4189-
}
41904178

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

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

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

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

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

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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit 23e5edd
Browse files
rickhanloniirickhanlonii
authored
[flags] clean up enableUseEffectEventHook (#35541)
This is landed everywhere
1 parent 3926e24 commit 23e5edd
17 files changed
Lines changed: 309 additions & 139 deletions
‎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
constref=React.createRef();
65156514
functionApp(){
@@ -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
constlogs=[];
65466544
functionApp(){
@@ -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
functionApp(){
65786575
constonClick1=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
caseFunctionComponent:
501501
caseForwardRef:
502502
caseSimpleMemoComponent: {
503-
if(enableUseEffectEventHook){
504-
if((flags&Update)!==NoFlags){
505-
constupdateQueue: FunctionComponentUpdateQueue|null=
506-
(finishedWork.updateQueue: any);
507-
consteventPayloads=
508-
updateQueue!==null ? updateQueue.events : null;
509-
if(eventPayloads!==null){
510-
for(letii=0;ii<eventPayloads.length;ii++){
511-
const{ref, nextImpl}=eventPayloads[ii];
512-
ref.impl=nextImpl;
513-
}
503+
if(!enableEffectEventMutationPhase&&(flags&Update)!==NoFlags){
504+
constupdateQueue: FunctionComponentUpdateQueue|null=
505+
(finishedWork.updateQueue: any);
506+
consteventPayloads=updateQueue!==null ? updateQueue.events : null;
507+
if(eventPayloads!==null){
508+
for(letii=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+
constupdateQueue: FunctionComponentUpdateQueue|null=
2053+
(finishedWork.updateQueue: any);
2054+
consteventPayloads=
2055+
updateQueue!==null ? updateQueue.events : null;
2056+
if(eventPayloads!==null){
2057+
for(letii=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
exporttypeFlags=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
returnmountRefresh();
41784169
},
4170+
 useEffectEvent<Args,Return,F: (...Array<Args>) =>Return>(
4171+
callback: F,
4172+
): F{
4173+
currentHookNameInDev='useEffectEvent';
4174+
mountHookTypesDev();
4175+
returnmountEvent(callback);
4176+
},
41794177
};
4180-
if(enableUseEffectEventHook){
4181-
(HooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent=
4182-
functionuseEffectEvent<Args,Return,F: (...Array<Args>)=>Return>(
4183-
callback: F,
4184-
): F{
4185-
 currentHookNameInDev ='useEffectEvent';
4186-
mountHookTypesDev();
4187-
returnmountEvent(callback);
4188-
};
4189-
}
41904178

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

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

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

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

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

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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Commit 23e5edd
Browse files
rickhanloniirickhanlonii
authored
[flags] clean up enableUseEffectEventHook (#35541)
This is landed everywhere
1 parent 3926e24 commit 23e5edd
17 files changed
Lines changed: 309 additions & 139 deletions
‎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
constref=React.createRef();
65156514
functionApp(){
@@ -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
constlogs=[];
65466544
functionApp(){
@@ -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
functionApp(){
65786575
constonClick1=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
caseFunctionComponent:
501501
caseForwardRef:
502502
caseSimpleMemoComponent: {
503-
if(enableUseEffectEventHook){
504-
if((flags&Update)!==NoFlags){
505-
constupdateQueue: FunctionComponentUpdateQueue|null=
506-
(finishedWork.updateQueue: any);
507-
consteventPayloads=
508-
updateQueue!==null ? updateQueue.events : null;
509-
if(eventPayloads!==null){
510-
for(letii=0;ii<eventPayloads.length;ii++){
511-
const{ref, nextImpl}=eventPayloads[ii];
512-
ref.impl=nextImpl;
513-
}
503+
if(!enableEffectEventMutationPhase&&(flags&Update)!==NoFlags){
504+
constupdateQueue: FunctionComponentUpdateQueue|null=
505+
(finishedWork.updateQueue: any);
506+
consteventPayloads=updateQueue!==null ? updateQueue.events : null;
507+
if(eventPayloads!==null){
508+
for(letii=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+
constupdateQueue: FunctionComponentUpdateQueue|null=
2053+
(finishedWork.updateQueue: any);
2054+
consteventPayloads=
2055+
updateQueue!==null ? updateQueue.events : null;
2056+
if(eventPayloads!==null){
2057+
for(letii=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
exporttypeFlags=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
returnmountRefresh();
41784169
},
4170+
 useEffectEvent<Args,Return,F: (...Array<Args>) =>Return>(
4171+
callback: F,
4172+
): F{
4173+
currentHookNameInDev='useEffectEvent';
4174+
mountHookTypesDev();
4175+
returnmountEvent(callback);
4176+
},
41794177
};
4180-
if(enableUseEffectEventHook){
4181-
(HooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent=
4182-
functionuseEffectEvent<Args,Return,F: (...Array<Args>)=>Return>(
4183-
callback: F,
4184-
): F{
4185-
 currentHookNameInDev ='useEffectEvent';
4186-
mountHookTypesDev();
4187-
returnmountEvent(callback);
4188-
};
4189-
}
41904178

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

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

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

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

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

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