🧠 What Are Hooks?

Hooks are special functions that let you “hook into” React’s features.

They were introduced in React 16.8 to give functional components state and lifecycle capabilities (previously available only in class components).

✨ Common Hooks:

• useState ➜ Manages local state in a component.
• useEffect ➜ Runs side effects (like API calls, timers, DOM updates).
• useContext, useRef, useReducer, useMemo ➜ Advanced hooks …

🪄 1️⃣ useState — Managing Component State

🧩 What is State?

State is data that changes over time — and when it changes, the UI updates automatically.

🧱 Syntax

const [stateValue, setStateValue] = useState(initialValue);

• stateValue → the current value of the state
• setStateValue → function used to update the value

Example 1: Simple Counter

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ textAlign: "center" }}>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>➕ Increase</button>
      <button onClick={() => setCount(count - 1)}>➖ Decrease</button>
      <button onClick={() => setCount(0)}>🔁 Reset</button>
    </div>
  );
}

✅ Key Notes: