React Hooks Complete Guide Explained with Examples

// ❌ WRONG — hook called inside an if block
function BadComponent() {
  if (someCondition) {
    const [val, setVal] = useState(0); // Rule violation!
  }
}
 
// ✅ CORRECT — always call at the top level
function GoodComponent() {
  const [val, setVal] = useState(0); // Always at top
 
  if (someCondition) {
    setVal(42); // Using state here is perfectly fine
  }
}

import { useState, useEffect } from 'react';
 
function UserProfile({ userId }) {
  const [user, setUser]       = useState(null);
  const [loading, setLoading] = useState(true);
 
  // Re-fetch whenever userId changes
  useEffect(() => {
    setLoading(true);
 
    fetch(`https://api.example.com/users/${userId}`)
      .then((res) => res.json())
      .then((data) => {
        setUser(data);
        setLoading(false);
      });
 
    // Cleanup runs before the next effect or on unmount
    return () => console.log('Cleanup previous fetch');
  }, [userId]);
 
  if (loading) return <p>Loading...</p>;
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

import { createContext, useContext, useState } from 'react';
 
// Step 1 — Create the context
const ThemeContext = createContext(null);
 
// Step 2 — Build a Provider component
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const toggle = () =>
    setTheme((t) => (t === 'light' ? 'dark' : 'light'));
 
  return (
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
}
 
// Step 3 — Consume anywhere in the tree, no prop drilling
function Navbar() {
  const { theme, toggle } = useContext(ThemeContext);
  return (
    <nav className={theme === 'dark' ? 'bg-black' : 'bg-white'}>
      <span>Theme: {theme}</span>
      <button onClick={toggle}>Toggle 🌓</button>
    </nav>
  );
}
 
function App() {
  return (
    <ThemeProvider>
      <Navbar />
    </ThemeProvider>
  );
}

import { useReducer, useState } from 'react';
 
// Pure function — takes state + action, returns new state
function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return [...state, { id: Date.now(), text: action.text, done: false }];
    case 'TOGGLE':
      return state.map((t) =>
        t.id === action.id ? { ...t, done: !t.done } : t
      );
    case 'DELETE':
      return state.filter((t) => t.id !== action.id);
    default:
      return state;
  }
}
 
function TodoApp() {
  const [todos, dispatch] = useReducer(todoReducer, []);
  const [input, setInput] = useState('');
 
  const add = () => {
    if (!input.trim()) return;
    dispatch({ type: 'ADD', text: input });
    setInput('');
  };
 
  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={add}>Add</button>
      {todos.map((todo) => (
        <div key={todo.id}>
          <span
            className={todo.done ? 'line-through' : ''}
            onClick={() => dispatch({ type: 'TOGGLE', id: todo.id })}
          >
            {todo.text}
          </span>
          <button onClick={() => dispatch({ type: 'DELETE', id: todo.id })}>🗑️</button>
        </div>
      ))}
    </div>
  );
}

import { useState, useCallback, memo } from 'react';
 
// Child wrapped in memo — skips re-render if props unchanged
const Button = memo(({ onClick, label }) => {
  console.log(`Rendering: ${label}`);
  return <button onClick={onClick}>{label}</button>;
});
 
function Parent() {
  const [count, setCount] = useState(0);
  const [other, setOther] = useState(0);
 
  // Stable reference — Button will NOT re-render when 'other' changes
  const increment = useCallback(() => {
    setCount((c) => c + 1);
  }, []);
 
  return (
    <div>
      <p>Count: {count} | Other: {other}</p>
      <Button onClick={increment} label="Increment Count" />
      <button onClick={() => setOther((o) => o + 1)}>Other++</button>
    </div>
  );
}

import { useState, useMemo } from 'react';
 
// Intentionally slow function
function findPrimes(limit) {
  console.log('Recalculating primes...');
  const primes = [];
  for (let i = 2; i <= limit; i++) {
    let isPrime = true;
    for (let j = 2; j < i; j++) {
      if (i % j === 0) { isPrime = false; break; }
    }
    if (isPrime) primes.push(i);
  }
  return primes;
}
 
function PrimeCalculator() {
  const [limit, setLimit]   = useState(100);
  const [darkMode, setDark] = useState(false);
 
  // Only recalculates when 'limit' changes
  // Toggling darkMode does NOT trigger findPrimes again
  const primes = useMemo(() => findPrimes(limit), [limit]);
 
  return (
    <div>
      <input
        type="number"
        value={limit}
        onChange={(e) => setLimit(Number(e.target.value))}
      />
      <p>Primes found: {primes.length}</p>
      <button onClick={() => setDark((d) => !d)}>
        Toggle Dark Mode (no recalculation)
      </button>
    </div>
  );
}

import { useState, useRef, useEffect } from 'react';
 
function SmartForm() {
  const [name, setName] = useState('');
 
  // Job 1 — DOM reference
  const inputRef = useRef(null);
 
  // Job 2 — mutable value, no re-render on change
  const renderCount = useRef(0);
 
  useEffect(() => {
    inputRef.current.focus(); // Auto-focus on mount
  }, []);
 
  useEffect(() => {
    renderCount.current += 1; // Silent counter — no re-render
  });
 
  return (
    <div>
      <input
        ref={inputRef}
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Auto-focused input"
      />
      <p>Render count: {renderCount.current}</p>
    </div>
  );
}

import { useRef, useImperativeHandle, forwardRef } from 'react';
 
// Child — only exposes focus() and clear() to the parent
const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);
 
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => { inputRef.current.value = ''; },
    // inputRef.current is NOT accessible to the parent
  }));
 
  return <input ref={inputRef} placeholder="Controlled externally" />;
});
 
// Parent — can only call focus() and clear()
function Parent() {
  const ref = useRef(null);
  return (
    <div>
      <FancyInput ref={ref} />
      <button onClick={() => ref.current.focus()}>Focus</button>
      <button onClick={() => ref.current.clear()}>Clear</button>
    </div>
  );
}

import { useState, useEffect, useDebugValue } from 'react';
 
function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
 
  useEffect(() => {
    const on  = () => setIsOnline(true);
    const off = () => setIsOnline(false);
    window.addEventListener('online',  on);
    window.addEventListener('offline', off);
    return () => {
      window.removeEventListener('online',  on);
      window.removeEventListener('offline', off);
    };
  }, []);
 
  // DevTools shows: "Online 🟢" or "Offline 🔴"
  useDebugValue(isOnline ? 'Online 🟢' : 'Offline 🔴');
 
  return isOnline;
}
 
function StatusBar() {
  const isOnline = useOnlineStatus();
  return <p>{isOnline ? 'Connected ✅' : 'No Internet ❌'}</p>;
}

import { useState, useEffect } from 'react';
 
// Reusable data-fetching hook
function useFetch(url) {
  const [data, setData]       = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);
 
  useEffect(() => {
    setLoading(true);
    setError(null);
 
    fetch(url)
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
        return res.json();
      })
      .then((d) => { setData(d); setLoading(false); })
      .catch((e) => { setError(e.message); setLoading(false); });
  }, [url]);
 
  return { data, loading, error };
}
 
// Use it in any component — one line of code
function UserList() {
  const { data, loading, error } =
    useFetch('https://jsonplaceholder.typicode.com/users');
 
  if (loading) return <p>Loading users...</p>;
  if (error)   return <p>Error: {error}</p>;
 
  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name} — {user.email}</li>
      ))}
    </ul>
  );
}