React Hooks — Introduction

🔍 What Are Hooks in React?

Hooks are special functions in React that let you use state, lifecycle features, and other logic inside functional components.

Before Hooks, only class components could use state and lifecycle methods. Hooks brought this power to functional components, making them the new standard.

---

🧠 Why Use Hooks?

Hooks allow you to:

• ✅ Add state to functional components
• 🔁 Handle side effects (e.g., data fetching)
• 🧩 Share logic between components without duplication
• 💡 Replace class component patterns with cleaner syntax

---

✅ Rules of Hooks

React enforces 2 key rules:

1. Only call Hooks at the top level (not inside loops, conditions, or nested functions)
2. Only call Hooks from React functions (React components or custom hooks)

---

🧰 Where Are Hooks Used?

Hook Type	Purpose
State Hooks	Manage data in a component (useState)
Effect Hooks	Perform side effects (useEffect)
Context Hooks	Access global data (useContext)
Ref Hooks	Access DOM or store values (useRef)
Custom Hooks	Reuse logic across components

---

📥 Basic Example Using a Hook

🧠 What’s Happening?

• useState(0) initializes count to 0
• setCount() updates it
• React re-renders the component when state changes

---

📌 Summary

Feature	Explanation
Hooks	Functions to use React features in functional components
Replaces	Class methods like this.state, componentDidMount
Common Hooks	useState, useEffect, useContext, etc.
Cleaner Code	Less boilerplate, easier testing
Reusable Logic	Custom Hooks can share logic between components

---

👉 What’s Next?

You’ll learn each Hook in detail:

• useState
• useEffect
• useContext
• useRef
• useReducer
• Custom Hooks

Each topic will have its own page and slug for reference.