What are the rules that must be followed while using React Hooks?

React Hooks impose a set of strict rules to ensure reliable and predictable behavior in functional components. Violating these rules can break the synchronization between state and the component’s render cycle.

1. Only Call Hooks at the Top Level 🚀

   • Don’t call hooks inside loops, conditions, or nested functions.
   • Always invoke hooks unconditionally in the same order on every render.

2. Only Call Hooks from React Functions ⚛️

   • Hooks must be called from functional components or custom hooks—never from regular JavaScript functions.

3. Custom Hook Naming Convention 🏷️

   • Custom hooks must start with the prefix use (e.g., useFetch, useAuth).
   • This signals to React’s linter and tooling that the function follows the Hooks rules.

4. Don’t Call Hooks in Class Components 📚

   • Hooks are designed exclusively for functional components; class components must continue using lifecycle methods and this.state.

5. Use the Linter Plugin 🔍

   • Enabling eslint-plugin-react-hooks in your project automatically warns on rule violations.