🔥 React Core Hooks (Must know)
| HOOK | Power | Detail |
|---|---|---|
| useState | Yaad rakhna | Component ke andar value store & update (counter, toggle, form, modal) |
| useEffect | Time ke baad kaam | Render ke baad code run (API, bootstrap JS, events) |
| useContext | Global baat | Global state share (user, cart, theme) |
| useReducer | Rule-based state | Complex state logic (cart, multi-actions) |
| useRef | Cheez pakadna | DOM reference, timer, previous value |
| useMemo | Dimag bachana | Heavy calculation optimize |
| useCallback | Function freeze | Unnecessary re-render se bachav |
🟢 Next.js Specific Hooks (VERY IMPORTANT)
| HOOK | Power | Detail |
|---|---|---|
| “use client” | Browser me chalana | Hooks & browser APIs allow karta hai |
| useParams | URL data | Dynamic route value nikalna |
| useRouter | Navigation | Programmatic redirect (push, replace) |
| useSearchParams | Query string | ?page=1&sort=price jaise params |
| usePathname | Current URL | Active menu highlight |
🟡 Special Rendering Files (Next.js Concepts)
| File | Power | Detail |
|---|---|---|
| layout.tsx | Common layout | Header / footer wrapper |
| page.tsx | Route | URL banata hai |
| loading.tsx | Loader | Page load ke beech UI |
| error.tsx | Error UI | Page crash fallback |
| not-found.tsx | 404 | Custom not found page |
🔵 Data & Rendering Concepts (Important)
| Concept | Matlab |
|---|---|
| Server Component | Default, fast, SEO |
| Client Component | Interactive UI |
| SSR | Server Side Rendering |
| CSR | Client Side Rendering |
| Hydration | Server HTML → React |
| Props | Parent → Child data |
🟣 Navigation & UI Utilities
| Term | Use |
|---|---|
| Link | Fast navigation |
| Image | Optimized images |
| Metadata | SEO (title, description) |
🧠 Custom Hook (Advanced but IMPORTANT)
| Term | Detail |
|---|---|
| Custom Hook | Apna hook banana (useSomething) to reuse logic |
Example: