Skip to content

[eslint-plugin-react-hooks] Apply the rules of hooks to a forwardRef-wrapped component #17220

Closed
@dprgarner

Description

@dprgarner

Do you want to request a feature or report a bug?
Feature (to catch potential bugs)

What is the current behavior?
The react-hooks/rules-of-hooks ESLint rule catches uses of hooks in conditionals in components, but does not recognise an anonymous function wrapped in forwardRef as a component.

The following example breaks the rules of hooks, but isn't caught by the rule:

// This should fail
const FancyButton = React.forwardRef((props, ref) => {
  if (props.fancy) {
    useCustomHook();
  }
  return <button ref={ref}>{props.children}</button>;
});

What is the expected behavior?
The above example should be caught by react-hooks/rules-of-hooks, and raise the "React Hook "useCustomHook" is called conditionally" error.

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