-
Notifications
You must be signed in to change notification settings - Fork 49k
Closed
Labels
Component: ESLint RulesStatus: UnconfirmedA potential issue that we haven't yet confirmed as a bugA potential issue that we haven't yet confirmed as a bug
Description
React version:
react: 16.8.6
eslint-plugin-react-hooks: 4.2.0
Steps To Reproduce
- Properly configure the
react-hooks/exhaustive-deps
ESLint rule - In your code, pass the
deps
argument as read-only array literal:
const useExample = ({ value, callback }: { value: number; callback: (value: number) => void }) => {
useEffect(
() => {
callback(value);
},
// In the next line, the const assertion makes the react-hooks/exhaustive-deps rule to emit an error
[value, callback] as const
);
};
The current behavior
ESLint emits an error: 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)
At the same time, useEffect
hook itself accepts read-only arrays:
// node_modules/@types/react/index.d.ts
type DependencyList = ReadonlyArray<any>;
function useEffect(effect: EffectCallback, deps?: DependencyList): void;
The tsc
with rather strict compilation options success too.
The expected behavior
The react-hooks/exhaustive-deps
rule should accept readonly
array literals as well.
Rationale
A strongly typed deps
parameter is used in a custom hook for type inference.
I'm going to take a look myself once I have a slack time (it should not be complex: something like checking the isReadonly
flag of the array expression node), but would appreciate any input or contribution.
Metadata
Metadata
Assignees
Labels
Component: ESLint RulesStatus: UnconfirmedA potential issue that we haven't yet confirmed as a bugA potential issue that we haven't yet confirmed as a bug