Rules of usage of Hooks ensure that react components are pure functions and that state update logic in a component is visible from its source code. You can only call Hooks while React is rendering a function component. Because React relies entirely on the order in which Hooks are called to keep track of their data behind the scenes, you have to follow two strict, non-negotiable rules. To ensure this we follow two basic rules:
DO NOT call Hooks inside loops (for, while).
DO NOT call Hooks inside conditions (if statements).
DO NOT call Hooks inside nested functions.
Do not call hooks in Class components Javascript functions, Event handlers and Callback functions
You can call hooks from react Function Components (the functions that render your UI).
You can call hooks from Custom Hooks (your own reusable functions, which must start with the word use, like useAuth or useFetch).
Hooks must be called in the same order on every render. This ensures that React maintains the proper association between state variables and hooks.