Summary

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 is not clear from the error that the issue is the name. This PR simply adds more information to the error reported.

Test Plan

Create a new React project.

Create a custom hook that does not begin with the word use:

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

Run yarn lint, yarn linc, or view IDE reported lint warnings.

The message should be:

Lint: 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 should start with the word use.

Emphasis added for my addition.