Skip to content

Commit 510f053

Browse files
committed
Ignore ReactDOM.useFormState
1 parent 1e97088 commit 510f053

File tree

2 files changed

+48
-11
lines changed

2 files changed

+48
-11
lines changed

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

Lines changed: 46 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -607,8 +607,6 @@ const tests = {
607607
const [state4, dispatch2] = React.useReducer();
608608
const [state5, maybeSetState] = useFunnyState();
609609
const [state6, maybeDispatch] = useFunnyReducer();
610-
const [state7, dispatch3] = useFormState();
611-
const [state8, dispatch4] = ReactDOM.useFormState();
612610
const [state9, dispatch5] = useActionState();
613611
const [state10, dispatch6] = React.useActionState();
614612
const [isPending1] = useTransition();
@@ -628,8 +626,6 @@ const tests = {
628626
setState2();
629627
dispatch1();
630628
dispatch2();
631-
dispatch3();
632-
dispatch4();
633629
dispatch5();
634630
dispatch6();
635631
startTransition1();
@@ -654,7 +650,7 @@ const tests = {
654650
maybeDispatch();
655651
}, [
656652
// Dynamic
657-
state1, state2, state3, state4, state5, state6, state7, state8, state9, state10,
653+
state1, state2, state3, state4, state5, state6, state9, state10,
658654
maybeRef1, maybeRef2,
659655
isPending2, isPending4,
660656
@@ -1502,6 +1498,51 @@ const tests = {
15021498
},
15031499
],
15041500
},
1501+
{
1502+
// Affected code should use React.useActionState instead
1503+
code: normalizeIndent`
1504+
function ComponentUsingFormState(props) {
1505+
const [state7, dispatch3] = useFormState();
1506+
const [state8, dispatch4] = ReactDOM.useFormState();
1507+
useEffect(() => {
1508+
dispatch3();
1509+
dispatch4();
1510+
1511+
// dynamic
1512+
console.log(state7);
1513+
console.log(state8);
1514+
1515+
}, [state7, state8]);
1516+
}
1517+
`,
1518+
errors: [
1519+
{
1520+
message:
1521+
"React Hook useEffect has missing dependencies: 'dispatch3' and 'dispatch4'. " +
1522+
'Either include them or remove the dependency array.',
1523+
suggestions: [
1524+
{
1525+
desc: 'Update the dependencies array to be: [dispatch3, dispatch4, state7, state8]',
1526+
output: normalizeIndent`
1527+
function ComponentUsingFormState(props) {
1528+
const [state7, dispatch3] = useFormState();
1529+
const [state8, dispatch4] = ReactDOM.useFormState();
1530+
useEffect(() => {
1531+
dispatch3();
1532+
dispatch4();
1533+
1534+
// dynamic
1535+
console.log(state7);
1536+
console.log(state8);
1537+
1538+
}, [dispatch3, dispatch4, state7, state8]);
1539+
}
1540+
`,
1541+
},
1542+
],
1543+
},
1544+
],
1545+
},
15051546
{
15061547
code: normalizeIndent`
15071548
function MyComponent(props) {

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -181,8 +181,6 @@ export default {
181181
// ^^^ true for this reference
182182
// const [state, dispatch] = useActionState() / React.useActionState()
183183
// ^^^ true for this reference
184-
// const [state, dispatch] = useFormState() / ReactDOM.useFormState()
185-
// ^^^ true for this reference
186184
// const ref = useRef()
187185
// ^^^ true for this reference
188186
// const onStuff = useEffectEvent(() => {})
@@ -236,11 +234,10 @@ export default {
236234
return false;
237235
}
238236
let callee = init.callee;
239-
// Step into `= React(DOM).something` initializer.
237+
// Step into `= React.something` initializer.
240238
if (
241239
callee.type === 'MemberExpression' &&
242-
(callee.object.name === 'React' ||
243-
callee.object.name === 'ReactDOM') &&
240+
callee.object.name === 'React' &&
244241
callee.property != null &&
245242
!callee.computed
246243
) {
@@ -268,7 +265,6 @@ export default {
268265
} else if (
269266
name === 'useState' ||
270267
name === 'useReducer' ||
271-
name === 'useFormState' ||
272268
name === 'useActionState'
273269
) {
274270
// Only consider second value in initializing tuple stable.

0 commit comments

Comments
 (0)