Improve ESLint error for improperly named hooks

[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.

[rickhanlonii]

Hey @callmetwan, thanks for submitting. How would you improve the error?

[rickhanlonii]

Looks like you already opened a #20692, let's discuss this there.