Skip to content

Improve ESLint error for improperly named hooks #20691

@callmetwan

Description

@callmetwan

The ESLint rule eslint-plugin-react-hooks enforces a naming convention on hooks; they must all start with use. This is in line with the documentation around writing custom hooks. This is all good, works as intended.

The error message you get does not tell you this though. Example:

const doesNotStartWithUse = () => {
  useEffect(() => {}, []);
};

Resulting message:

ESLint: React Hook "useEffect" is called in function "doesNotStartWithUse" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter.(react-hooks/rules-of-hooks)

It isn't clear from the error that the issue is the name. I intend to put a PR up for this; I created this issue as the contribution guide recommended it in the event the PR isn't accepted so others have something to search against.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions