If we stick to the convention of prefixing Hook functions with use, we can automatically enforce the other two rules:
- Only call Hooks from React function components or custom Hooks
- Only call Hooks at the top level (not inside loops, conditions, or nested functions)
In order to enforce the rules automatically, React provides an eslint plugin called eslint-plugin-react-hooks, which will automatically detect when Hooks are used, and will ensure that the rules are not broken. ESLint is a linter, which is a tool that analyzes source code and finds problems such as stylistic mistakes, potential bugs, and programming errors.
In the future, create-react-app is going to include this plugin by default.
