Skip to content

linter: react-hooks/exhaustive-deps reports react hook when using a type assertion #23652

Description

@jeanne-cai

What version of Oxlint are you using?

1.70.0

What command did you run?

yarn oxlint -c oxlint.config.mjs

What does your .oxlintrc.json (or oxlint.config.ts) config file look like?

import { defineConfig } from 'oxlint';

export default defineConfig({
    categories: {
        correctness: 'off',
    },
    plugins: ['react-hooks'],
    rules: {
        'react-hooks/exhaustive-deps': 'error',
    },
});

What happened?

Oxlint reports a false positive for a React hook (React.useRef) when a type assertion (as) is applied to its return value.

test.tsx:

const Component = () => {
    const setRef = React.useRef<(value: string) => void | null>(
        null,
    ) as React.MutableRefObject<(value: string) => void | null>;

    React.useEffect(() => {
        if (setRef.current) {
            console.log(setRef.current);
        }
    }, []);

    return <div>test</div>;
};

Output:

  × react-hooks(exhaustive-deps): React Hook useEffect has a missing dependency: 'setRef'
    ╭─[test.tsx:10:8]
  6 │     React.useEffect(() => {
  7 │         if (setRef.current) {
    ·             ───┬──
    ·                ╰── useEffect uses `setRef` here
  8 │             console.log(setRef.current);
  9 │         }
 10 │     }, []);
    ·        ──
 11 │ 
    ╰────
  help: Either include it or remove the dependency array.

Metadata

Metadata

Assignees

Labels

Type

Fields

Priority

None yet

Effort

None yet

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions