🧠 What are Custom Hooks?

• Custom Hooks are user-defined hooks that let you reuse stateful logic across components.
• They are normal JavaScript functions that use one or more of React’s built-in Hooks (useState, useEffect, etc.).
• The key rule → Name must start with “use” (e.g., useTheme, useFetch).

🧩 Why Use Custom Hooks?

• Avoid repeating logic in multiple components.
• Keep components cleaner, focusing more on the UI than on the business logic.
• Promote reusability and consistent patterns across your app.
• Helpful when you have shared logic that depends on hooks.

⚙️ Core Concepts

1. Encapsulation of Logic — you can move repeated logic into a separate function.
2. State Sharing — logic is shared, but state is isolated to each component that uses it.
3. Reusability — multiple components can use the same hook independently.
4. Abstraction — you can abstract away complex side effects into simple reusable hooks.

💡 When to Create a Custom Hook

• You find yourself using the same state + effect logic in multiple components.
• You want to simplify a component that has too much logic.