Skip to content

Bug: eslint-plugin-react-hooks: Incorrect dependency requirement when using typeof on nested data structures #27335

@jwueller

Description

@jwueller

This issue seems related to #18828, but it's not identical. Using typeof on a primitive value seems to work as expected, but it fails for nested property access.

Version: eslint-plugin-react-hooks@4.6.0

Steps To Reproduce

import { useEffect, useState } from "react";

const Dummy = () => {
    const [foo, setFoo] = useState<{ bar: number }>({ bar: 42 });

    useEffect(() => {
        const square = (x: typeof foo.bar) => x * x;
        setFoo((previous) => ({ ...previous, bar: square(previous.bar) }));
    }, []);
};

The current behavior

This effect clearly doesn't have external (value) dependencies, but I get this:

ESLint: React Hook useEffect has a missing dependency: 'foo'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)

The expected behavior

Using typeof never leads to a dependency requirement, just like in this example doesn't:

import { useEffect, useState } from "react";

const Dummy = () => {
    const [bar, setBar] = useState<number>(42);

    useEffect(() => {
        const square = (x: typeof bar) => x * x;
        setBar(square);
    }, []);
};

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions