From 84a0a171ea0ecd25e287bd3d3dd30e932beb4677 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Wed, 14 Dec 2022 15:08:29 -0500 Subject: [PATCH] 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(); }, []); ``` --- .../ESLintRuleExhaustiveDeps-test.js | 8 +-- .../__tests__/ESLintRulesOfHooks-test.js | 56 +++++++-------- .../src/ExhaustiveDeps.js | 21 +++--- .../src/RulesOfHooks.js | 36 +++++----- .../src/__tests__/ReactDOMFizzServer-test.js | 24 +++---- .../src/ReactFiberCommitWork.js | 8 +-- .../react-reconciler/src/ReactFiberHooks.js | 68 +++++++++--------- .../src/ReactInternalTypes.js | 6 +- ...seEvent-test.js => useEffectEvent-test.js} | 70 +++++++++---------- packages/react-server/src/ReactFizzHooks.js | 14 ++-- packages/react/index.classic.fb.js | 2 +- packages/react/index.experimental.js | 2 +- packages/react/index.js | 2 +- packages/react/index.modern.fb.js | 2 +- packages/react/src/React.js | 4 +- packages/react/src/ReactHooks.js | 4 +- packages/shared/ReactFeatureFlags.js | 2 +- .../forks/ReactFeatureFlags.native-fb.js | 2 +- .../forks/ReactFeatureFlags.native-oss.js | 2 +- .../forks/ReactFeatureFlags.test-renderer.js | 2 +- .../ReactFeatureFlags.test-renderer.native.js | 2 +- .../ReactFeatureFlags.test-renderer.www.js | 2 +- .../shared/forks/ReactFeatureFlags.testing.js | 2 +- .../forks/ReactFeatureFlags.testing.www.js | 2 +- .../shared/forks/ReactFeatureFlags.www.js | 2 +- scripts/error-codes/codes.json | 2 +- 26 files changed, 176 insertions(+), 171 deletions(-) rename packages/react-reconciler/src/__tests__/{useEvent-test.js => useEffectEvent-test.js} (92%) diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js index 2de2daa85d656..914c2d526107c 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js +++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js @@ -7636,7 +7636,7 @@ if (__EXPERIMENTAL__) { { code: normalizeIndent` function MyComponent({ theme }) { - const onStuff = useEvent(() => { + const onStuff = useEffectEvent(() => { showNotification(theme); }); useEffect(() => { @@ -7652,7 +7652,7 @@ if (__EXPERIMENTAL__) { { code: normalizeIndent` function MyComponent({ theme }) { - const onStuff = useEvent(() => { + const onStuff = useEffectEvent(() => { showNotification(theme); }); useEffect(() => { @@ -7663,14 +7663,14 @@ if (__EXPERIMENTAL__) { errors: [ { message: - 'Functions returned from `useEvent` must not be included in the dependency array. ' + + 'Functions returned from `useEffectEvent` must not be included in the dependency array. ' + 'Remove `onStuff` from the list.', suggestions: [ { desc: 'Remove the dependency `onStuff`', output: normalizeIndent` function MyComponent({ theme }) { - const onStuff = useEvent(() => { + const onStuff = useEffectEvent(() => { showNotification(theme); }); useEffect(() => { diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js index 3148ee877ee49..aa2bcf9846d31 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js +++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js @@ -1050,9 +1050,9 @@ if (__EXPERIMENTAL__) { ...tests.valid, { code: normalizeIndent` - // Valid because functions created with useEvent can be called in a useEffect. + // Valid because functions created with useEffectEvent can be called in a useEffect. function MyComponent({ theme }) { - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { showNotification(theme); }); useEffect(() => { @@ -1063,9 +1063,9 @@ if (__EXPERIMENTAL__) { }, { code: normalizeIndent` - // Valid because functions created with useEvent can be called in closures. + // Valid because functions created with useEffectEvent can be called in closures. function MyComponent({ theme }) { - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { showNotification(theme); }); return onClick()}>; @@ -1074,9 +1074,9 @@ if (__EXPERIMENTAL__) { }, { code: normalizeIndent` - // Valid because functions created with useEvent can be called in closures. + // Valid because functions created with useEffectEvent can be called in closures. function MyComponent({ theme }) { - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { showNotification(theme); }); const onClick2 = () => { onClick() }; @@ -1090,13 +1090,13 @@ if (__EXPERIMENTAL__) { }, { code: normalizeIndent` - // Valid because functions created with useEvent can be passed by reference in useEffect - // and useEvent. + // Valid because functions created with useEffectEvent can be passed by reference in useEffect + // and useEffectEvent. function MyComponent({ theme }) { - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { showNotification(theme); }); - const onClick2 = useEvent(() => { + const onClick2 = useEffectEvent(() => { debounce(onClick); }); useEffect(() => { @@ -1110,7 +1110,7 @@ if (__EXPERIMENTAL__) { { code: normalizeIndent` const MyComponent = ({theme}) => { - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { showNotification(theme); }); return onClick()}>; @@ -1121,10 +1121,10 @@ if (__EXPERIMENTAL__) { code: normalizeIndent` function MyComponent({ theme }) { const notificationService = useNotifications(); - const showNotification = useEvent((text) => { + const showNotification = useEffectEvent((text) => { notificationService.notify(theme, text); }); - const onClick = useEvent((text) => { + const onClick = useEffectEvent((text) => { showNotification(text); }); return onClick(text)} /> @@ -1137,7 +1137,7 @@ if (__EXPERIMENTAL__) { useEffect(() => { onClick(); }); - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { showNotification(theme); }); } @@ -1188,64 +1188,64 @@ if (__EXPERIMENTAL__) { { code: normalizeIndent` function MyComponent({ theme }) { - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { showNotification(theme); }); return ; } `, - errors: [useEventError('onClick')], + errors: [useEffectEventError('onClick')], }, { code: normalizeIndent` // This should error even though it shares an identifier name with the below function MyComponent({theme}) { - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { showNotification(theme) }); return } - // The useEvent function shares an identifier name with the above + // The useEffectEvent function shares an identifier name with the above function MyOtherComponent({theme}) { - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { showNotification(theme) }); return onClick()} /> } `, - errors: [{...useEventError('onClick'), line: 7}], + errors: [{...useEffectEventError('onClick'), line: 7}], }, { code: normalizeIndent` const MyComponent = ({ theme }) => { - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { showNotification(theme); }); return ; } `, - errors: [useEventError('onClick')], + errors: [useEffectEventError('onClick')], }, { code: normalizeIndent` // Invalid because onClick is being aliased to foo but not invoked function MyComponent({ theme }) { - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { showNotification(theme); }); let foo = onClick; return } `, - errors: [{...useEventError('onClick'), line: 7}], + errors: [{...useEffectEventError('onClick'), line: 7}], }, { code: normalizeIndent` // Should error because it's being passed down to JSX, although it's been referenced once // in an effect function MyComponent({ theme }) { - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { showNotification(them); }); useEffect(() => { @@ -1254,7 +1254,7 @@ if (__EXPERIMENTAL__) { return } `, - errors: [useEventError('onClick')], + errors: [useEffectEventError('onClick')], }, { code: normalizeIndent` @@ -1360,10 +1360,10 @@ function classError(hook) { }; } -function useEventError(fn) { +function useEffectEventError(fn) { return { message: - `\`${fn}\` is a function created with React Hook "useEvent", and can only be called from ` + + `\`${fn}\` is a function created with React Hook "useEffectEvent", and can only be called from ` + 'the same component. They cannot be assigned to variables or passed down.', }; } diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js index 0885d268367f8..fd5bcd1c95ab3 100644 --- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js +++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js @@ -74,7 +74,7 @@ export default { const stateVariables = new WeakSet(); const stableKnownValueCache = new WeakMap(); const functionWithoutCapturedValueCache = new WeakMap(); - const useEventVariables = new WeakSet(); + const useEffectEventVariables = new WeakSet(); function memoizeWithWeakMap(fn, map) { return function(arg) { if (map.has(arg)) { @@ -158,7 +158,7 @@ export default { // ^^^ true for this reference // const ref = useRef() // ^^^ true for this reference - // const onStuff = useEvent(() => {}) + // const onStuff = useEffectEvent(() => {}) // ^^^ true for this reference // False for everything else. function isStableKnownHookValue(resolved) { @@ -226,13 +226,16 @@ export default { if (name === 'useRef' && id.type === 'Identifier') { // useRef() return value is stable. return true; - } else if (isUseEventIdentifier(callee) && id.type === 'Identifier') { + } else if ( + isUseEffectEventIdentifier(callee) && + id.type === 'Identifier' + ) { for (const ref of resolved.references) { if (ref !== id) { - useEventVariables.add(ref.identifier); + useEffectEventVariables.add(ref.identifier); } } - // useEvent() return value is always unstable. + // useEffectEvent() return value is always unstable. return true; } else if (name === 'useState' || name === 'useReducer') { // Only consider second value in initializing tuple stable. @@ -645,11 +648,11 @@ export default { }); return; } - if (useEventVariables.has(declaredDependencyNode)) { + if (useEffectEventVariables.has(declaredDependencyNode)) { reportProblem({ node: declaredDependencyNode, message: - 'Functions returned from `useEvent` must not be included in the dependency array. ' + + 'Functions returned from `useEffectEvent` must not be included in the dependency array. ' + `Remove \`${context.getSource( declaredDependencyNode, )}\` from the list.`, @@ -1851,9 +1854,9 @@ function isAncestorNodeOf(a, b) { return a.range[0] <= b.range[0] && a.range[1] >= b.range[1]; } -function isUseEventIdentifier(node) { +function isUseEffectEventIdentifier(node) { if (__EXPERIMENTAL__) { - return node.type === 'Identifier' && node.name === 'useEvent'; + return node.type === 'Identifier' && node.name === 'useEffectEvent'; } return false; } diff --git a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js index 9c915b775a418..ded525e08545f 100644 --- a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js +++ b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js @@ -103,9 +103,9 @@ function isInsideComponentOrHook(node) { return false; } -function isUseEventIdentifier(node) { +function isUseEffectEventIdentifier(node) { if (__EXPERIMENTAL__) { - return node.type === 'Identifier' && node.name === 'useEvent'; + return node.type === 'Identifier' && node.name === 'useEffectEvent'; } return false; } @@ -130,12 +130,12 @@ export default { let lastEffect = null; const codePathReactHooksMapStack = []; const codePathSegmentStack = []; - const useEventFunctions = new WeakSet(); + const useEffectEventFunctions = new WeakSet(); - // For a given scope, iterate through the references and add all useEvent definitions. We can - // do this in non-Program nodes because we can rely on the assumption that useEvent functions + // For a given scope, iterate through the references and add all useEffectEvent definitions. We can + // do this in non-Program nodes because we can rely on the assumption that useEffectEvent functions // can only be declared within a component or hook at its top level. - function recordAllUseEventFunctions(scope) { + function recordAllUseEffectEventFunctions(scope) { for (const reference of scope.references) { const parent = reference.identifier.parent; if ( @@ -143,11 +143,11 @@ export default { parent.init && parent.init.type === 'CallExpression' && parent.init.callee && - isUseEventIdentifier(parent.init.callee) + isUseEffectEventIdentifier(parent.init.callee) ) { for (const ref of reference.resolved.references) { if (ref !== reference) { - useEventFunctions.add(ref.identifier); + useEffectEventFunctions.add(ref.identifier); } } } @@ -571,12 +571,12 @@ export default { reactHooks.push(node.callee); } - // useEvent: useEvent functions can be passed by reference within useEffect as well as in - // another useEvent + // useEffectEvent: useEffectEvent functions can be passed by reference within useEffect as well as in + // another useEffectEvent if ( node.callee.type === 'Identifier' && (node.callee.name === 'useEffect' || - isUseEventIdentifier(node.callee)) && + isUseEffectEventIdentifier(node.callee)) && node.arguments.length > 0 ) { // Denote that we have traversed into a useEffect call, and stash the CallExpr for @@ -586,11 +586,11 @@ export default { }, Identifier(node) { - // This identifier resolves to a useEvent function, but isn't being referenced in an + // This identifier resolves to a useEffectEvent function, but isn't being referenced in an // effect or another event function. It isn't being called either. if ( lastEffect == null && - useEventFunctions.has(node) && + useEffectEventFunctions.has(node) && node.parent.type !== 'CallExpression' ) { context.report({ @@ -598,7 +598,7 @@ export default { message: `\`${context.getSource( node, - )}\` is a function created with React Hook "useEvent", and can only be called from ` + + )}\` is a function created with React Hook "useEffectEvent", and can only be called from ` + 'the same component. They cannot be assigned to variables or passed down.', }); } @@ -611,16 +611,16 @@ export default { }, FunctionDeclaration(node) { - // function MyComponent() { const onClick = useEvent(...) } + // function MyComponent() { const onClick = useEffectEvent(...) } if (isInsideComponentOrHook(node)) { - recordAllUseEventFunctions(context.getScope()); + recordAllUseEffectEventFunctions(context.getScope()); } }, ArrowFunctionExpression(node) { - // const MyComponent = () => { const onClick = useEvent(...) } + // const MyComponent = () => { const onClick = useEffectEvent(...) } if (isInsideComponentOrHook(node)) { - recordAllUseEventFunctions(context.getScope()); + recordAllUseEffectEventFunctions(context.getScope()); } }, }; diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 79455a7225df8..e314cbae13d1f 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -5459,13 +5459,13 @@ describe('ReactDOMFizzServer', () => { }); }); - describe('useEvent', () => { - // @gate enableUseEventHook - it('can server render a component with useEvent', async () => { + describe('useEffectEvent', () => { + // @gate enableUseEffectEventHook + it('can server render a component with useEffectEvent', async () => { const ref = React.createRef(); function App() { const [count, setCount] = React.useState(0); - const onClick = React.experimental_useEvent(() => { + const onClick = React.experimental_useEffectEvent(() => { setCount(c => c + 1); }); return ( @@ -5491,11 +5491,11 @@ describe('ReactDOMFizzServer', () => { expect(getVisibleChildren(container)).toEqual(); }); - // @gate enableUseEventHook - it('throws if useEvent is called during a server render', async () => { + // @gate enableUseEffectEventHook + it('throws if useEffectEvent is called during a server render', async () => { const logs = []; function App() { - const onRender = React.experimental_useEvent(() => { + const onRender = React.experimental_useEffectEvent(() => { logs.push('rendered'); }); onRender(); @@ -5518,16 +5518,16 @@ describe('ReactDOMFizzServer', () => { } expect(logs).toEqual([]); expect(caughtError.message).toContain( - "A function wrapped in useEvent can't be called during rendering.", + "A function wrapped in useEffectEvent can't be called during rendering.", ); expect(reportedServerErrors).toEqual([caughtError]); }); - // @gate enableUseEventHook - it('does not guarantee useEvent return values during server rendering are distinct', async () => { + // @gate enableUseEffectEventHook + it('does not guarantee useEffectEvent return values during server rendering are distinct', async () => { function App() { - const onClick1 = React.experimental_useEvent(() => {}); - const onClick2 = React.experimental_useEvent(() => {}); + const onClick1 = React.experimental_useEffectEvent(() => {}); + const onClick2 = React.experimental_useEffectEvent(() => {}); if (onClick1 === onClick2) { return
; } else { diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index eec6e1eb0142f..363e6408711cf 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -50,7 +50,7 @@ import { enableUpdaterTracking, enableCache, enableTransitionTracing, - enableUseEventHook, + enableUseEffectEventHook, enableFloat, enableLegacyHidden, enableHostSingletons, @@ -454,9 +454,9 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { switch (finishedWork.tag) { case FunctionComponent: { - if (enableUseEventHook) { + if (enableUseEffectEventHook) { if ((flags & Update) !== NoFlags) { - commitUseEventMount(finishedWork); + commitUseEffectEventMount(finishedWork); } } break; @@ -706,7 +706,7 @@ function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) { } } -function commitUseEventMount(finishedWork: Fiber) { +function commitUseEffectEventMount(finishedWork: Fiber) { const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any); const eventPayloads = updateQueue !== null ? updateQueue.events : null; if (eventPayloads !== null) { diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js index cf3d34f4c4034..eebd50915f31e 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.js +++ b/packages/react-reconciler/src/ReactFiberHooks.js @@ -38,7 +38,7 @@ import { enableTransitionTracing, enableUseHook, enableUseMemoCacheHook, - enableUseEventHook, + enableUseEffectEventHook, enableLegacyCache, debugRenderPhaseSideEffectsForStrictMode, } from 'shared/ReactFeatureFlags'; @@ -2051,7 +2051,7 @@ function updateEffect( updateEffectImpl(PassiveEffect, HookPassive, create, deps); } -function useEventImpl) => Return>( +function useEffectEventImpl) => Return>( payload: EventFunctionPayload, ) { currentlyRenderingFiber.flags |= UpdateEffect; @@ -2080,7 +2080,7 @@ function mountEvent) => Return>( return function eventFn() { if (isInvalidExecutionContextForEventFunction()) { throw new Error( - "A function wrapped in useEvent can't be called during rendering.", + "A function wrapped in useEffectEvent can't be called during rendering.", ); } return ref.impl.apply(undefined, arguments); @@ -2092,12 +2092,12 @@ function updateEvent) => Return>( ): F { const hook = updateWorkInProgressHook(); const ref = hook.memoizedState; - useEventImpl({ref, nextImpl: callback}); + useEffectEventImpl({ref, nextImpl: callback}); // $FlowIgnore[incompatible-return] return function eventFn() { if (isInvalidExecutionContextForEventFunction()) { throw new Error( - "A function wrapped in useEvent can't be called during rendering.", + "A function wrapped in useEffectEvent can't be called during rendering.", ); } return ref.impl.apply(undefined, arguments); @@ -2780,8 +2780,8 @@ if (enableUseHook) { if (enableUseMemoCacheHook) { (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError; } -if (enableUseEventHook) { - (ContextOnlyDispatcher: Dispatcher).useEvent = throwInvalidHookError; +if (enableUseEffectEventHook) { + (ContextOnlyDispatcher: Dispatcher).useEffectEvent = throwInvalidHookError; } const HooksDispatcherOnMount: Dispatcher = { @@ -2814,8 +2814,8 @@ if (enableUseHook) { if (enableUseMemoCacheHook) { (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache; } -if (enableUseEventHook) { - (HooksDispatcherOnMount: Dispatcher).useEvent = mountEvent; +if (enableUseEffectEventHook) { + (HooksDispatcherOnMount: Dispatcher).useEffectEvent = mountEvent; } const HooksDispatcherOnUpdate: Dispatcher = { readContext, @@ -2846,8 +2846,8 @@ if (enableUseMemoCacheHook) { if (enableUseHook) { (HooksDispatcherOnUpdate: Dispatcher).use = use; } -if (enableUseEventHook) { - (HooksDispatcherOnUpdate: Dispatcher).useEvent = updateEvent; +if (enableUseEffectEventHook) { + (HooksDispatcherOnUpdate: Dispatcher).useEffectEvent = updateEvent; } const HooksDispatcherOnRerender: Dispatcher = { @@ -2879,8 +2879,8 @@ if (enableUseHook) { if (enableUseMemoCacheHook) { (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache; } -if (enableUseEventHook) { - (HooksDispatcherOnRerender: Dispatcher).useEvent = updateEvent; +if (enableUseEffectEventHook) { + (HooksDispatcherOnRerender: Dispatcher).useEffectEvent = updateEvent; } let HooksDispatcherOnMountInDEV: Dispatcher | null = null; @@ -3059,13 +3059,13 @@ if (__DEV__) { if (enableUseMemoCacheHook) { (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache; } - if (enableUseEventHook) { - (HooksDispatcherOnMountInDEV: Dispatcher).useEvent = function useEvent< + if (enableUseEffectEventHook) { + (HooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent = function useEffectEvent< Args, Return, F: (...Array) => Return, >(callback: F): F { - currentHookNameInDev = 'useEvent'; + currentHookNameInDev = 'useEffectEvent'; mountHookTypesDev(); return mountEvent(callback); }; @@ -3214,13 +3214,13 @@ if (__DEV__) { if (enableUseMemoCacheHook) { (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache; } - if (enableUseEventHook) { - (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useEvent = function useEvent< + if (enableUseEffectEventHook) { + (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useEffectEvent = function useEffectEvent< Args, Return, F: (...Array) => Return, >(callback: F): F { - currentHookNameInDev = 'useEvent'; + currentHookNameInDev = 'useEffectEvent'; updateHookTypesDev(); return mountEvent(callback); }; @@ -3369,13 +3369,13 @@ if (__DEV__) { if (enableUseMemoCacheHook) { (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache; } - if (enableUseEventHook) { - (HooksDispatcherOnUpdateInDEV: Dispatcher).useEvent = function useEvent< + if (enableUseEffectEventHook) { + (HooksDispatcherOnUpdateInDEV: Dispatcher).useEffectEvent = function useEffectEvent< Args, Return, F: (...Array) => Return, >(callback: F): F { - currentHookNameInDev = 'useEvent'; + currentHookNameInDev = 'useEffectEvent'; updateHookTypesDev(); return updateEvent(callback); }; @@ -3525,13 +3525,13 @@ if (__DEV__) { if (enableUseMemoCacheHook) { (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache; } - if (enableUseEventHook) { - (HooksDispatcherOnRerenderInDEV: Dispatcher).useEvent = function useEvent< + if (enableUseEffectEventHook) { + (HooksDispatcherOnRerenderInDEV: Dispatcher).useEffectEvent = function useEffectEvent< Args, Return, F: (...Array) => Return, >(callback: F): F { - currentHookNameInDev = 'useEvent'; + currentHookNameInDev = 'useEffectEvent'; updateHookTypesDev(); return updateEvent(callback); }; @@ -3707,13 +3707,13 @@ if (__DEV__) { return useMemoCache(size); }; } - if (enableUseEventHook) { - (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useEvent = function useEvent< + if (enableUseEffectEventHook) { + (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useEffectEvent = function useEffectEvent< Args, Return, F: (...Array) => Return, >(callback: F): F { - currentHookNameInDev = 'useEvent'; + currentHookNameInDev = 'useEffectEvent'; warnInvalidHookAccess(); mountHookTypesDev(); return mountEvent(callback); @@ -3890,13 +3890,13 @@ if (__DEV__) { return useMemoCache(size); }; } - if (enableUseEventHook) { - (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useEvent = function useEvent< + if (enableUseEffectEventHook) { + (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useEffectEvent = function useEffectEvent< Args, Return, F: (...Array) => Return, >(callback: F): F { - currentHookNameInDev = 'useEvent'; + currentHookNameInDev = 'useEffectEvent'; warnInvalidHookAccess(); updateHookTypesDev(); return updateEvent(callback); @@ -4074,13 +4074,13 @@ if (__DEV__) { return useMemoCache(size); }; } - if (enableUseEventHook) { - (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useEvent = function useEvent< + if (enableUseEffectEventHook) { + (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useEffectEvent = function useEffectEvent< Args, Return, F: (...Array) => Return, >(callback: F): F { - currentHookNameInDev = 'useEvent'; + currentHookNameInDev = 'useEffectEvent'; warnInvalidHookAccess(); updateHookTypesDev(); return updateEvent(callback); diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js index 4974f64d9a5cb..f2a1eed3780b6 100644 --- a/packages/react-reconciler/src/ReactInternalTypes.js +++ b/packages/react-reconciler/src/ReactInternalTypes.js @@ -44,7 +44,7 @@ export type HookType = | 'useContext' | 'useRef' | 'useEffect' - | 'useEvent' + | 'useEffectEvent' | 'useInsertionEffect' | 'useLayoutEffect' | 'useCallback' @@ -379,7 +379,9 @@ export type Dispatcher = { create: () => (() => void) | void, deps: Array | void | null, ): void, - useEvent?: ) => Return>(callback: F) => F, + useEffectEvent?: ) => Return>( + callback: F, + ) => F, useInsertionEffect( create: () => (() => void) | void, deps: Array | void | null, diff --git a/packages/react-reconciler/src/__tests__/useEvent-test.js b/packages/react-reconciler/src/__tests__/useEffectEvent-test.js similarity index 92% rename from packages/react-reconciler/src/__tests__/useEvent-test.js rename to packages/react-reconciler/src/__tests__/useEffectEvent-test.js index fecf99679d263..5ebfcf5626843 100644 --- a/packages/react-reconciler/src/__tests__/useEvent-test.js +++ b/packages/react-reconciler/src/__tests__/useEffectEvent-test.js @@ -14,7 +14,7 @@ import {useInsertionEffect} from 'react'; -describe('useEvent', () => { +describe('useEffectEvent', () => { let React; let ReactNoop; let Scheduler; @@ -22,7 +22,7 @@ describe('useEvent', () => { let createContext; let useContext; let useState; - let useEvent; + let useEffectEvent; let useEffect; let useLayoutEffect; let useMemo; @@ -36,7 +36,7 @@ describe('useEvent', () => { createContext = React.createContext; useContext = React.useContext; useState = React.useState; - useEvent = React.experimental_useEvent; + useEffectEvent = React.experimental_useEffectEvent; useEffect = React.useEffect; useLayoutEffect = React.useLayoutEffect; useMemo = React.useMemo; @@ -51,7 +51,7 @@ describe('useEvent', () => { return ; } - // @gate enableUseEventHook + // @gate enableUseEffectEventHook it('memoizes basic case correctly', () => { class IncrementButton extends React.PureComponent { increment = () => { @@ -64,7 +64,7 @@ describe('useEvent', () => { function Counter({incrementBy}) { const [count, updateCount] = useState(0); - const onClick = useEvent(() => updateCount(c => c + incrementBy)); + const onClick = useEffectEvent(() => updateCount(c => c + incrementBy)); return ( <> @@ -117,7 +117,7 @@ describe('useEvent', () => { ]); }); - // @gate enableUseEventHook + // @gate enableUseEffectEventHook it('can be defined more than once', () => { class IncrementButton extends React.PureComponent { increment = () => { @@ -133,8 +133,8 @@ describe('useEvent', () => { function Counter({incrementBy}) { const [count, updateCount] = useState(0); - const onClick = useEvent(() => updateCount(c => c + incrementBy)); - const onMouseEnter = useEvent(() => { + const onClick = useEffectEvent(() => updateCount(c => c + incrementBy)); + const onMouseEnter = useEffectEvent(() => { updateCount(c => c * incrementBy); }); @@ -173,7 +173,7 @@ describe('useEvent', () => { ]); }); - // @gate enableUseEventHook + // @gate enableUseEffectEventHook it('does not preserve `this` in event functions', () => { class GreetButton extends React.PureComponent { greet = () => { @@ -193,7 +193,7 @@ describe('useEvent', () => { }, }; const [greeting, updateGreeting] = useState('Seb says ' + hello); - const onClick = useEvent(person.greet); + const onClick = useEffectEvent(person.greet); return ( <> @@ -222,7 +222,7 @@ describe('useEvent', () => { ]); }); - // @gate enableUseEventHook + // @gate enableUseEffectEventHook it('throws when called in render', () => { class IncrementButton extends React.PureComponent { increment = () => { @@ -239,7 +239,7 @@ describe('useEvent', () => { function Counter({incrementBy}) { const [count, updateCount] = useState(0); - const onClick = useEvent(() => updateCount(c => c + incrementBy)); + const onClick = useEffectEvent(() => updateCount(c => c + incrementBy)); return ( <> @@ -251,7 +251,7 @@ describe('useEvent', () => { ReactNoop.render(); expect(Scheduler).toFlushAndThrow( - "A function wrapped in useEvent can't be called during rendering.", + "A function wrapped in useEffectEvent can't be called during rendering.", ); // If something throws, we try one more time synchronously in case the error was @@ -259,7 +259,7 @@ describe('useEvent', () => { expect(Scheduler).toHaveYielded(['Count: 0', 'Count: 0']); }); - // @gate enableUseEventHook + // @gate enableUseEffectEventHook it("useLayoutEffect shouldn't re-fire when event handlers change", () => { class IncrementButton extends React.PureComponent { increment = () => { @@ -272,7 +272,7 @@ describe('useEvent', () => { function Counter({incrementBy}) { const [count, updateCount] = useState(0); - const increment = useEvent(amount => + const increment = useEffectEvent(amount => updateCount(c => c + (amount || incrementBy)), ); @@ -349,7 +349,7 @@ describe('useEvent', () => { ]); }); - // @gate enableUseEventHook + // @gate enableUseEffectEventHook it("useEffect shouldn't re-fire when event handlers change", () => { class IncrementButton extends React.PureComponent { increment = () => { @@ -362,7 +362,7 @@ describe('useEvent', () => { function Counter({incrementBy}) { const [count, updateCount] = useState(0); - const increment = useEvent(amount => + const increment = useEffectEvent(amount => updateCount(c => c + (amount || incrementBy)), ); @@ -438,7 +438,7 @@ describe('useEvent', () => { ]); }); - // @gate enableUseEventHook + // @gate enableUseEffectEventHook it('is stable in a custom hook', () => { class IncrementButton extends React.PureComponent { increment = () => { @@ -451,7 +451,7 @@ describe('useEvent', () => { function useCount(incrementBy) { const [count, updateCount] = useState(0); - const increment = useEvent(amount => + const increment = useEffectEvent(amount => updateCount(c => c + (amount || incrementBy)), ); @@ -533,7 +533,7 @@ describe('useEvent', () => { ]); }); - // @gate enableUseEventHook + // @gate enableUseEffectEventHook it('is mutated before all other effects', () => { function Counter({value}) { useInsertionEffect(() => { @@ -543,7 +543,7 @@ describe('useEvent', () => { // This is defined after the insertion effect, but it should // update the event fn _before_ the insertion effect fires. - const increment = useEvent(() => { + const increment = useEffectEvent(() => { Scheduler.unstable_yieldValue('Event value: ' + value); }); @@ -557,17 +557,17 @@ describe('useEvent', () => { expect(Scheduler).toHaveYielded(['Effect value: 2', 'Event value: 2']); }); - // @gate enableUseEventHook + // @gate enableUseEffectEventHook it("doesn't provide a stable identity", () => { function Counter({shouldRender, value}) { - const onClick = useEvent(() => { + const onClick = useEffectEvent(() => { Scheduler.unstable_yieldValue( 'onClick, shouldRender=' + shouldRender + ', value=' + value, ); }); // onClick doesn't have a stable function identity so this effect will fire on every render. - // In a real app useEvent functions should *not* be passed as a dependency, this is for + // In a real app useEffectEvent functions should *not* be passed as a dependency, this is for // testing purposes only. useEffect(() => { onClick(); @@ -596,13 +596,13 @@ describe('useEvent', () => { ]); }); - // @gate enableUseEventHook + // @gate enableUseEffectEventHook it('event handlers always see the latest committed value', async () => { let committedEventHandler = null; function App({value}) { - const event = useEvent(() => { - return 'Value seen by useEvent: ' + value; + const event = useEffectEvent(() => { + return 'Value seen by useEffectEvent: ' + value; }); // Set up an effect that registers the event handler with an external @@ -619,7 +619,7 @@ describe('useEvent', () => { }, // Note that we've intentionally omitted the event from the dependency // array. But it will still be able to see the latest `value`. This is the - // key feature of useEvent that makes it different from a regular closure. + // key feature of useEffectEvent that makes it different from a regular closure. [], ); return 'Latest rendered value ' + value; @@ -632,7 +632,7 @@ describe('useEvent', () => { }); expect(Scheduler).toHaveYielded(['Commit new event handler']); expect(root).toMatchRenderedOutput('Latest rendered value 1'); - expect(committedEventHandler()).toBe('Value seen by useEvent: 1'); + expect(committedEventHandler()).toBe('Value seen by useEffectEvent: 1'); // Update await act(async () => { @@ -643,10 +643,10 @@ describe('useEvent', () => { expect(Scheduler).toHaveYielded([]); // But the event handler should still be able to see the latest value. expect(root).toMatchRenderedOutput('Latest rendered value 2'); - expect(committedEventHandler()).toBe('Value seen by useEvent: 2'); + expect(committedEventHandler()).toBe('Value seen by useEffectEvent: 2'); }); - // @gate enableUseEventHook + // @gate enableUseEffectEventHook it('integration: implements docs chat room example', () => { function createConnection() { let connectedCallback; @@ -675,7 +675,7 @@ describe('useEvent', () => { } function ChatRoom({roomId, theme}) { - const onConnected = useEvent(() => { + const onConnected = useEffectEvent(() => { Scheduler.unstable_yieldValue('Connected! theme: ' + theme); }); @@ -735,7 +735,7 @@ describe('useEvent', () => { expect(Scheduler).toHaveYielded(['Connected! theme: dark']); }); - // @gate enableUseEventHook + // @gate enableUseEffectEventHook it('integration: implements the docs logVisit example', () => { class AddToCartButton extends React.PureComponent { addToCart = () => { @@ -760,10 +760,10 @@ describe('useEvent', () => { function Page({url}) { const {items, updateItems} = useContext(ShoppingCartContext); - const onClick = useEvent(() => updateItems([...items, 1])); + const onClick = useEffectEvent(() => updateItems([...items, 1])); const numberOfItems = items.length; - const onVisit = useEvent(visitedUrl => { + const onVisit = useEffectEvent(visitedUrl => { Scheduler.unstable_yieldValue( 'url: ' + visitedUrl + ', numberOfItems: ' + numberOfItems, ); diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js index b8c1e4c92773b..5a2305eb62899 100644 --- a/packages/react-server/src/ReactFizzHooks.js +++ b/packages/react-server/src/ReactFizzHooks.js @@ -32,7 +32,7 @@ import {makeId} from './ReactServerFormatConfig'; import { enableCache, enableUseHook, - enableUseEventHook, + enableUseEffectEventHook, enableUseMemoCacheHook, } from 'shared/ReactFeatureFlags'; import is from 'shared/objectIs'; @@ -507,17 +507,17 @@ export function useCallback( return useMemo(() => callback, deps); } -function throwOnUseEventCall() { +function throwOnUseEffectEventCall() { throw new Error( - "A function wrapped in useEvent can't be called during rendering.", + "A function wrapped in useEffectEvent can't be called during rendering.", ); } -export function useEvent) => Return>( +export function useEffectEvent) => Return>( callback: F, ): F { // $FlowIgnore[incompatible-return] - return throwOnUseEventCall; + return throwOnUseEffectEventCall; } // TODO Decide on how to implement this hook for server rendering. @@ -651,8 +651,8 @@ export const HooksDispatcher: Dispatcher = { if (enableCache) { HooksDispatcher.useCacheRefresh = useCacheRefresh; } -if (enableUseEventHook) { - HooksDispatcher.useEvent = useEvent; +if (enableUseEffectEventHook) { + HooksDispatcher.useEffectEvent = useEffectEvent; } if (enableUseMemoCacheHook) { HooksDispatcher.useMemoCache = useMemoCache; diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js index 04b905efa759e..48caeb5e13894 100644 --- a/packages/react/index.classic.fb.js +++ b/packages/react/index.classic.fb.js @@ -52,7 +52,7 @@ export { useDeferredValue, useDeferredValue as unstable_useDeferredValue, // TODO: Remove once call sights updated to useDeferredValue useEffect, - experimental_useEvent, + experimental_useEffectEvent, useImperativeHandle, useLayoutEffect, useInsertionEffect, diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js index a5b16fcadfc76..876aa3a761758 100644 --- a/packages/react/index.experimental.js +++ b/packages/react/index.experimental.js @@ -44,7 +44,7 @@ export { useDebugValue, useDeferredValue, useEffect, - experimental_useEvent, + experimental_useEffectEvent, useImperativeHandle, useInsertionEffect, useLayoutEffect, diff --git a/packages/react/index.js b/packages/react/index.js index bee9b71e48fed..548c1fe1711ab 100644 --- a/packages/react/index.js +++ b/packages/react/index.js @@ -72,7 +72,7 @@ export { useDebugValue, useDeferredValue, useEffect, - experimental_useEvent, + experimental_useEffectEvent, useImperativeHandle, useInsertionEffect, useLayoutEffect, diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js index 2c446d7bd7f91..68adc9a224641 100644 --- a/packages/react/index.modern.fb.js +++ b/packages/react/index.modern.fb.js @@ -50,7 +50,7 @@ export { useDeferredValue, useDeferredValue as unstable_useDeferredValue, // TODO: Remove once call sights updated to useDeferredValue useEffect, - experimental_useEvent, + experimental_useEffectEvent, useImperativeHandle, useInsertionEffect, useLayoutEffect, diff --git a/packages/react/src/React.js b/packages/react/src/React.js index 399c62f0dc58c..38d40ece0503b 100644 --- a/packages/react/src/React.js +++ b/packages/react/src/React.js @@ -42,7 +42,7 @@ import { useCallback, useContext, useEffect, - useEvent, + useEffectEvent, useImperativeHandle, useDebugValue, useInsertionEffect, @@ -105,7 +105,7 @@ export { useCallback, useContext, useEffect, - useEvent as experimental_useEvent, + useEffectEvent as experimental_useEffectEvent, useImperativeHandle, useDebugValue, useInsertionEffect, diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js index a98fdb9c26cb8..716e40b4f7ad8 100644 --- a/packages/react/src/ReactHooks.js +++ b/packages/react/src/ReactHooks.js @@ -235,8 +235,8 @@ export function useMemoCache(size: number): Array { return dispatcher.useMemoCache(size); } -export function useEvent(callback: T): void { +export function useEffectEvent(callback: T): void { const dispatcher = resolveDispatcher(); // $FlowFixMe This is unstable, thus optional - return dispatcher.useEvent(callback); + return dispatcher.useEffectEvent(callback); } diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index d3c128ae77bbe..8fcd13894c33a 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -121,7 +121,7 @@ export const enableUseHook = true; // auto-memoization. export const enableUseMemoCacheHook = __EXPERIMENTAL__; -export const enableUseEventHook = __EXPERIMENTAL__; +export const enableUseEffectEventHook = __EXPERIMENTAL__; // Test in www before enabling in open source. // Enables DOM-server to stream its instruction set as data-attributes diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 8a6f0dc811f90..6d84e76612421 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -54,7 +54,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = true; export const enableUseHook = true; export const enableUseMemoCacheHook = true; -export const enableUseEventHook = false; +export const enableUseEffectEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; export const enableClientRenderFallbackOnTextMismatch = true; export const enableComponentStackLocations = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index d2e8863e9128a..9b5c301b7d5ba 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -44,7 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; export const enableUseHook = true; export const enableUseMemoCacheHook = false; -export const enableUseEventHook = false; +export const enableUseEffectEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; export const enableClientRenderFallbackOnTextMismatch = true; export const enableComponentStackLocations = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index c3a096acef8c1..45561ee4c5fec 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -44,7 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; export const enableUseHook = true; export const enableUseMemoCacheHook = false; -export const enableUseEventHook = false; +export const enableUseEffectEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; export const enableClientRenderFallbackOnTextMismatch = true; export const enableComponentStackLocations = true; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index 2f88033de445c..dace39942cf2a 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js @@ -52,7 +52,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; export const enableUseHook = true; export const enableUseMemoCacheHook = false; -export const enableUseEventHook = false; +export const enableUseEffectEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; export const enableClientRenderFallbackOnTextMismatch = true; export const createRootStrictEffectsByDefault = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index de05d1a8c1d9b..47ed0529927c6 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -44,7 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; export const enableUseHook = true; export const enableUseMemoCacheHook = false; -export const enableUseEventHook = false; +export const enableUseEffectEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; export const enableClientRenderFallbackOnTextMismatch = true; export const enableComponentStackLocations = true; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js index a239d108dc00f..bfcce69fe7308 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.js @@ -44,7 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; export const enableUseHook = true; export const enableUseMemoCacheHook = false; -export const enableUseEventHook = false; +export const enableUseEffectEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; export const enableClientRenderFallbackOnTextMismatch = true; export const enableComponentStackLocations = true; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js index 441b7647bd4d8..e45ef9d1af50c 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.www.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js @@ -44,7 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = true; export const enableUseHook = true; export const enableUseMemoCacheHook = false; -export const enableUseEventHook = false; +export const enableUseEffectEventHook = false; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; export const enableClientRenderFallbackOnTextMismatch = true; export const enableComponentStackLocations = true; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 1a06367d129ef..89fae798d37b2 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -53,7 +53,7 @@ export const enableCPUSuspense = true; export const enableFloat = true; export const enableUseHook = true; export const enableUseMemoCacheHook = true; -export const enableUseEventHook = true; +export const enableUseEffectEventHook = true; export const enableHostSingletons = true; // Logs additional User Timing API marks for use with an experimental profiling tool. diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json index 022d42e724a85..52fa873e633c2 100644 --- a/scripts/error-codes/codes.json +++ b/scripts/error-codes/codes.json @@ -425,7 +425,7 @@ "437": "the \"precedence\" prop for links to stylesheets expects to receive a string but received something of type \"%s\" instead.", "438": "An unsupported type was passed to use(): %s", "439": "We didn't expect to see a forward reference. This is a bug in the React Server.", - "440": "A function wrapped in useEvent can't be called during rendering.", + "440": "A function wrapped in useEffectEvent can't be called during rendering.", "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.", "442": "The current renderer does not support Resources. This error is likely caused by a bug in React. Please file an issue.", "443": "acquireResource encountered a resource type it did not expect: \"%s\". this is a bug in React.",