Skip to content

Commit a1466f0

Browse files
sebmarkbagesebmarkbage
committed
Rename experimental useEvent to useEffectEvent
1 parent 4dda96a commit a1466f0

File tree

16 files changed

+121
-119
lines changed

16 files changed

+121
-119
lines changed

‎packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7636,7 +7636,7 @@ if (__EXPERIMENTAL__) {
76367636
{
76377637
code: normalizeIndent`
76387638
function MyComponent({ theme }) {
7639-
const onStuff = useEvent(() => {
7639+
const onStuff = useEffectEvent(() => {
76407640
showNotification(theme);
76417641
});
76427642
useEffect(() => {
@@ -7652,7 +7652,7 @@ if (__EXPERIMENTAL__) {
76527652
{
76537653
code: normalizeIndent`
76547654
function MyComponent({ theme }) {
7655-
const onStuff = useEvent(() => {
7655+
const onStuff = useEffectEvent(() => {
76567656
showNotification(theme);
76577657
});
76587658
useEffect(() => {
@@ -7663,14 +7663,14 @@ if (__EXPERIMENTAL__) {
76637663
errors: [
76647664
{
76657665
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. ' +
76677667
'Remove `onStuff` from the list.',
76687668
suggestions: [
76697669
{
76707670
desc: 'Remove the dependency `onStuff`',
76717671
output: normalizeIndent`
76727672
function MyComponent({ theme }) {
7673-
const onStuff = useEvent(() => {
7673+
const onStuff = useEffectEvent(() => {
76747674
showNotification(theme);
76757675
});
76767676
useEffect(() => {

‎packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1050,9 +1050,9 @@ if (__EXPERIMENTAL__) {
10501050
...tests.valid,
10511051
{
10521052
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.
10541054
function MyComponent({ theme }) {
1055-
const onClick = useEvent(() => {
1055+
const onClick = useEffectEvent(() => {
10561056
showNotification(theme);
10571057
});
10581058
useEffect(() => {
@@ -1063,9 +1063,9 @@ if (__EXPERIMENTAL__) {
10631063
},
10641064
{
10651065
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.
10671067
function MyComponent({ theme }) {
1068-
const onClick = useEvent(() => {
1068+
const onClick = useEffectEvent(() => {
10691069
showNotification(theme);
10701070
});
10711071
return <Child onClick={() => onClick()}></Child>;
@@ -1074,9 +1074,9 @@ if (__EXPERIMENTAL__) {
10741074
},
10751075
{
10761076
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.
10781078
function MyComponent({ theme }) {
1079-
const onClick = useEvent(() => {
1079+
const onClick = useEffectEvent(() => {
10801080
showNotification(theme);
10811081
});
10821082
const onClick2 = () => { onClick() };
@@ -1090,13 +1090,13 @@ if (__EXPERIMENTAL__) {
10901090
},
10911091
{
10921092
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.
10951095
function MyComponent({ theme }) {
1096-
const onClick = useEvent(() => {
1096+
const onClick = useEffectEvent(() => {
10971097
showNotification(theme);
10981098
});
1099-
const onClick2 = useEvent(() => {
1099+
const onClick2 = useEffectEvent(() => {
11001100
debounce(onClick);
11011101
});
11021102
useEffect(() => {
@@ -1110,7 +1110,7 @@ if (__EXPERIMENTAL__) {
11101110
{
11111111
code: normalizeIndent`
11121112
const MyComponent = ({theme}) => {
1113-
const onClick = useEvent(() => {
1113+
const onClick = useEffectEvent(() => {
11141114
showNotification(theme);
11151115
});
11161116
return <Child onClick={() => onClick()}></Child>;
@@ -1121,10 +1121,10 @@ if (__EXPERIMENTAL__) {
11211121
code: normalizeIndent`
11221122
function MyComponent({ theme }) {
11231123
const notificationService = useNotifications();
1124-
const showNotification = useEvent((text) => {
1124+
const showNotification = useEffectEvent((text) => {
11251125
notificationService.notify(theme, text);
11261126
});
1127-
const onClick = useEvent((text) => {
1127+
const onClick = useEffectEvent((text) => {
11281128
showNotification(text);
11291129
});
11301130
return <Child onClick={(text) => onClick(text)} />
@@ -1137,7 +1137,7 @@ if (__EXPERIMENTAL__) {
11371137
useEffect(() => {
11381138
onClick();
11391139
});
1140-
const onClick = useEvent(() => {
1140+
const onClick = useEffectEvent(() => {
11411141
showNotification(theme);
11421142
});
11431143
}
@@ -1188,64 +1188,64 @@ if (__EXPERIMENTAL__) {
11881188
{
11891189
code: normalizeIndent`
11901190
function MyComponent({ theme }) {
1191-
const onClick = useEvent(() => {
1191+
const onClick = useEffectEvent(() => {
11921192
showNotification(theme);
11931193
});
11941194
return <Child onClick={onClick}></Child>;
11951195
}
11961196
`,
1197-
errors: [useEventError('onClick')],
1197+
errors: [useEffectEventError('onClick')],
11981198
},
11991199
{
12001200
code: normalizeIndent`
12011201
// This should error even though it shares an identifier name with the below
12021202
function MyComponent({theme}) {
1203-
const onClick = useEvent(() => {
1203+
const onClick = useEffectEvent(() => {
12041204
showNotification(theme)
12051205
});
12061206
return <Child onClick={onClick} />
12071207
}
12081208
1209-
// The useEvent function shares an identifier name with the above
1209+
// The useEffectEvent function shares an identifier name with the above
12101210
function MyOtherComponent({theme}) {
1211-
const onClick = useEvent(() => {
1211+
const onClick = useEffectEvent(() => {
12121212
showNotification(theme)
12131213
});
12141214
return <Child onClick={() => onClick()} />
12151215
}
12161216
`,
1217-
errors: [{...useEventError('onClick'), line: 7}],
1217+
errors: [{...useEffectEventError('onClick'), line: 7}],
12181218
},
12191219
{
12201220
code: normalizeIndent`
12211221
const MyComponent = ({ theme }) => {
1222-
const onClick = useEvent(() => {
1222+
const onClick = useEffectEvent(() => {
12231223
showNotification(theme);
12241224
});
12251225
return <Child onClick={onClick}></Child>;
12261226
}
12271227
`,
1228-
errors: [useEventError('onClick')],
1228+
errors: [useEffectEventError('onClick')],
12291229
},
12301230
{
12311231
code: normalizeIndent`
12321232
// Invalid because onClick is being aliased to foo but not invoked
12331233
function MyComponent({ theme }) {
1234-
const onClick = useEvent(() => {
1234+
const onClick = useEffectEvent(() => {
12351235
showNotification(theme);
12361236
});
12371237
let foo = onClick;
12381238
return <Bar onClick={foo} />
12391239
}
12401240
`,
1241-
errors: [{...useEventError('onClick'), line: 7}],
1241+
errors: [{...useEffectEventError('onClick'), line: 7}],
12421242
},
12431243
{
12441244
code: normalizeIndent`
12451245
// Should error because it's being passed down to JSX, although it's been referenced once
12461246
// in an effect
12471247
function MyComponent({ theme }) {
1248-
const onClick = useEvent(() => {
1248+
const onClick = useEffectEvent(() => {
12491249
showNotification(them);
12501250
});
12511251
useEffect(() => {
@@ -1254,7 +1254,7 @@ if (__EXPERIMENTAL__) {
12541254
return <Child onClick={onClick} />
12551255
}
12561256
`,
1257-
errors: [useEventError('onClick')],
1257+
errors: [useEffectEventError('onClick')],
12581258
},
12591259
{
12601260
code: normalizeIndent`
@@ -1360,10 +1360,10 @@ function classError(hook) {
13601360
};
13611361
}
13621362

1363-
function useEventError(fn) {
1363+
function useEffectEventError(fn) {
13641364
return {
13651365
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 ` +
13671367
'the same component. They cannot be assigned to variables or passed down.',
13681368
};
13691369
}

‎packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export default {
7474
const stateVariables = new WeakSet();
7575
const stableKnownValueCache = new WeakMap();
7676
const functionWithoutCapturedValueCache = new WeakMap();
77-
const useEventVariables = new WeakSet();
77+
const useEffectEventVariables = new WeakSet();
7878
function memoizeWithWeakMap(fn, map) {
7979
return function(arg) {
8080
if (map.has(arg)) {
@@ -158,7 +158,7 @@ export default {
158158
// ^^^ true for this reference
159159
// const ref = useRef()
160160
// ^^^ true for this reference
161-
// const onStuff = useEvent(() => {})
161+
// const onStuff = useEffectEvent(() => {})
162162
// ^^^ true for this reference
163163
// False for everything else.
164164
function isStableKnownHookValue(resolved) {
@@ -229,10 +229,10 @@ export default {
229229
} else if (isUseEventIdentifier(callee) && id.type === 'Identifier') {
230230
for (const ref of resolved.references) {
231231
if (ref !== id) {
232-
useEventVariables.add(ref.identifier);
232+
useEffectEventVariables.add(ref.identifier);
233233
}
234234
}
235-
// useEvent() return value is always unstable.
235+
// useEffectEvent() return value is always unstable.
236236
return true;
237237
} else if (name === 'useState' || name === 'useReducer') {
238238
// Only consider second value in initializing tuple stable.
@@ -645,11 +645,11 @@ export default {
645645
});
646646
return;
647647
}
648-
if (useEventVariables.has(declaredDependencyNode)) {
648+
if (useEffectEventVariables.has(declaredDependencyNode)) {
649649
reportProblem({
650650
node: declaredDependencyNode,
651651
message:
652-
'Functions returned from `useEvent` must not be included in the dependency array. ' +
652+
'Functions returned from `useEffectEvent` must not be included in the dependency array. ' +
653653
`Remove \`${context.getSource(
654654
declaredDependencyNode,
655655
)}\` from the list.`,
@@ -1853,7 +1853,7 @@ function isAncestorNodeOf(a, b) {
18531853

18541854
function isUseEventIdentifier(node) {
18551855
if (__EXPERIMENTAL__) {
1856-
return node.type === 'Identifier' && node.name === 'useEvent';
1856+
return node.type === 'Identifier' && node.name === 'useEffectEvent';
18571857
}
18581858
return false;
18591859
}

‎packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ function isInsideComponentOrHook(node) {
105105

106106
function isUseEventIdentifier(node) {
107107
if (__EXPERIMENTAL__) {
108-
return node.type === 'Identifier' && node.name === 'useEvent';
108+
return node.type === 'Identifier' && node.name === 'useEffectEvent';
109109
}
110110
return false;
111111
}
@@ -130,10 +130,10 @@ export default {
130130
let lastEffect = null;
131131
const codePathReactHooksMapStack = [];
132132
const codePathSegmentStack = [];
133-
const useEventFunctions = new WeakSet();
133+
const useEffectEventFunctions = new WeakSet();
134134

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
137137
// can only be declared within a component or hook at its top level.
138138
function recordAllUseEventFunctions(scope) {
139139
for (const reference of scope.references) {
@@ -147,7 +147,7 @@ export default {
147147
) {
148148
for (const ref of reference.resolved.references) {
149149
if (ref !== reference) {
150-
useEventFunctions.add(ref.identifier);
150+
useEffectEventFunctions.add(ref.identifier);
151151
}
152152
}
153153
}
@@ -571,8 +571,8 @@ export default {
571571
reactHooks.push(node.callee);
572572
}
573573

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
576576
if (
577577
node.callee.type === 'Identifier' &&
578578
(node.callee.name === 'useEffect' ||
@@ -586,19 +586,19 @@ export default {
586586
},
587587

588588
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
590590
// effect or another event function. It isn't being called either.
591591
if (
592592
lastEffect == null &&
593-
useEventFunctions.has(node) &&
593+
useEffectEventFunctions.has(node) &&
594594
node.parent.type !== 'CallExpression'
595595
) {
596596
context.report({
597597
node,
598598
message:
599599
`\`${context.getSource(
600600
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 ` +
602602
'the same component. They cannot be assigned to variables or passed down.',
603603
});
604604
}
@@ -611,14 +611,14 @@ export default {
611611
},
612612

613613
FunctionDeclaration(node) {
614-
// function MyComponent() { const onClick = useEvent(...) }
614+
// function MyComponent() { const onClick = useEffectEvent(...) }
615615
if (isInsideComponentOrHook(node)) {
616616
recordAllUseEventFunctions(context.getScope());
617617
}
618618
},
619619

620620
ArrowFunctionExpression(node) {
621-
// const MyComponent = () => { const onClick = useEvent(...) }
621+
// const MyComponent = () => { const onClick = useEffectEvent(...) }
622622
if (isInsideComponentOrHook(node)) {
623623
recordAllUseEventFunctions(context.getScope());
624624
}

0 commit comments

Comments
 (0)