React-hooks/exhaustive-deps

Let’s take a look at some best practices for using React Hooks to ensure you’re writing clean, efficient, and maintainable code.

Hooks should not be called within loops, conditions, or nested functions since conditionally executed Hooks can cause unexpected bugs. Avoiding such situations ensures that Hooks are called in the correct order each time the component renders.

Instead, always use Hooks at the top level of your React function, before any early returns . By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

The useState hook is the most basic and useful React hook. Like other built-in hooks, this hook must be imported from react to be used in our application. To initialize the state, we must declare both the state and its updater function and pass an initial value.