Skip to content

linter: react/rules-of-hooks should report invalid useEffectEvent escapes #23744

Description

@KentoMoriwaki

What version of Oxlint are you using?

1.70.0

What command did you run?

oxlint -c .oxlintrc.json

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

{
  "categories": {
    "correctness": "off"
  },
  "plugins": ["react"],
  "rules": {
    "react/rules-of-hooks": "error"
  }
}

What happened?

react/rules-of-hooks does not appear to report some invalid useEffectEvent usages that are reported by eslint-plugin-react-hooks.

Minimal reproduction:

import { useEffectEvent } from "react";

function MyComponent({ theme }) {
  const onClick = useEffectEvent(() => {
    showNotification(theme);
  });

  return <Child onClick={onClick} />;
}

Expected: this should be reported because an Effect Event is passed outside the component/hook where it was created.

Another related case:

import { useEffectEvent } from "react";

function useCustomHook() {
  const onEvent = useEffectEvent(() => {});

  return { onEvent };
}

Expected: this should be reported because the Effect Event escapes the custom hook.

React docs say that Effect Events can only be called from inside Effects or other Effect Events, and should not be passed to other components or hooks:

https://react.dev/reference/react/useEffectEvent

eslint-plugin-react-hooks has test coverage for these cases in ESLintRulesOfHooks-test.js:

https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/tests/ESLintRulesOfHooks-test.js

Related upstream React fix for inline JSX prop escapes:

react/react#34793
react/react#34820

oxlint already has support for useEffectEvent in react/exhaustive-deps via:

#14041

This issue is specifically about react/rules-of-hooks enforcing the useEffectEvent escape/call-site restrictions.

Metadata

Metadata

Assignees

No one assigned

    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