Skip to content

linter: react-hooks/rules-of-hooks behavior differs from ESLint #23123

Description

@jeanne-cai

What version of Oxlint are you using?

1.68.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/rules-of-hooks': 'error',
    },
});

What happened?

Hi, I noticed that react-hooks/rules-of-hooks behaves differently compared to ESLint. I'm seeing lint errors when calling a function named use or when using React hooks inside a try/catch.

If this behavior is intentional, feel free to close the issue.

Example:

async (_, use) => {
    await use();
};

try {
    useCustomHook();
} catch (error) {
    console.error(error);
}

Output:

  × react-hooks(rules-of-hooks): React Hook "use" cannot be called in an async function. 
   ╭─[test.ts:2:11]
 1 │ async (_, use) => {
   · ──┬──
   ·   ╰── This function is async.
 2 │     await use();
   ·           ──┬──
   ·             ╰── Hook is called here
 3 │ };
   ╰────

  × react-hooks(rules-of-hooks): React Hook "useCustomHook" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.
   ╭─[test.ts:6:5]
 5 │ try {
 6 │     useCustomHook();
   ·     ───────┬───────
   ·            ╰── This Hook call is outside a component or custom Hook.
 7 │ } catch (error) {
   ╰────

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