Skip to content

Bug: using hooks inside a named forwardRef callback causes a lint error #18254

Closed
@hovsater

Description

@hovsater

My understanding is that hooks are allowed within the render function passed to React.forwardRef. But the Eslint rule, react-hooks/rules-of-hooks, is displeased with the following code:

const Component = forwardRef(function renderComponent(props, ref) {
  useSomeHook();
  return <SomeComponent {...props} ref={ref} />;
});

However, removing the name of the callback function or capitalising the first letter, e.g., RenderComponent , causes the linter to stay happy.

I've also taken a look at #17220 where I can see a test that explicitly test for this case marking it as invalid. Why?

React version: 16.13.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions