[eslint-plugin-react-hooks] Treat useActionState dispatch as stable when isPending is destructured#36683
Open
sarathfrancis90 wants to merge 1 commit into
Conversation
…ith isPending
The exhaustive-deps rule only recognized the dispatch function returned
by useState/useReducer/useActionState as stable when the result was
destructured into a two-element tuple. However, useActionState returns a
three-element tuple, [state, dispatch, isPending], and destructuring the
isPending element caused the rule to stop treating dispatch as stable.
As a result, code like:
const [state, dispatch, isPending] = useActionState(action, 0);
useEffect(() => {
dispatch();
}, []);
produced a false positive: "React Hook useEffect has a missing
dependency: 'dispatch'".
Allow the three-element tuple form for useActionState while keeping
useState and useReducer restricted to two elements. state and isPending
remain dynamic.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
exhaustive-depstreats the dispatch/setter returned byuseState/useReducer/useActionStateas a stable value, so you don't have to list it in a dependency array. But the stability check only fired when the hook result was destructured into exactly two elements.useActionStatereturns three:[state, dispatch, isPending]. As soon as you destructure theisPendingelement, the rule stopped recognizingdispatchas stable and reported a false positive:The two-element form
[state, dispatch]works fine, which is what made this easy to miss. Same false positive as #32062.Fix
Allow the three-element tuple form specifically for
useActionState(useState/useReducerstay restricted to two). The existing branch logic already handles the rest correctly:dispatchis stable, whilestateandisPendingstay dynamic and must still be listed.Test plan
Added valid cases for the
[state, dispatch, isPending]form (bothuseActionStateandReact.useActionState) and an invalid case confirmingstate/isPendingare still required.jestpasses for the fulleslint-plugin-react-hookssuite (3680 tests).