There are mainly two rules in order to use hooks:
- Only call Hooks at the top level of your react functions i.e., we should not call Hooks inside loops, conditions, or nested functions. This will ensure that Hooks are called in the same order each time a component renders and it preserves the state of Hooks between multiple useState and useEffect calls.
- Call Hooks from React Functions only i.e., we should not call Hooks from regular JavaScript functions.