What are Custom Hooks?

A Custom Hook is a reusable function in React whose name starts with use and which encapsulates stateful logic by calling built-in Hooks (like useState, useEffect, etc.). Custom Hooks let you share logic across components without repeating code.

1. Encapsulate Logic 🧩

   • Move related Hook calls (state, effects, context) into one function.
   • Keeps components clean by extracting complex or repetitive logic.

2. Composable & Reusable 🔗

   • Any component can call your Custom Hook to reuse the same behavior.
   • Promotes DRY (Don’t Repeat Yourself) and separation of concerns.

3. Follow Hook Rules 📏

   • Must start with use so React’s linter can enforce the Rules of Hooks.
   • You can call other Hooks inside it, but you must not call Hooks in loops or conditions inside your Custom Hook.

4. Works Like a Regular Hook ⚛️

   • Returns values (state, functions, objects) that components can destructure.
   • Can accept parameters to customize its behavior.