Skip to content

Bug: react-hooks/exhaustive-deps does not accept readonly arrays as deps #25844

@milichev

Description

@milichev

React version:

react: 16.8.6
eslint-plugin-react-hooks: 4.2.0

Steps To Reproduce

  1. Properly configure the react-hooks/exhaustive-deps ESLint rule
  2. 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.

image

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

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions