Hooks should only be called in React function components or custom Hooks. They cannot be used in class components or regular JavaScript functions.
Hooks can be called at the top level of the following:
- React function components
- Custom Hooks (we are going to learn about creating custom Hooks in the next chapter)
As we can see, Hooks are mostly normal JavaScript functions, except that they rely on being defined in a React function component. Of course, custom Hooks that use other Hooks can be defined outside of React function components, but when using Hooks, we always need to make sure that we call them inside a React function component. Next, we are going to learn about the rules regarding the order of Hooks.