Rename experimental useEvent to useEffectEvent (#25881)
We originally had grand plans for using this Event concept for more but now it's only meant to be used in combination with effects. It's an Event in the FRP terms, that is triggered from an Effect. Technically it can also be from another function that itself is triggered from an existing side-effect but that's kind of an advanced case. The canonical case is an effect that triggers an event: ```js const onHappened = useEffectEvent(() => ...); useEffect(() => { onHappened(); }, []); ```
Sebastian Markbåge committed
Dec 14, 2022 at 15:08 UTC
84a0a171ea0ecd25e287bd3d3dd30e932beb4677
26 files changed
+176
-171
packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+4
-4
@@ -7636,7 +7636,7 @@ if (__EXPERIMENTAL__) {
7636
{
7637
code: normalizeIndent`
7638
function MyComponent({ theme }) {
7639
- const onStuff = useEvent(() => {
7639
+ const onStuff = useEffectEvent(() => {
7640
showNotification(theme);
7641
});
7642
useEffect(() => {
@@ -7652,7 +7652,7 @@ if (__EXPERIMENTAL__) {
7652
{
7653
code: normalizeIndent`
7654
function MyComponent({ theme }) {
7655
- const onStuff = useEvent(() => {
7655
+ const onStuff = useEffectEvent(() => {
7656
showNotification(theme);
7657
});
7658
useEffect(() => {
@@ -7663,14 +7663,14 @@ if (__EXPERIMENTAL__) {
7663
errors: [
7664
{
7665
message:
7666
- 'Functions returned from `useEvent` must not be included in the dependency array. ' +
7666
+ 'Functions returned from `useEffectEvent` must not be included in the dependency array. ' +
7667
'Remove `onStuff` from the list.',
7668
suggestions: [
7669
{
7670
desc: 'Remove the dependency `onStuff`',
7671
output: normalizeIndent`
7672
function MyComponent({ theme }) {
7673
- const onStuff = useEvent(() => {
7673
+ const onStuff = useEffectEvent(() => {
7674
showNotification(theme);
7675
});
7676
useEffect(() => {
packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
+28
-28
@@ -1050,9 +1050,9 @@ if (__EXPERIMENTAL__) {
1050
...tests.valid,
1051
{
1052
code: normalizeIndent`
1053
- // Valid because functions created with useEvent can be called in a useEffect.
1053
+ // Valid because functions created with useEffectEvent can be called in a useEffect.
1054
function MyComponent({ theme }) {
1055
- const onClick = useEvent(() => {
1055
+ const onClick = useEffectEvent(() => {
1056
showNotification(theme);
1057
});
1058
useEffect(() => {
@@ -1063,9 +1063,9 @@ if (__EXPERIMENTAL__) {
1063
},
1064
{
1065
code: normalizeIndent`
1066
- // Valid because functions created with useEvent can be called in closures.
1066
+ // Valid because functions created with useEffectEvent can be called in closures.
1067
function MyComponent({ theme }) {
1068
- const onClick = useEvent(() => {
1068
+ const onClick = useEffectEvent(() => {
1069
showNotification(theme);
1070
});
1071
return <Child onClick={() => onClick()}></Child>;
@@ -1074,9 +1074,9 @@ if (__EXPERIMENTAL__) {
1074
},
1075
{
1076
code: normalizeIndent`
1077
- // Valid because functions created with useEvent can be called in closures.
1077
+ // Valid because functions created with useEffectEvent can be called in closures.
1078
function MyComponent({ theme }) {
1079
- const onClick = useEvent(() => {
1079
+ const onClick = useEffectEvent(() => {
1080
showNotification(theme);
1081
});
1082
const onClick2 = () => { onClick() };
@@ -1090,13 +1090,13 @@ if (__EXPERIMENTAL__) {
1090
},
1091
{
1092
code: normalizeIndent`
1093
- // Valid because functions created with useEvent can be passed by reference in useEffect
1094
- // and useEvent.
1093
+ // Valid because functions created with useEffectEvent can be passed by reference in useEffect
1094
+ // and useEffectEvent.
1095
function MyComponent({ theme }) {
1096
- const onClick = useEvent(() => {
1096
+ const onClick = useEffectEvent(() => {
1097
showNotification(theme);
1098
});
1099
- const onClick2 = useEvent(() => {
1099
+ const onClick2 = useEffectEvent(() => {
1100
debounce(onClick);
1101
});
1102
useEffect(() => {
@@ -1110,7 +1110,7 @@ if (__EXPERIMENTAL__) {
1110
{
1111
code: normalizeIndent`
1112
const MyComponent = ({theme}) => {
1113
- const onClick = useEvent(() => {
1113
+ const onClick = useEffectEvent(() => {
1114
showNotification(theme);
1115
});
1116
return <Child onClick={() => onClick()}></Child>;
@@ -1121,10 +1121,10 @@ if (__EXPERIMENTAL__) {
1121
code: normalizeIndent`
1122
function MyComponent({ theme }) {
1123
const notificationService = useNotifications();
1124
- const showNotification = useEvent((text) => {
1124
+ const showNotification = useEffectEvent((text) => {
1125
notificationService.notify(theme, text);
1126
});
1127
- const onClick = useEvent((text) => {
1127
+ const onClick = useEffectEvent((text) => {
1128
showNotification(text);
1129
});
1130
return <Child onClick={(text) => onClick(text)} />
@@ -1137,7 +1137,7 @@ if (__EXPERIMENTAL__) {
1137
useEffect(() => {
1138
onClick();
1139
});
1140
- const onClick = useEvent(() => {
1140
+ const onClick = useEffectEvent(() => {
1141
showNotification(theme);
1142
});
1143
}
@@ -1188,64 +1188,64 @@ if (__EXPERIMENTAL__) {
1188
{
1189
code: normalizeIndent`
1190
function MyComponent({ theme }) {
1191
- const onClick = useEvent(() => {
1191
+ const onClick = useEffectEvent(() => {
1192
showNotification(theme);
1193
});
1194
return <Child onClick={onClick}></Child>;
1195
}
1196
`,
1197
- errors: [useEventError('onClick')],
1197
+ errors: [useEffectEventError('onClick')],
1198
},
1199
{
1200
code: normalizeIndent`
1201
// This should error even though it shares an identifier name with the below
1202
function MyComponent({theme}) {
1203
- const onClick = useEvent(() => {
1203
+ const onClick = useEffectEvent(() => {
1204
showNotification(theme)
1205
});
1206
return <Child onClick={onClick} />
1207
}
1208
1209
- // The useEvent function shares an identifier name with the above
1209
+ // The useEffectEvent function shares an identifier name with the above
1210
function MyOtherComponent({theme}) {
1211
- const onClick = useEvent(() => {
1211
+ const onClick = useEffectEvent(() => {
1212
showNotification(theme)
1213
});
1214
return <Child onClick={() => onClick()} />
1215
}
1216
`,
1217
- errors: [{...useEventError('onClick'), line: 7}],
1217
+ errors: [{...useEffectEventError('onClick'), line: 7}],
1218
},
1219
{
1220
code: normalizeIndent`
1221
const MyComponent = ({ theme }) => {
1222
- const onClick = useEvent(() => {
1222
+ const onClick = useEffectEvent(() => {
1223
showNotification(theme);
1224
});
1225
return <Child onClick={onClick}></Child>;
1226
}
1227
`,
1228
- errors: [useEventError('onClick')],
1228
+ errors: [useEffectEventError('onClick')],
1229
},
1230
{
1231
code: normalizeIndent`
1232
// Invalid because onClick is being aliased to foo but not invoked
1233
function MyComponent({ theme }) {
1234
- const onClick = useEvent(() => {
1234
+ const onClick = useEffectEvent(() => {
1235
showNotification(theme);
1236
});
1237
let foo = onClick;
1238
return <Bar onClick={foo} />
1239
}
1240
`,
1241
- errors: [{...useEventError('onClick'), line: 7}],
1241
+ errors: [{...useEffectEventError('onClick'), line: 7}],
1242
},
1243
{
1244
code: normalizeIndent`
1245
// Should error because it's being passed down to JSX, although it's been referenced once
1246
// in an effect
1247
function MyComponent({ theme }) {
1248
- const onClick = useEvent(() => {
1248
+ const onClick = useEffectEvent(() => {
1249
showNotification(them);
1250
});
1251
useEffect(() => {
@@ -1254,7 +1254,7 @@ if (__EXPERIMENTAL__) {
1254
return <Child onClick={onClick} />
1255
}
1256
`,
1257
- errors: [useEventError('onClick')],
1257
+ errors: [useEffectEventError('onClick')],
1258
},
1259
{
1260
code: normalizeIndent`
@@ -1360,10 +1360,10 @@ function classError(hook) {
1360
};
1361
}
1362
1363
-function useEventError(fn) {
1363
+function useEffectEventError(fn) {
1364
return {
1365
message:
1366
- `\`${fn}\` is a function created with React Hook "useEvent", and can only be called from ` +
1366
+ `\`${fn}\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
1367
'the same component. They cannot be assigned to variables or passed down.',
1368
};
1369
}
packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+12
-9
@@ -74,7 +74,7 @@ export default {
74
const stateVariables = new WeakSet();
75
const stableKnownValueCache = new WeakMap();
76
const functionWithoutCapturedValueCache = new WeakMap();
77
- const useEventVariables = new WeakSet();
77
+ const useEffectEventVariables = new WeakSet();
78
function memoizeWithWeakMap(fn, map) {
79
return function(arg) {
80
if (map.has(arg)) {
@@ -158,7 +158,7 @@ export default {
158
// ^^^ true for this reference
159
// const ref = useRef()
160
// ^^^ true for this reference
161
- // const onStuff = useEvent(() => {})
161
+ // const onStuff = useEffectEvent(() => {})
162
// ^^^ true for this reference
163
// False for everything else.
164
function isStableKnownHookValue(resolved) {
@@ -226,13 +226,16 @@ export default {
226
if (name === 'useRef' && id.type === 'Identifier') {
227
// useRef() return value is stable.
228
return true;
229
- } else if (isUseEventIdentifier(callee) && id.type === 'Identifier') {
229
+ } else if (
230
+ isUseEffectEventIdentifier(callee) &&
231
+ id.type === 'Identifier'
232
+ ) {
233
for (const ref of resolved.references) {
234
if (ref !== id) {
232
- useEventVariables.add(ref.identifier);
235
+ useEffectEventVariables.add(ref.identifier);
236
}
237
}
235
- // useEvent() return value is always unstable.
238
+ // useEffectEvent() return value is always unstable.
239
return true;
240
} else if (name === 'useState' || name === 'useReducer') {
241
// Only consider second value in initializing tuple stable.
@@ -645,11 +648,11 @@ export default {
648
});
649
return;
650
}
648
- if (useEventVariables.has(declaredDependencyNode)) {
651
+ if (useEffectEventVariables.has(declaredDependencyNode)) {
652
reportProblem({
653
node: declaredDependencyNode,
654
message:
652
- 'Functions returned from `useEvent` must not be included in the dependency array. ' +
655
+ 'Functions returned from `useEffectEvent` must not be included in the dependency array. ' +
656
`Remove \`${context.getSource(
657
declaredDependencyNode,
658
)}\` from the list.`,
@@ -1851,9 +1854,9 @@ function isAncestorNodeOf(a, b) {
1854
return a.range[0] <= b.range[0] && a.range[1] >= b.range[1];
1855
}
1856
1854
-function isUseEventIdentifier(node) {
1857
+function isUseEffectEventIdentifier(node) {
1858
if (__EXPERIMENTAL__) {
1856
- return node.type === 'Identifier' && node.name === 'useEvent';
1859
+ return node.type === 'Identifier' && node.name === 'useEffectEvent';
1860
}
1861
return false;
1862
}
packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
+18
-18
@@ -103,9 +103,9 @@ function isInsideComponentOrHook(node) {
103
return false;
104
}
105
106
-function isUseEventIdentifier(node) {
106
+function isUseEffectEventIdentifier(node) {
107
if (__EXPERIMENTAL__) {
108
- return node.type === 'Identifier' && node.name === 'useEvent';
108
+ return node.type === 'Identifier' && node.name === 'useEffectEvent';
109
}
110
return false;
111
}
@@ -130,12 +130,12 @@ export default {
130
let lastEffect = null;
131
const codePathReactHooksMapStack = [];
132
const codePathSegmentStack = [];
133
- const useEventFunctions = new WeakSet();
133
+ const useEffectEventFunctions = new WeakSet();
134
135
- // For a given scope, iterate through the references and add all useEvent definitions. We can
136
- // do this in non-Program nodes because we can rely on the assumption that useEvent functions
135
+ // For a given scope, iterate through the references and add all useEffectEvent definitions. We can
136
+ // do this in non-Program nodes because we can rely on the assumption that useEffectEvent functions
137
// can only be declared within a component or hook at its top level.
138
- function recordAllUseEventFunctions(scope) {
138
+ function recordAllUseEffectEventFunctions(scope) {
139
for (const reference of scope.references) {
140
const parent = reference.identifier.parent;
141
if (
@@ -143,11 +143,11 @@ export default {
143
parent.init &&
144
parent.init.type === 'CallExpression' &&
145
parent.init.callee &&
146
- isUseEventIdentifier(parent.init.callee)
146
+ isUseEffectEventIdentifier(parent.init.callee)
147
) {
148
for (const ref of reference.resolved.references) {
149
if (ref !== reference) {
150
- useEventFunctions.add(ref.identifier);
150
+ useEffectEventFunctions.add(ref.identifier);
151
}
152
}
153
}
@@ -571,12 +571,12 @@ export default {
571
reactHooks.push(node.callee);
572
}
573
574
- // useEvent: useEvent functions can be passed by reference within useEffect as well as in
575
- // another useEvent
574
+ // useEffectEvent: useEffectEvent functions can be passed by reference within useEffect as well as in
575
+ // another useEffectEvent
576
if (
577
node.callee.type === 'Identifier' &&
578
(node.callee.name === 'useEffect' ||
579
- isUseEventIdentifier(node.callee)) &&
579
+ isUseEffectEventIdentifier(node.callee)) &&
580
node.arguments.length > 0
581
) {
582
// Denote that we have traversed into a useEffect call, and stash the CallExpr for
@@ -586,11 +586,11 @@ export default {
586
},
587
588
Identifier(node) {
589
- // This identifier resolves to a useEvent function, but isn't being referenced in an
589
+ // This identifier resolves to a useEffectEvent function, but isn't being referenced in an
590
// effect or another event function. It isn't being called either.
591
if (
592
lastEffect == null &&
593
- useEventFunctions.has(node) &&
593
+ useEffectEventFunctions.has(node) &&
594
node.parent.type !== 'CallExpression'
595
) {
596
context.report({
@@ -598,7 +598,7 @@ export default {
598
message:
599
`\`${context.getSource(
600
node,
601
- )}\` is a function created with React Hook "useEvent", and can only be called from ` +
601
+ )}\` is a function created with React Hook "useEffectEvent", and can only be called from ` +
602
'the same component. They cannot be assigned to variables or passed down.',
603
});
604
}
@@ -611,16 +611,16 @@ export default {
611
},
612
613
FunctionDeclaration(node) {
614
- // function MyComponent() { const onClick = useEvent(...) }
614
+ // function MyComponent() { const onClick = useEffectEvent(...) }
615
if (isInsideComponentOrHook(node)) {
616
- recordAllUseEventFunctions(context.getScope());
616
+ recordAllUseEffectEventFunctions(context.getScope());
617
}
618
},
619
620
ArrowFunctionExpression(node) {
621
- // const MyComponent = () => { const onClick = useEvent(...) }
621
+ // const MyComponent = () => { const onClick = useEffectEvent(...) }
622
if (isInsideComponentOrHook(node)) {
623
- recordAllUseEventFunctions(context.getScope());
623
+ recordAllUseEffectEventFunctions(context.getScope());
624
}
625
},
626
};
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+12
-12
@@ -5459,13 +5459,13 @@ describe('ReactDOMFizzServer', () => {
5459
});
5460
});
5461
5462
- describe('useEvent', () => {
5463
- // @gate enableUseEventHook
5464
- it('can server render a component with useEvent', async () => {
5462
+ describe('useEffectEvent', () => {
5463
+ // @gate enableUseEffectEventHook
5464
+ it('can server render a component with useEffectEvent', async () => {
5465
const ref = React.createRef();
5466
function App() {
5467
const [count, setCount] = React.useState(0);
5468
- const onClick = React.experimental_useEvent(() => {
5468
+ const onClick = React.experimental_useEffectEvent(() => {
5469
setCount(c => c + 1);
5470
});
5471
return (
@@ -5491,11 +5491,11 @@ describe('ReactDOMFizzServer', () => {
5491
expect(getVisibleChildren(container)).toEqual(<button>1</button>);
5492
});
5493
5494
- // @gate enableUseEventHook
5495
- it('throws if useEvent is called during a server render', async () => {
5494
+ // @gate enableUseEffectEventHook
5495
+ it('throws if useEffectEvent is called during a server render', async () => {
5496
const logs = [];
5497
function App() {
5498
- const onRender = React.experimental_useEvent(() => {
5498
+ const onRender = React.experimental_useEffectEvent(() => {
5499
logs.push('rendered');
5500
});
5501
onRender();
@@ -5518,16 +5518,16 @@ describe('ReactDOMFizzServer', () => {
5518
}
5519
expect(logs).toEqual([]);
5520
expect(caughtError.message).toContain(
5521
- "A function wrapped in useEvent can't be called during rendering.",
5521
+ "A function wrapped in useEffectEvent can't be called during rendering.",
5522
);
5523
expect(reportedServerErrors).toEqual([caughtError]);
5524
});
5525
5526
- // @gate enableUseEventHook
5527
- it('does not guarantee useEvent return values during server rendering are distinct', async () => {
5526
+ // @gate enableUseEffectEventHook
5527
+ it('does not guarantee useEffectEvent return values during server rendering are distinct', async () => {
5528
function App() {
5529
- const onClick1 = React.experimental_useEvent(() => {});
5530
- const onClick2 = React.experimental_useEvent(() => {});
5529
+ const onClick1 = React.experimental_useEffectEvent(() => {});
5530
+ const onClick2 = React.experimental_useEffectEvent(() => {});
5531
if (onClick1 === onClick2) {
5532
return <div />;
5533
} else {
packages/react-reconciler/src/ReactFiberCommitWork.js
+4
-4
@@ -50,7 +50,7 @@ import {
50
enableUpdaterTracking,
51
enableCache,
52
enableTransitionTracing,
53
- enableUseEventHook,
53
+ enableUseEffectEventHook,
54
enableFloat,
55
enableLegacyHidden,
56
enableHostSingletons,
@@ -454,9 +454,9 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
454
455
switch (finishedWork.tag) {
456
case FunctionComponent: {
457
- if (enableUseEventHook) {
457
+ if (enableUseEffectEventHook) {
458
if ((flags & Update) !== NoFlags) {
459
- commitUseEventMount(finishedWork);
459
+ commitUseEffectEventMount(finishedWork);
460
}
461
}
462
break;
@@ -706,7 +706,7 @@ function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) {
706
}
707
}
708
709
-function commitUseEventMount(finishedWork: Fiber) {
709
+function commitUseEffectEventMount(finishedWork: Fiber) {
710
const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
711
const eventPayloads = updateQueue !== null ? updateQueue.events : null;
712
if (eventPayloads !== null) {
packages/react-reconciler/src/ReactFiberHooks.js
+34
-34
@@ -38,7 +38,7 @@ import {
38
enableTransitionTracing,
39
enableUseHook,
40
enableUseMemoCacheHook,
41
- enableUseEventHook,
41
+ enableUseEffectEventHook,
42
enableLegacyCache,
43
debugRenderPhaseSideEffectsForStrictMode,
44
} from 'shared/ReactFeatureFlags';
@@ -2051,7 +2051,7 @@ function updateEffect(
2051
updateEffectImpl(PassiveEffect, HookPassive, create, deps);
2052
}
2053
2054
-function useEventImpl<Args, Return, F: (...Array<Args>) => Return>(
2054
+function useEffectEventImpl<Args, Return, F: (...Array<Args>) => Return>(
2055
payload: EventFunctionPayload<Args, Return, F>,
2056
) {
2057
currentlyRenderingFiber.flags |= UpdateEffect;
@@ -2080,7 +2080,7 @@ function mountEvent<Args, Return, F: (...Array<Args>) => Return>(
2080
return function eventFn() {
2081
if (isInvalidExecutionContextForEventFunction()) {
2082
throw new Error(
2083
- "A function wrapped in useEvent can't be called during rendering.",
2083
+ "A function wrapped in useEffectEvent can't be called during rendering.",
2084
);
2085
}
2086
return ref.impl.apply(undefined, arguments);
@@ -2092,12 +2092,12 @@ function updateEvent<Args, Return, F: (...Array<Args>) => Return>(
2092
): F {
2093
const hook = updateWorkInProgressHook();
2094
const ref = hook.memoizedState;
2095
- useEventImpl({ref, nextImpl: callback});
2095
+ useEffectEventImpl({ref, nextImpl: callback});
2096
// $FlowIgnore[incompatible-return]
2097
return function eventFn() {
2098
if (isInvalidExecutionContextForEventFunction()) {
2099
throw new Error(
2100
- "A function wrapped in useEvent can't be called during rendering.",
2100
+ "A function wrapped in useEffectEvent can't be called during rendering.",
2101
);
2102
}
2103
return ref.impl.apply(undefined, arguments);
@@ -2780,8 +2780,8 @@ if (enableUseHook) {
2780
if (enableUseMemoCacheHook) {
2781
(ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError;
2782
}
2783
-if (enableUseEventHook) {
2784
- (ContextOnlyDispatcher: Dispatcher).useEvent = throwInvalidHookError;
2783
+if (enableUseEffectEventHook) {
2784
+ (ContextOnlyDispatcher: Dispatcher).useEffectEvent = throwInvalidHookError;
2785
}
2786
2787
const HooksDispatcherOnMount: Dispatcher = {
@@ -2814,8 +2814,8 @@ if (enableUseHook) {
2814
if (enableUseMemoCacheHook) {
2815
(HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache;
2816
}
2817
-if (enableUseEventHook) {
2818
- (HooksDispatcherOnMount: Dispatcher).useEvent = mountEvent;
2817
+if (enableUseEffectEventHook) {
2818
+ (HooksDispatcherOnMount: Dispatcher).useEffectEvent = mountEvent;
2819
}
2820
const HooksDispatcherOnUpdate: Dispatcher = {
2821
readContext,
@@ -2846,8 +2846,8 @@ if (enableUseMemoCacheHook) {
2846
if (enableUseHook) {
2847
(HooksDispatcherOnUpdate: Dispatcher).use = use;
2848
}
2849
-if (enableUseEventHook) {
2850
- (HooksDispatcherOnUpdate: Dispatcher).useEvent = updateEvent;
2849
+if (enableUseEffectEventHook) {
2850
+ (HooksDispatcherOnUpdate: Dispatcher).useEffectEvent = updateEvent;
2851
}
2852
2853
const HooksDispatcherOnRerender: Dispatcher = {
@@ -2879,8 +2879,8 @@ if (enableUseHook) {
2879
if (enableUseMemoCacheHook) {
2880
(HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache;
2881
}
2882
-if (enableUseEventHook) {
2883
- (HooksDispatcherOnRerender: Dispatcher).useEvent = updateEvent;
2882
+if (enableUseEffectEventHook) {
2883
+ (HooksDispatcherOnRerender: Dispatcher).useEffectEvent = updateEvent;
2884
}
2885
2886
let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
@@ -3059,13 +3059,13 @@ if (__DEV__) {
3059
if (enableUseMemoCacheHook) {
3060
(HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache;
3061
}
3062
- if (enableUseEventHook) {
3063
- (HooksDispatcherOnMountInDEV: Dispatcher).useEvent = function useEvent<
3062
+ if (enableUseEffectEventHook) {
3063
+ (HooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent = function useEffectEvent<
3064
Args,
3065
Return,
3066
F: (...Array<Args>) => Return,
3067
>(callback: F): F {
3068
- currentHookNameInDev = 'useEvent';
3068
+ currentHookNameInDev = 'useEffectEvent';
3069
mountHookTypesDev();
3070
return mountEvent(callback);
3071
};
@@ -3214,13 +3214,13 @@ if (__DEV__) {
3214
if (enableUseMemoCacheHook) {
3215
(HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache;
3216
}
3217
- if (enableUseEventHook) {
3218
- (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useEvent = function useEvent<
3217
+ if (enableUseEffectEventHook) {
3218
+ (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useEffectEvent = function useEffectEvent<
3219
Args,
3220
Return,
3221
F: (...Array<Args>) => Return,
3222
>(callback: F): F {
3223
- currentHookNameInDev = 'useEvent';
3223
+ currentHookNameInDev = 'useEffectEvent';
3224
updateHookTypesDev();
3225
return mountEvent(callback);
3226
};
@@ -3369,13 +3369,13 @@ if (__DEV__) {
3369
if (enableUseMemoCacheHook) {
3370
(HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache;
3371
}
3372
- if (enableUseEventHook) {
3373
- (HooksDispatcherOnUpdateInDEV: Dispatcher).useEvent = function useEvent<
3372
+ if (enableUseEffectEventHook) {
3373
+ (HooksDispatcherOnUpdateInDEV: Dispatcher).useEffectEvent = function useEffectEvent<
3374
Args,
3375
Return,
3376
F: (...Array<Args>) => Return,
3377
>(callback: F): F {
3378
- currentHookNameInDev = 'useEvent';
3378
+ currentHookNameInDev = 'useEffectEvent';
3379
updateHookTypesDev();
3380
return updateEvent(callback);
3381
};
@@ -3525,13 +3525,13 @@ if (__DEV__) {
3525
if (enableUseMemoCacheHook) {
3526
(HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache;
3527
}
3528
- if (enableUseEventHook) {
3529
- (HooksDispatcherOnRerenderInDEV: Dispatcher).useEvent = function useEvent<
3528
+ if (enableUseEffectEventHook) {
3529
+ (HooksDispatcherOnRerenderInDEV: Dispatcher).useEffectEvent = function useEffectEvent<
3530
Args,
3531
Return,
3532
F: (...Array<Args>) => Return,
3533
>(callback: F): F {
3534
- currentHookNameInDev = 'useEvent';
3534
+ currentHookNameInDev = 'useEffectEvent';
3535
updateHookTypesDev();
3536
return updateEvent(callback);
3537
};
@@ -3707,13 +3707,13 @@ if (__DEV__) {
3707
return useMemoCache(size);
3708
};
3709
}
3710
- if (enableUseEventHook) {
3711
- (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useEvent = function useEvent<
3710
+ if (enableUseEffectEventHook) {
3711
+ (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent = function useEffectEvent<
3712
Args,
3713
Return,
3714
F: (...Array<Args>) => Return,
3715
>(callback: F): F {
3716
- currentHookNameInDev = 'useEvent';
3716
+ currentHookNameInDev = 'useEffectEvent';
3717
warnInvalidHookAccess();
3718
mountHookTypesDev();
3719
return mountEvent(callback);
@@ -3890,13 +3890,13 @@ if (__DEV__) {
3890
return useMemoCache(size);
3891
};
3892
}
3893
- if (enableUseEventHook) {
3894
- (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useEvent = function useEvent<
3893
+ if (enableUseEffectEventHook) {
3894
+ (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useEffectEvent = function useEffectEvent<
3895
Args,
3896
Return,
3897
F: (...Array<Args>) => Return,
3898
>(callback: F): F {
3899
- currentHookNameInDev = 'useEvent';
3899
+ currentHookNameInDev = 'useEffectEvent';
3900
warnInvalidHookAccess();
3901
updateHookTypesDev();
3902
return updateEvent(callback);
@@ -4074,13 +4074,13 @@ if (__DEV__) {
4074
return useMemoCache(size);
4075
};
4076
}
4077
- if (enableUseEventHook) {
4078
- (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useEvent = function useEvent<
4077
+ if (enableUseEffectEventHook) {
4078
+ (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useEffectEvent = function useEffectEvent<
4079
Args,
4080
Return,
4081
F: (...Array<Args>) => Return,
4082
>(callback: F): F {
4083
- currentHookNameInDev = 'useEvent';
4083
+ currentHookNameInDev = 'useEffectEvent';
4084
warnInvalidHookAccess();
4085
updateHookTypesDev();
4086
return updateEvent(callback);
packages/react-reconciler/src/ReactInternalTypes.js
+4
-2
@@ -44,7 +44,7 @@ export type HookType =
44
| 'useContext'
45
| 'useRef'
46
| 'useEffect'
47
- | 'useEvent'
47
+ | 'useEffectEvent'
48
| 'useInsertionEffect'
49
| 'useLayoutEffect'
50
| 'useCallback'
@@ -379,7 +379,9 @@ export type Dispatcher = {
379
create: () => (() => void) | void,
380
deps: Array<mixed> | void | null,
381
): void,
382
- useEvent?: <Args, Return, F: (...Array<Args>) => Return>(callback: F) => F,
382
+ useEffectEvent?: <Args, Return, F: (...Array<Args>) => Return>(
383
+ callback: F,
384
+ ) => F,
385
useInsertionEffect(
386
create: () => (() => void) | void,
387
deps: Array<mixed> | void | null,
packages/react-reconciler/src/__tests__/useEffectEvent-test.js
renamed
+35
-35
@@ -14,7 +14,7 @@
14
15
import {useInsertionEffect} from 'react';
16
17
-describe('useEvent', () => {
17
+describe('useEffectEvent', () => {
18
let React;
19
let ReactNoop;
20
let Scheduler;
@@ -22,7 +22,7 @@ describe('useEvent', () => {
22
let createContext;
23
let useContext;
24
let useState;
25
- let useEvent;
25
+ let useEffectEvent;
26
let useEffect;
27
let useLayoutEffect;
28
let useMemo;
@@ -36,7 +36,7 @@ describe('useEvent', () => {
36
createContext = React.createContext;
37
useContext = React.useContext;
38
useState = React.useState;
39
- useEvent = React.experimental_useEvent;
39
+ useEffectEvent = React.experimental_useEffectEvent;
40
useEffect = React.useEffect;
41
useLayoutEffect = React.useLayoutEffect;
42
useMemo = React.useMemo;
@@ -51,7 +51,7 @@ describe('useEvent', () => {
51
return <span prop={props.text} />;
52
}
53
54
- // @gate enableUseEventHook
54
+ // @gate enableUseEffectEventHook
55
it('memoizes basic case correctly', () => {
56
class IncrementButton extends React.PureComponent {
57
increment = () => {
@@ -64,7 +64,7 @@ describe('useEvent', () => {
64
65
function Counter({incrementBy}) {
66
const [count, updateCount] = useState(0);
67
- const onClick = useEvent(() => updateCount(c => c + incrementBy));
67
+ const onClick = useEffectEvent(() => updateCount(c => c + incrementBy));
68
69
return (
70
<>
@@ -117,7 +117,7 @@ describe('useEvent', () => {
117
]);
118
});
119
120
- // @gate enableUseEventHook
120
+ // @gate enableUseEffectEventHook
121
it('can be defined more than once', () => {
122
class IncrementButton extends React.PureComponent {
123
increment = () => {
@@ -133,8 +133,8 @@ describe('useEvent', () => {
133
134
function Counter({incrementBy}) {
135
const [count, updateCount] = useState(0);
136
- const onClick = useEvent(() => updateCount(c => c + incrementBy));
137
- const onMouseEnter = useEvent(() => {
136
+ const onClick = useEffectEvent(() => updateCount(c => c + incrementBy));
137
+ const onMouseEnter = useEffectEvent(() => {
138
updateCount(c => c * incrementBy);
139
});
140
@@ -173,7 +173,7 @@ describe('useEvent', () => {
173
]);
174
});
175
176
- // @gate enableUseEventHook
176
+ // @gate enableUseEffectEventHook
177
it('does not preserve `this` in event functions', () => {
178
class GreetButton extends React.PureComponent {
179
greet = () => {
@@ -193,7 +193,7 @@ describe('useEvent', () => {
193
},
194
};
195
const [greeting, updateGreeting] = useState('Seb says ' + hello);
196
- const onClick = useEvent(person.greet);
196
+ const onClick = useEffectEvent(person.greet);
197
198
return (
199
<>
@@ -222,7 +222,7 @@ describe('useEvent', () => {
222
]);
223
});
224
225
- // @gate enableUseEventHook
225
+ // @gate enableUseEffectEventHook
226
it('throws when called in render', () => {
227
class IncrementButton extends React.PureComponent {
228
increment = () => {
@@ -239,7 +239,7 @@ describe('useEvent', () => {
239
240
function Counter({incrementBy}) {
241
const [count, updateCount] = useState(0);
242
- const onClick = useEvent(() => updateCount(c => c + incrementBy));
242
+ const onClick = useEffectEvent(() => updateCount(c => c + incrementBy));
243
244
return (
245
<>
@@ -251,7 +251,7 @@ describe('useEvent', () => {
251
252
ReactNoop.render(<Counter incrementBy={1} />);
253
expect(Scheduler).toFlushAndThrow(
254
- "A function wrapped in useEvent can't be called during rendering.",
254
+ "A function wrapped in useEffectEvent can't be called during rendering.",
255
);
256
257
// If something throws, we try one more time synchronously in case the error was
@@ -259,7 +259,7 @@ describe('useEvent', () => {
259
expect(Scheduler).toHaveYielded(['Count: 0', 'Count: 0']);
260
});
261
262
- // @gate enableUseEventHook
262
+ // @gate enableUseEffectEventHook
263
it("useLayoutEffect shouldn't re-fire when event handlers change", () => {
264
class IncrementButton extends React.PureComponent {
265
increment = () => {
@@ -272,7 +272,7 @@ describe('useEvent', () => {
272
273
function Counter({incrementBy}) {
274
const [count, updateCount] = useState(0);
275
- const increment = useEvent(amount =>
275
+ const increment = useEffectEvent(amount =>
276
updateCount(c => c + (amount || incrementBy)),
277
);
278
@@ -349,7 +349,7 @@ describe('useEvent', () => {
349
]);
350
});
351
352
- // @gate enableUseEventHook
352
+ // @gate enableUseEffectEventHook
353
it("useEffect shouldn't re-fire when event handlers change", () => {
354
class IncrementButton extends React.PureComponent {
355
increment = () => {
@@ -362,7 +362,7 @@ describe('useEvent', () => {
362
363
function Counter({incrementBy}) {
364
const [count, updateCount] = useState(0);
365
- const increment = useEvent(amount =>
365
+ const increment = useEffectEvent(amount =>
366
updateCount(c => c + (amount || incrementBy)),
367
);
368
@@ -438,7 +438,7 @@ describe('useEvent', () => {
438
]);
439
});
440
441
- // @gate enableUseEventHook
441
+ // @gate enableUseEffectEventHook
442
it('is stable in a custom hook', () => {
443
class IncrementButton extends React.PureComponent {
444
increment = () => {
@@ -451,7 +451,7 @@ describe('useEvent', () => {
451
452
function useCount(incrementBy) {
453
const [count, updateCount] = useState(0);
454
- const increment = useEvent(amount =>
454
+ const increment = useEffectEvent(amount =>
455
updateCount(c => c + (amount || incrementBy)),
456
);
457
@@ -533,7 +533,7 @@ describe('useEvent', () => {
533
]);
534
});
535
536
- // @gate enableUseEventHook
536
+ // @gate enableUseEffectEventHook
537
it('is mutated before all other effects', () => {
538
function Counter({value}) {
539
useInsertionEffect(() => {
@@ -543,7 +543,7 @@ describe('useEvent', () => {
543
544
// This is defined after the insertion effect, but it should
545
// update the event fn _before_ the insertion effect fires.
546
- const increment = useEvent(() => {
546
+ const increment = useEffectEvent(() => {
547
Scheduler.unstable_yieldValue('Event value: ' + value);
548
});
549
@@ -557,17 +557,17 @@ describe('useEvent', () => {
557
expect(Scheduler).toHaveYielded(['Effect value: 2', 'Event value: 2']);
558
});
559
560
- // @gate enableUseEventHook
560
+ // @gate enableUseEffectEventHook
561
it("doesn't provide a stable identity", () => {
562
function Counter({shouldRender, value}) {
563
- const onClick = useEvent(() => {
563
+ const onClick = useEffectEvent(() => {
564
Scheduler.unstable_yieldValue(
565
'onClick, shouldRender=' + shouldRender + ', value=' + value,
566
);
567
});
568
569
// onClick doesn't have a stable function identity so this effect will fire on every render.
570
- // In a real app useEvent functions should *not* be passed as a dependency, this is for
570
+ // In a real app useEffectEvent functions should *not* be passed as a dependency, this is for
571
// testing purposes only.
572
useEffect(() => {
573
onClick();
@@ -596,13 +596,13 @@ describe('useEvent', () => {
596
]);
597
});
598
599
- // @gate enableUseEventHook
599
+ // @gate enableUseEffectEventHook
600
it('event handlers always see the latest committed value', async () => {
601
let committedEventHandler = null;
602
603
function App({value}) {
604
- const event = useEvent(() => {
605
- return 'Value seen by useEvent: ' + value;
604
+ const event = useEffectEvent(() => {
605
+ return 'Value seen by useEffectEvent: ' + value;
606
});
607
608
// Set up an effect that registers the event handler with an external
@@ -619,7 +619,7 @@ describe('useEvent', () => {
619
},
620
// Note that we've intentionally omitted the event from the dependency
621
// array. But it will still be able to see the latest `value`. This is the
622
- // key feature of useEvent that makes it different from a regular closure.
622
+ // key feature of useEffectEvent that makes it different from a regular closure.
623
[],
624
);
625
return 'Latest rendered value ' + value;
@@ -632,7 +632,7 @@ describe('useEvent', () => {
632
});
633
expect(Scheduler).toHaveYielded(['Commit new event handler']);
634
expect(root).toMatchRenderedOutput('Latest rendered value 1');
635
- expect(committedEventHandler()).toBe('Value seen by useEvent: 1');
635
+ expect(committedEventHandler()).toBe('Value seen by useEffectEvent: 1');
636
637
// Update
638
await act(async () => {
@@ -643,10 +643,10 @@ describe('useEvent', () => {
643
expect(Scheduler).toHaveYielded([]);
644
// But the event handler should still be able to see the latest value.
645
expect(root).toMatchRenderedOutput('Latest rendered value 2');
646
- expect(committedEventHandler()).toBe('Value seen by useEvent: 2');
646
+ expect(committedEventHandler()).toBe('Value seen by useEffectEvent: 2');
647
});
648
649
- // @gate enableUseEventHook
649
+ // @gate enableUseEffectEventHook
650
it('integration: implements docs chat room example', () => {
651
function createConnection() {
652
let connectedCallback;
@@ -675,7 +675,7 @@ describe('useEvent', () => {
675
}
676
677
function ChatRoom({roomId, theme}) {
678
- const onConnected = useEvent(() => {
678
+ const onConnected = useEffectEvent(() => {
679
Scheduler.unstable_yieldValue('Connected! theme: ' + theme);
680
});
681
@@ -735,7 +735,7 @@ describe('useEvent', () => {
735
expect(Scheduler).toHaveYielded(['Connected! theme: dark']);
736
});
737
738
- // @gate enableUseEventHook
738
+ // @gate enableUseEffectEventHook
739
it('integration: implements the docs logVisit example', () => {
740
class AddToCartButton extends React.PureComponent {
741
addToCart = () => {
@@ -760,10 +760,10 @@ describe('useEvent', () => {
760
761
function Page({url}) {
762
const {items, updateItems} = useContext(ShoppingCartContext);
763
- const onClick = useEvent(() => updateItems([...items, 1]));
763
+ const onClick = useEffectEvent(() => updateItems([...items, 1]));
764
const numberOfItems = items.length;
765
766
- const onVisit = useEvent(visitedUrl => {
766
+ const onVisit = useEffectEvent(visitedUrl => {
767
Scheduler.unstable_yieldValue(
768
'url: ' + visitedUrl + ', numberOfItems: ' + numberOfItems,
769
);
packages/react-server/src/ReactFizzHooks.js
+7
-7
@@ -32,7 +32,7 @@ import {makeId} from './ReactServerFormatConfig';
32
import {
33
enableCache,
34
enableUseHook,
35
- enableUseEventHook,
35
+ enableUseEffectEventHook,
36
enableUseMemoCacheHook,
37
} from 'shared/ReactFeatureFlags';
38
import is from 'shared/objectIs';
@@ -507,17 +507,17 @@ export function useCallback<T>(
507
return useMemo(() => callback, deps);
508
}
509
510
-function throwOnUseEventCall() {
510
+function throwOnUseEffectEventCall() {
511
throw new Error(
512
- "A function wrapped in useEvent can't be called during rendering.",
512
+ "A function wrapped in useEffectEvent can't be called during rendering.",
513
);
514
}
515
516
-export function useEvent<Args, Return, F: (...Array<Args>) => Return>(
516
+export function useEffectEvent<Args, Return, F: (...Array<Args>) => Return>(
517
callback: F,
518
): F {
519
// $FlowIgnore[incompatible-return]
520
- return throwOnUseEventCall;
520
+ return throwOnUseEffectEventCall;
521
}
522
523
// TODO Decide on how to implement this hook for server rendering.
@@ -651,8 +651,8 @@ export const HooksDispatcher: Dispatcher = {
651
if (enableCache) {
652
HooksDispatcher.useCacheRefresh = useCacheRefresh;
653
}
654
-if (enableUseEventHook) {
655
- HooksDispatcher.useEvent = useEvent;
654
+if (enableUseEffectEventHook) {
655
+ HooksDispatcher.useEffectEvent = useEffectEvent;
656
}
657
if (enableUseMemoCacheHook) {
658
HooksDispatcher.useMemoCache = useMemoCache;
packages/react/index.classic.fb.js
+1
-1
@@ -52,7 +52,7 @@ export {
52
useDeferredValue,
53
useDeferredValue as unstable_useDeferredValue, // TODO: Remove once call sights updated to useDeferredValue
54
useEffect,
55
- experimental_useEvent,
55
+ experimental_useEffectEvent,
56
useImperativeHandle,
57
useLayoutEffect,
58
useInsertionEffect,
packages/react/index.experimental.js
+1
-1
@@ -44,7 +44,7 @@ export {
44
useDebugValue,
45
useDeferredValue,
46
useEffect,
47
- experimental_useEvent,
47
+ experimental_useEffectEvent,
48
useImperativeHandle,
49
useInsertionEffect,
50
useLayoutEffect,
packages/react/index.js
+1
-1
@@ -72,7 +72,7 @@ export {
72
useDebugValue,
73
useDeferredValue,
74
useEffect,
75
- experimental_useEvent,
75
+ experimental_useEffectEvent,
76
useImperativeHandle,
77
useInsertionEffect,
78
useLayoutEffect,
packages/react/index.modern.fb.js
+1
-1
@@ -50,7 +50,7 @@ export {
50
useDeferredValue,
51
useDeferredValue as unstable_useDeferredValue, // TODO: Remove once call sights updated to useDeferredValue
52
useEffect,
53
- experimental_useEvent,
53
+ experimental_useEffectEvent,
54
useImperativeHandle,
55
useInsertionEffect,
56
useLayoutEffect,
packages/react/src/React.js
+2
-2
@@ -42,7 +42,7 @@ import {
42
useCallback,
43
useContext,
44
useEffect,
45
- useEvent,
45
+ useEffectEvent,
46
useImperativeHandle,
47
useDebugValue,
48
useInsertionEffect,
@@ -105,7 +105,7 @@ export {
105
useCallback,
106
useContext,
107
useEffect,
108
- useEvent as experimental_useEvent,
108
+ useEffectEvent as experimental_useEffectEvent,
109
useImperativeHandle,
110
useDebugValue,
111
useInsertionEffect,
packages/react/src/ReactHooks.js
+2
-2
@@ -235,8 +235,8 @@ export function useMemoCache(size: number): Array<any> {
235
return dispatcher.useMemoCache(size);
236
}
237
238
-export function useEvent<T>(callback: T): void {
238
+export function useEffectEvent<T>(callback: T): void {
239
const dispatcher = resolveDispatcher();
240
// $FlowFixMe This is unstable, thus optional
241
- return dispatcher.useEvent(callback);
241
+ return dispatcher.useEffectEvent(callback);
242
}
packages/shared/ReactFeatureFlags.js
+1
-1
@@ -121,7 +121,7 @@ export const enableUseHook = true;
121
// auto-memoization.
122
export const enableUseMemoCacheHook = __EXPERIMENTAL__;
123
124
-export const enableUseEventHook = __EXPERIMENTAL__;
124
+export const enableUseEffectEventHook = __EXPERIMENTAL__;
125
126
// Test in www before enabling in open source.
127
// Enables DOM-server to stream its instruction set as data-attributes
packages/shared/forks/ReactFeatureFlags.native-fb.js
+1
-1
@@ -54,7 +54,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
54
export const enableCPUSuspense = true;
55
export const enableUseHook = true;
56
export const enableUseMemoCacheHook = true;
57
-export const enableUseEventHook = false;
57
+export const enableUseEffectEventHook = false;
58
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
59
export const enableClientRenderFallbackOnTextMismatch = true;
60
export const enableComponentStackLocations = false;
packages/shared/forks/ReactFeatureFlags.native-oss.js
+1
-1
@@ -44,7 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
44
export const enableCPUSuspense = false;
45
export const enableUseHook = true;
46
export const enableUseMemoCacheHook = false;
47
-export const enableUseEventHook = false;
47
+export const enableUseEffectEventHook = false;
48
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
49
export const enableClientRenderFallbackOnTextMismatch = true;
50
export const enableComponentStackLocations = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
-1
@@ -44,7 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
44
export const enableCPUSuspense = false;
45
export const enableUseHook = true;
46
export const enableUseMemoCacheHook = false;
47
-export const enableUseEventHook = false;
47
+export const enableUseEffectEventHook = false;
48
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
49
export const enableClientRenderFallbackOnTextMismatch = true;
50
export const enableComponentStackLocations = true;
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+1
-1
@@ -52,7 +52,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
52
export const enableCPUSuspense = false;
53
export const enableUseHook = true;
54
export const enableUseMemoCacheHook = false;
55
-export const enableUseEventHook = false;
55
+export const enableUseEffectEventHook = false;
56
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
57
export const enableClientRenderFallbackOnTextMismatch = true;
58
export const createRootStrictEffectsByDefault = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
-1
@@ -44,7 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
44
export const enableCPUSuspense = false;
45
export const enableUseHook = true;
46
export const enableUseMemoCacheHook = false;
47
-export const enableUseEventHook = false;
47
+export const enableUseEffectEventHook = false;
48
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
49
export const enableClientRenderFallbackOnTextMismatch = true;
50
export const enableComponentStackLocations = true;
packages/shared/forks/ReactFeatureFlags.testing.js
+1
-1
@@ -44,7 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
44
export const enableCPUSuspense = false;
45
export const enableUseHook = true;
46
export const enableUseMemoCacheHook = false;
47
-export const enableUseEventHook = false;
47
+export const enableUseEffectEventHook = false;
48
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
49
export const enableClientRenderFallbackOnTextMismatch = true;
50
export const enableComponentStackLocations = true;
packages/shared/forks/ReactFeatureFlags.testing.www.js
+1
-1
@@ -44,7 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
44
export const enableCPUSuspense = true;
45
export const enableUseHook = true;
46
export const enableUseMemoCacheHook = false;
47
-export const enableUseEventHook = false;
47
+export const enableUseEffectEventHook = false;
48
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
49
export const enableClientRenderFallbackOnTextMismatch = true;
50
export const enableComponentStackLocations = true;
packages/shared/forks/ReactFeatureFlags.www.js
+1
-1
@@ -53,7 +53,7 @@ export const enableCPUSuspense = true;
53
export const enableFloat = true;
54
export const enableUseHook = true;
55
export const enableUseMemoCacheHook = true;
56
-export const enableUseEventHook = true;
56
+export const enableUseEffectEventHook = true;
57
export const enableHostSingletons = true;
58
59
// Logs additional User Timing API marks for use with an experimental profiling tool.
scripts/error-codes/codes.json
+1
-1
@@ -425,7 +425,7 @@
425
"437": "the \"precedence\" prop for links to stylesheets expects to receive a string but received something of type \"%s\" instead.",
426
"438": "An unsupported type was passed to use(): %s",
427
"439": "We didn't expect to see a forward reference. This is a bug in the React Server.",
428
- "440": "A function wrapped in useEvent can't be called during rendering.",
428
+ "440": "A function wrapped in useEffectEvent can't be called during rendering.",
429
"441": "An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.",
430
"442": "The current renderer does not support Resources. This error is likely caused by a bug in React. Please file an issue.",
431
"443": "acquireResource encountered a resource type it did not expect: \"%s\". this is a bug in React.",