React Hooks – useState useEffect useContext Complete Guide

React Hooks revolution lane ke baad functional components mein state manage karna bilkul asaan ho gaya. Pehle class components use karte the lekin hooks se sab simple ho gaya. Modern React development hooks par heavily depend karta hai.

Hooks Kya Hote Hain

Hooks special functions hote hain jo React ke features ko use karne dete hain. Functional components mein state, lifecycle, aur context use karne ke liye hooks zaroor hote hain. React ke built-in hooks hote hain aur custom hooks bhi bana sakte ho. Hooks logic ko reusable banate hain aur code sharing easy karte hain.

Hooks introduction React 16.8 mein hua tha aur ab standard practice ban gaye hain.

useState Hook Samjhiye

useState hook se component ka apna state hota hai. Jab state change hote hai to component re-render hota hai aur UI update hota hai. useState do values return karta hai – current state aur function jo state update karega. Initial value pass karte hue hook ko initialize karte ho.

Form inputs, counters, toggles – sab kuch ke liye useState use hota hai. Multiple state variables declare kar sakte ho ek component mein. State update function asynchronous hota hai – batching se performance improve hoti hai.

useEffect Hook Explained

useEffect side effects handle karta hai. API calls, DOM manipulation, subscriptions – yeh sab side effects hote hain jo pure functions nahi hain. useEffect dono ek function leta hai aur ek dependency array. Function jab run hona chahiye woh dependency array mein define karte ho.

Empty dependency array means effect sirf ek baar run hoga component mount hone par. Agar dependency array hi na ho to har render par run hoga. Specific dependencies list karte hue fine-grained control milta hai.

Cleanup Function in useEffect

useEffect se ek cleanup function return kar sakte ho jo unmount hone par run hota hai. Subscriptions cancel karne ya timeouts clear karne ke liye cleanup use hota hai. Memory leaks avoid karne ke liye cleanup function zaroori hota hai.

Cleanup function dependency change par bhi run hota hai purana effect ko cancel karne ke liye.

useContext Hook

useContext global state share karne ke liye use hota hai. Prop drilling avoid karte hue context se data pass karte ho. Context create karte hue default value set karte ho. Phir useContext use karke value access karte ho.

Theme, language, user data – yeh sab context mein store kar sakte ho. Context wrapping se application tree organize hoti hai logically.

Custom Hooks Banao

Custom hooks se reusable logic banate ho. Ek custom hook banate hue existing hooks use kar sakte ho aur apna logic add kar sakte ho. useFetch hook banate hue API call aur data fetch handle kar sakte ho. useLocalStorage hook banate hue localStorage handle kar sakte ho.

Custom hooks naming convention: “use” se start hona chahiye – yeh React convention hota hai. Custom hooks logic share karte hue team efficiency improve hoti hai.

Rules of Hooks

Hooks ko sirf top level par use karte ho – loop ya condition ke andar nahi. Sirf React functional components ya custom hooks mein hooks use karte ho. Yeh rules follow na karne se unexpected errors aata hai aur debugging mushkil hoti hai.

ESLint plugins hooks violations catch karte hain automatically.

useReducer Hook

Jab state complex ho to useReducer use karte ho. Reducer pattern se state management clean rehti hai. Redux jaisa pattern locally component mein implement kar sakte ho useReducer se. Multiple related state updates coordinated hote hain efficiently.

useReducer zyada predictable behavior provide karta hai compared to multiple useState calls.

useCallback aur useMemo

useCallback function ko memoize karta hai. useMemo value ko memoize karta hai. Performance optimization ke liye yeh hooks use hote hain. Unnecessary re-renders avoid karte ho in hooks se.

Performance-critical applications mein memoization important hota hai. Premature optimization avoid karte hue targeted optimization karte ho.

useRef Hook

useRef se DOM elements directly access kar sakte ho. Input focus karna ya video play/pause karna – yeh kaam useRef se kar sakte ho. useRef value change hone par re-render nahi hota – yeh uncontrolled behavior enable karta hai.

useRef mutable object return karta hai jo render cycles across persist rehta hai.

useLayoutEffect aur useDebugValue

useLayoutEffect synchronously run hota hai useEffect ke pehle. DOM reads/writes se performance issues prevent karte ho with useLayoutEffect. useDebugValue custom hooks debugging mein helpful hota hai.

Advanced hooks specific use cases cover karte hain specialized scenarios mein.

Practical Examples

Todo app banate hue useState use karte ho. Blog posts fetch karte hue useEffect use karte ho API calls ke time. Theme switcher banate hue useContext use karte ho global theme state ke liye. Form state management useReducer se karte ho complex forms mein.

Real projects mein sab hooks together use hote hain organized tareeqey se.

Best Practices

Hook dependencies carefully specify karo. State structure properly design karo optimization ke liye. Custom hooks reusable aur well-documented banaao. Testing hooks aur components systematically karo. Error boundaries with hooks properly integrate karo.

Production-ready code hooks best practices follow karte hue likho.

Conclusion

React Hooks modern React development ka core hota hai. useState, useEffect, useContext – yeh teeno must-know hooks hain every React developer ke liye. Hooks mastery se complex state logic elegantly handle kar sakte ho. Custom hooks se reusable logic package kar sakte ho effectively. Practice intensive approach se Hooks expert ban jao quickly aur confidently.

Hooks knowledge se modern React applications build kar sakte ho professionally aur efficiently.