Skip to content

Bug: react-hooks/exhaustive-deps false positive when deps is defined with typescript const typing #20162

Closed
@tranvansang

Description

@tranvansang

React version: 17.0.1

Steps To Reproduce

  1. Setup eslint with @typescript-eslint/parser as parser
  2. Add as const to the deps array
function MyComp() {
	const [state, setState] = useState()
	useEffect(() => {
		console.log(state)
	}, [state] as const)
	return 'Hello, world'
}

Link to code example: https://github.com/tranvansang/exhaustive-deps-bug-1

The current behavior

The following errors were reported

  5:5  warning  React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies  react-hooks/exhaustive-deps
  5:5  warning  React Hook useEffect has a missing dependency: 'state'. Either include it or remove the dependency array  

The expected behavior

The rule should interpret the deps argument correctly.

_

Why do I need to add as const to the deps array?

I build my own custom effect hook (with the additionalHooks option in .eslintrc), in which a tuple typing gives more type hint to the code.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions