Back to Blog|⚛️ Web Development

React Hooks Complete Guide 2026 — Roman Urdu Mein Seekho

React hooks ka complete guide Roman Urdu mein. useState, useEffect, useContext, useMemo, useCallback, useRef, custom hooks — sab kuch examples ke saath.

UrduCoder

•May 11, 2026•14 min read

React Hooks Complete Guide 2026 — Roman Urdu Mein Seekho

React Hooks Complete Guide — Roman Urdu Mein

React Hooks = modern React ka dil. 2019 mein introduce hue, ab class components dead hain — sab kuch hooks pe shift ho gaya hai.

Agar tum React seekh rahe ho ya already use kar rahe ho lekin hooks confuse karte hain — ye guide tumhare liye hai.

ℹ️ 📋 Is Guide Mein

✅ What are hooks + class components se difference
✅ useState — state manage karna
✅ useEffect — side effects + API calls
✅ useContext — global state without Redux
✅ useRef — DOM elements + persistent values
✅ useMemo + useCallback — performance optimization
✅ useReducer — complex state management
✅ Custom hooks — apne hooks banao
✅ Rules of Hooks — critical do's & don'ts
✅ Common mistakes — beginners traps

1. Hooks Kya Hain?

Hooks = special functions jo React state + lifecycle features function components mein use karne dete hain.

Class Components vs Function Components:

Old way (Class Components) — avoid karo:

class Counter extends React.Component {
  state = { count: 0 };
  
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  
  render() {
    return (
      <button onClick={this.increment}>
        Count: {this.state.count}
      </button>
    );
  }
}

Modern way (Function + Hooks) — use karo:

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Result: 50% kam code, easier to read, modern React.

✅ ✅ Why Hooks Win

Less code — verbose this.state aur this.setState gone
Easier to share logic — custom hooks
Better performance — React optimizes hooks
Future-proof — sare libraries hooks ke saath integrate ho rahe hain

2. useState — State Management

Most common hook. Component ka state create karta hai.

Basic Syntax:

import { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
  //     ↑          ↑              ↑
  //   value     updater        initial value
  
  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

Multiple State Variables:

function UserForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [age, setAge] = useState(0);
  
  return (
    <form>
      <input value={name} onChange={e => setName(e.target.value)} />
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <input value={age} onChange={e => setAge(Number(e.target.value))} />
    </form>
  );
}

Object State (Common Pattern):

function UserProfile() {
  const [user, setUser] = useState({
    name: '',
    email: '',
    age: 0
  });
  
  // ❌ Wrong - direct mutation
  // user.name = 'Babar';
  
  // ✅ Correct - spread operator
  const updateName = (newName) => {
    setUser({ ...user, name: newName });
  };
  
  // ✅ Better - function updater (avoid stale state)
  const updateEmail = (newEmail) => {
    setUser(prev => ({ ...prev, email: newEmail }));
  };
}

Array State:

function TodoList() {
  const [todos, setTodos] = useState([]);
  
  // Add todo
  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text, done: false }]);
  };
  
  // Remove todo
  const removeTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
  
  // Toggle todo
  const toggleTodo = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, done: !todo.done } : todo
    ));
  };
}

🎯 useState Best Practice

Function updater use karo jab new state pichle pe depend karti ho:

// ❌ Risky (stale state issue)
setCount(count + 1);
 
// ✅ Safe
setCount(prev => prev + 1);

Especially multiple updates ya async code mein critical.

3. useEffect — Side Effects

Side effects = component ke bahar ka kaam (API calls, timers, subscriptions).

Basic Syntax:

import { useEffect, useState } from 'react';
 
function UserList() {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    // Side effect: fetch users
    fetch('https://api.example.com/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []); // ← Empty array = run ONCE on mount
  
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

Dependency Array Magic:

// 1. Run on every render (rare, usually avoid):
useEffect(() => {
  console.log('Runs on every render');
});
 
// 2. Run ONCE on mount (most common):
useEffect(() => {
  console.log('Runs once when component mounts');
}, []); // Empty deps
 
// 3. Run when specific value changes:
useEffect(() => {
  console.log('Runs when userId changes');
}, [userId]); // Re-runs only when userId changes
 
// 4. Run when multiple values change:
useEffect(() => {
  console.log('Runs when name or age changes');
}, [name, age]);

Cleanup Function:

Critical for subscriptions, timers, listeners:

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    
    // Cleanup function
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
}

Cleanup runs:

Component unmount hone pe
Effect re-run hone se pehle (dependency change)

Real Example: Window Resize Listener

function ScreenSize() {
  const [width, setWidth] = useState(window.innerWidth);
  
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    
    window.addEventListener('resize', handleResize);
    
    // Cleanup: remove listener on unmount
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return <p>Window width: {width}px</p>;
}

🚫 ⚠️ useEffect Mistakes

Missing dependencies — ESLint warning ignore karna
No cleanup — memory leaks
Infinite loops — state update inside effect without proper deps

Async function direct karna:

// ❌ Wrong
useEffect(async () => { ... }, []);
 
// ✅ Right
useEffect(() => {
  async function fetchData() { ... }
  fetchData();
}, []);

4. useContext — Global State Without Redux

useContext = props drilling se bachata hai.

Problem (Props Drilling):

// 5 levels deep prop passing — ugly
<App user={user}>
  <Header user={user}>
    <Nav user={user}>
      <UserMenu user={user}>
        <Avatar user={user} />
      </UserMenu>
    </Nav>
  </Header>
</App>

Solution (Context):

Step 1: Create Context

import { createContext, useContext, useState } from 'react';
 
const UserContext = createContext(null);
 
export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}
 
// Custom hook for easy access
export function useUser() {
  return useContext(UserContext);
}

Step 2: Wrap App

// app/layout.tsx
<UserProvider>
  <App />
</UserProvider>

Step 3: Use Anywhere

function Avatar() {
  const { user } = useUser(); // No prop drilling!
  return <img src={user.avatar} />;
}

Real Use Cases:

Auth state (logged in user)
Theme (dark/light mode)
Language (translation strings)
Cart (e-commerce)

5. useRef — DOM References + Persistent Values

useRef ka 2 uses hain:

Use Case 1: DOM Reference

function FocusInput() {
  const inputRef = useRef(null);
  
  const handleFocus = () => {
    inputRef.current.focus(); // Direct DOM access
  };
  
  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </>
  );
}

Use Case 2: Persistent Value (No Re-renders)

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef(null);
  
  const start = () => {
    intervalRef.current = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
  };
  
  const stop = () => {
    clearInterval(intervalRef.current);
  };
  
  return (
    <>
      <p>Seconds: {seconds}</p>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </>
  );
}

ℹ️ 💡 useState vs useRef

useState: Re-renders component when value changes
useRef: Does NOT re-render — silent storage
Use ref: jab value chahiye but UI update nahi karna

6. useMemo — Expensive Calculations

Problem: Expensive computation every render pe chal raha hai.

function ProductList({ products, filter }) {
  // ❌ Re-runs on EVERY render (slow)
  const filteredProducts = products.filter(p => 
    p.name.toLowerCase().includes(filter.toLowerCase())
  ).sort((a, b) => a.price - b.price);
  
  return (
    <ul>
      {filteredProducts.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

useMemo Solution:

import { useMemo } from 'react';
 
function ProductList({ products, filter }) {
  // ✅ Only re-runs when products OR filter change
  const filteredProducts = useMemo(() => {
    return products
      .filter(p => p.name.toLowerCase().includes(filter.toLowerCase()))
      .sort((a, b) => a.price - b.price);
  }, [products, filter]);
  
  return (
    <ul>
      {filteredProducts.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

When to Use useMemo:

✅ Expensive calculations (sorting, filtering large arrays)
✅ Stable object/array references for child props
❌ Don't over-use — adds memory + complexity

7. useCallback — Memoize Functions

Problem: Function recreated on every render — causes unnecessary re-renders in child components.

function TodoList({ items }) {
  // ❌ New function reference every render
  const handleClick = (id) => {
    console.log('Clicked:', id);
  };
  
  return items.map(item => (
    <TodoItem 
      key={item.id} 
      item={item} 
      onClick={handleClick} // Child re-renders unnecessarily
    />
  ));
}

useCallback Solution:

import { useCallback } from 'react';
 
function TodoList({ items }) {
  // ✅ Same function reference unless deps change
  const handleClick = useCallback((id) => {
    console.log('Clicked:', id);
  }, []); // Empty deps - never recreates
  
  return items.map(item => (
    <TodoItem key={item.id} item={item} onClick={handleClick} />
  ));
}

🎯 useMemo vs useCallback

useMemo: Memoize a value (result of function)
useCallback: Memoize a function itself

const memoizedValue = useMemo(() => compute(), [deps]);
const memoizedFunction = useCallback(() => doSomething(), [deps]);

useCallback(fn, deps) is shorthand for useMemo(() => fn, deps).

8. useReducer — Complex State

useReducer = useState ka powerful brother. Complex state logic ke liye.

When to Use:

Multiple related state values
Complex state transitions
Same logic re-used in multiple places

Example: Counter With Actions

import { useReducer } from 'react';
 
const initialState = { count: 0, history: [] };
 
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1,
        history: [...state.history, state.count + 1]
      };
    case 'DECREMENT':
      return {
        count: state.count - 1,
        history: [...state.history, state.count - 1]
      };
    case 'RESET':
      return initialState;
    default:
      return state;
  }
}
 
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <div>
      <p>Count: {state.count}</p>
      <p>History: {state.history.join(', ')}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
    </div>
  );
}

Real Use Case: Form Management

function formReducer(state, action) {
  switch (action.type) {
    case 'SET_FIELD':
      return { ...state, [action.field]: action.value };
    case 'SET_ERRORS':
      return { ...state, errors: action.errors };
    case 'RESET':
      return initialFormState;
    default:
      return state;
  }
}

9. Custom Hooks — Logic Reuse

Custom hooks = apni functions jo use se start hoti hain.

Example: useToggle

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  
  const toggle = useCallback(() => setValue(v => !v), []);
  
  return [value, toggle];
}
 
// Usage:
function MyComponent() {
  const [isOpen, toggleOpen] = useToggle(false);
  
  return (
    <>
      <button onClick={toggleOpen}>Toggle</button>
      {isOpen && <div>Content visible</div>}
    </>
  );
}

Example: useFetch

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, [url]);
  
  return { data, loading, error };
}
 
// Usage:
function UserProfile({ userId }) {
  const { data: user, loading, error } = useFetch(`/api/users/${userId}`);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error!</div>;
  return <div>{user.name}</div>;
}

Example: useLocalStorage

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });
  
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  
  return [value, setValue];
}
 
// Usage:
function ThemeSettings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Current: {theme}
    </button>
  );
}

10. Rules of Hooks — CRITICAL

🚫 ⚠️ Hooks Rules (MUST Follow)

Only call hooks at the top level — not inside loops, conditions, or nested functions
Only call hooks from React functions — not regular JavaScript functions
Always call hooks in the same order — for predictability

Wrong vs Right:

// ❌ Wrong - conditional hook
function Bad({ condition }) {
  if (condition) {
    const [data, setData] = useState();
  }
}
 
// ✅ Right - always at top
function Good({ condition }) {
  const [data, setData] = useState();
  
  if (condition) {
    // use data here
  }
}

// ❌ Wrong - in loop
function Bad({ items }) {
  items.forEach(item => {
    const [state, setState] = useState();
  });
}
 
// ✅ Right - extract to component
function Bad({ items }) {
  return items.map(item => <ItemRow key={item.id} item={item} />);
}
 
function ItemRow({ item }) {
  const [state, setState] = useState(); // OK at top of component
}

11. Common Mistakes — Beginner Traps

🚫 ❌ Top Hook Mistakes

Updating state during render:

// ❌ Infinite loop!
function Bad() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // Runs every render
}

Stale closures:

// ❌ Wrong - count might be stale
useEffect(() => {
  setInterval(() => setCount(count + 1), 1000);
}, []);
 
// ✅ Right - function updater
useEffect(() => {
  setInterval(() => setCount(c => c + 1), 1000);
}, []);

Missing cleanup:

// ❌ Memory leak
useEffect(() => {
  window.addEventListener('scroll', handler);
}, []);
 
// ✅ Cleanup
useEffect(() => {
  window.addEventListener('scroll', handler);
  return () => window.removeEventListener('scroll', handler);
}, []);

Mutating state directly:

// ❌ React won't detect change
items.push(newItem);
setItems(items);
 
// ✅ Create new array
setItems([...items, newItem]);

useEffect dependencies bhulna:

// ❌ Stale data
useEffect(() => {
  fetchData(userId);
}, []); // Missing userId
 
// ✅ Include all dependencies
useEffect(() => {
  fetchData(userId);
}, [userId]);

12. Performance Tips

When to Optimize:

⚠️ ⚠️ Don't Premature Optimize

useMemo aur useCallback bohat use karne se performance down ho sakti hai. Pehle measure karo, phir optimize.

Use them when:

Expensive calculations
Passing to memoized child components
Profiler shows slow renders

React.memo for Components:

const MemoizedTodoItem = React.memo(function TodoItem({ item }) {
  return <li>{item.text}</li>;
});
 
// Only re-renders if item prop changes

13. React 19 New Hooks (2026 Update)

useActionState

Form actions + state combine karta hai:

import { useActionState } from 'react';
 
function ContactForm() {
  const [state, formAction, isPending] = useActionState(
    async (prevState, formData) => {
      // Submit form
      return { message: 'Sent!' };
    },
    { message: '' }
  );
  
  return (
    <form action={formAction}>
      <input name="email" />
      <button disabled={isPending}>
        {isPending ? 'Sending...' : 'Submit'}
      </button>
      {state.message && <p>{state.message}</p>}
    </form>
  );
}

useFormStatus

Form submission state:

import { useFormStatus } from 'react-dom';
 
function SubmitButton() {
  const { pending } = useFormStatus();
  
  return (
    <button disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

🎯 Hooks Cheat Sheet

Built-in React Hooks

Hook	Use Case
useState	Component state
useEffect	Side effects, API calls
useContext	Global state without prop drilling
useReducer	Complex state logic
useRef	DOM access, persistent values
useMemo	Memoize values
useCallback	Memoize functions
useLayoutEffect	Synchronous effects
useImperativeHandle	Customize ref exposure
useDebugValue	DevTools labels
useId	Unique IDs for forms

14. Practice Project — Aaj Try Karo

Mini Todo App With Hooks:

import { useState, useEffect } from 'react';
 
function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
  
  // Load from localStorage
  useEffect(() => {
    const saved = localStorage.getItem('todos');
    if (saved) setTodos(JSON.parse(saved));
  }, []);
  
  // Save to localStorage
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);
  
  const addTodo = () => {
    if (!input.trim()) return;
    setTodos([...todos, { id: Date.now(), text: input, done: false }]);
    setInput('');
  };
  
  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={addTodo}>Add</button>
      
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

Next.js 16 Beginner Guide (React + Next.js)
TypeScript Basics for JS Devs (Add types to React)
JavaScript Async/Await (Foundation skill)
Cursor AI Complete Guide (AI-powered React coding)

Konsa hook samajhne mein time laga? Comment mein batao — specific example ke saath samjhaunga.

Pakistani devs ke saath share karo 🇵🇰

Happy Hooking! ⚛️

Tags:#react#hooks#javascript#tutorial#frontend#useState#useEffect

Written by UrduCoder

Pakistan ka #1 Roman Urdu coding blog. Hum AI, Web Dev, aur tech tutorials publish karte hain har hafte.

⚛️

Web Development⭐ Featured

TypeScript Basics — JavaScript Developers Ke Liye Roman Urdu Guide

TypeScript ka complete beginner guide JavaScript developers ke liye. Types, interfaces, generics, React mein use — sab kuch examples ke saath Roman Urdu mein.

UrduCoder·May 11, 2026

11 min read

⚛️

Web Development⭐ Featured

Next.js 14 Complete Course - Roman Urdu Mein Seekho

Next.js 14 ka A-to-Z course Roman Urdu mein. App Router, Server Components, aur modern web development ki har cheez.

UrduCoder·Apr 25, 2026

2 min read

⚛️

Web Development⭐ Featured

Next.js 16 Complete Beginner Guide — Roman Urdu Mein Seekho

Next.js 16 ka complete beginner guide Roman Urdu mein. Turbopack, App Router, Server Components, React 19, async params — sab kuch step-by-step examples ke saath.

UrduCoder·May 11, 2026

11 min read

Written by UrduCoder

Related Posts

TypeScript Basics — JavaScript Developers Ke Liye Roman Urdu Guide

Next.js 14 Complete Course - Roman Urdu Mein Seekho

Next.js 16 Complete Beginner Guide — Roman Urdu Mein Seekho