React Hooks

import { useState, useEffect, useRef, useCallback } from "react";

// useState — state manage karo
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");
  
  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
      <p>Count: {count} — {name}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <button onClick={() => setCount(c => c - 1)}>-</button>
    </div>
  );
}

// useEffect — side effects handle karo
function UserData({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    setLoading(true);
    
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
    
    // Cleanup
    return () => {
      // Cancel pending requests if component unmounts
    };
  }, [userId]); // userId change hone par re-run
  
  if (loading) return <div>Loading...</div>;
  return <div>{user?.name}</div>;
}

// useRef — DOM access ya mutable values
function Timer() {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef(null);
  
  const start = () => {
    intervalRef.current = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
  };
  
  const stop = () => clearInterval(intervalRef.current);
  
  return <div>{seconds}s <button onClick={start}>Start</button> <button onClick={stop}>Stop</button></div>;
}