Hooks संदर्भ
React Hooks संदर्भ आधुनिक रिएक्ट (React) विकास में एक महत्वपूर्ण टूलकिट है, जो डेवलपर्स को functional components में state और lifecycle management की सुविधा देता है। Hooks का मुख्य उद्देश्य class components की जटिलताओं को कम करना और component logic को अधिक modular और reusable बनाना है। useState, useEffect, useReducer, useMemo, useCallback, useContext जैसे Hooks functional components को interactive, efficient और maintainable बनाते हैं।
Hooks का उपयोग तब किया जाता है जब आपको component के अंदर local state या side effects की आवश्यकता होती है। वे data flow और component lifecycle को साफ और predictable बनाते हैं। SPA (Single Page Applications) में Hooks का प्रयोग user interactions, API calls, performance optimization, और component reusability के लिए बेहद उपयोगी है।
इस संदर्भ में आप सीखेंगे कि कैसे core React concepts जैसे components, state management, data flow और lifecycle Hooks के माध्यम से implement किए जाते हैं। साथ ही, common pitfalls जैसे prop drilling, unnecessary re-renders और state mutations से कैसे बचा जाए, यह भी बताया गया है। यह संदर्भ आपको advanced level के Hooks implementation, reusable component patterns और enterprise-ready React projects के लिए best practices समझने में मदद करेगा।
मूल उदाहरण
jsximport React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
console.log('Component updated:', count);
}, [count]);
const increment = () => setCount(prev => prev + 1);
const decrement = () => setCount(prev => prev - 1);
return (
<div style={{ textAlign: 'center', padding: '20px' }}> <h2>React Hook Counter</h2> <p>Current Count: {count}</p> <button onClick={decrement}>-</button> <button onClick={increment}>+</button> </div>
);
}
export default Counter;उपरोक्त उदाहरण में useState Hook local state "count" को manage करता है। setCount के उपयोग से state update होती है और component re-render होता है। useEffect Hook side effects को handle करता है – जैसे document title update और console logging।
Dependency array [count] सुनिश्चित करता है कि useEffect केवल तब execute हो जब count बदलता है, जिससे unnecessary re-renders रोके जाते हैं। यह functional components में class lifecycle methods जैसे componentDidMount और componentDidUpdate को replace करता है।
यह component best practices को follow करता है: state को immutable रखा गया है, logic साफ और readable है, और prop drilling से बचा गया है। यह Hooks की मदद से reusable और maintainable component design को demonstrate करता है।
व्यावहारिक उदाहरण
jsximport React, { useState, useEffect, useMemo } from 'react';
function FilteredList({ items }) {
const [search, setSearch] = useState('');
const filteredItems = useMemo(() => {
return items.filter(item =>
item.toLowerCase().includes(search.toLowerCase())
);
}, [items, search]);
useEffect(() => {
console.log('Filtered items count:', filteredItems.length);
}, [filteredItems]);
return ( <div> <h3>Filtered List using Hooks</h3>
<input
type="text"
placeholder="Filter..."
value={search}
onChange={e => setSearch(e.target.value)}
/> <ul>
{filteredItems.map((item, index) => ( <li key={index}>{item}</li>
))} </ul> </div>
);
}
export default FilteredList;Advanced रिएक्ट (React) Implementation
jsximport React, { useReducer, useEffect, useCallback } from 'react';
function dataReducer(state, action) {
switch (action.type) {
case 'INIT':
return { ...state, loading: true, error: false };
case 'SUCCESS':
return { ...state, loading: false, data: action.payload };
case 'ERROR':
return { ...state, loading: false, error: true };
default:
return state;
}
}
function useFetchData(url) {
const [state, dispatch] = useReducer(dataReducer, {
data: [],
loading: false,
error: false,
});
const fetchData = useCallback(async () => {
dispatch({ type: 'INIT' });
try {
const response = await fetch(url);
const result = await response.json();
dispatch({ type: 'SUCCESS', payload: result });
} catch {
dispatch({ type: 'ERROR' });
}
}, [url]);
useEffect(() => {
fetchData();
}, [fetchData]);
return state;
}
function DataDisplay() {
const { data, loading, error } = useFetchData('[https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)');
if (loading) return <p>Loading data...</p>;
if (error) return <p>Error fetching data.</p>;
return ( <div> <h3>Data Loaded via Hook</h3> <ul>
{data.slice(0, 10).map(item => ( <li key={item.id}>{item.title}</li>
))} </ul> </div>
);
}
export default DataDisplay;React Hooks best practices में reusable logic को encapsulate करने के लिए Custom Hooks का निर्माण, state की immutable updates, और unnecessary re-renders को रोकना शामिल है। Prop drilling को avoid करने के लिए Context API या Custom Hooks का उपयोग किया जा सकता है।
📊 संपूर्ण संदर्भ
| रिएक्ट (React) Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| useState | Local state manage करता है | const [value, setValue] = useState(initial) | useState(0) | State update triggers re-render |
| useEffect | Side effects handle करता है | useEffect(callback, deps) | useEffect(()=>{}, [deps]) | Runs after render |
| useContext | Context access करता है | useContext(Context) | const user = useContext(UserContext) | Avoids prop drilling |
| useReducer | Complex state manage करता है | const [state, dispatch] = useReducer(reducer, init) | useReducer(reducerFn, {}) | State machine handling |
| useMemo | Memoizes computed values | useMemo(fn, deps) | useMemo(()=>calc(a,b), [a,b]) | Prevents unnecessary computations |
| useCallback | Memoizes functions | useCallback(fn, deps) | useCallback(()=>handle(), [deps]) | Prevents child re-renders |
| useRef | DOM or persistent values access | const ref = useRef(initial) | ref.current.focus() | Does not trigger re-render |
| useLayoutEffect | Pre-paint effect | useLayoutEffect(callback, deps) | useLayoutEffect(()=>{}, [deps]) | DOM sync |
| useImperativeHandle | Customize ref | useImperativeHandle(ref, createHandle) | useImperativeHandle(ref, ()=>({...})) | With forwardRef |
| useDebugValue | Debug info | useDebugValue(value) | useDebugValue('Active') | Visible in DevTools |
📊 Complete रिएक्ट (React) Properties Reference
| Property | Values | Default | Description | रिएक्ट (React) Support |
|---|---|---|---|---|
| StrictMode | boolean | false | Warns about potential problems | 16.8+ |
| Suspense | Component | null | Lazy loading | 16.6+ |
| lazy | Function | null | Dynamic import | 16.6+ |
| memo | Function | null | Memoizes components | 16.8+ |
| Profiler | Function | null | Performance measurement | 16.9+ |
| Fragment | JSX grouping | none | Groups elements | 16.2+ |
| forwardRef | Function | null | Forwards refs | 16.3+ |
| Children | Utility | null | Manipulate children | 16.0+ |
| cloneElement | Function | null | Clone element with new props | 16.0+ |
| createContext | Function | null | Create context | 16.3+ |
| createRef | Function | null | Create ref objects | 16.3+ |
संक्षेप और अगले कदम
Hooks संदर्भ React में functional components के लिए state, effects और lifecycle management को modular और reusable बनाता है। इसके mastery से scalable, maintainable और testable architectures बनती हैं।
अगले कदम में Custom Hooks बनाना, Context API का उपयोग, Profiler के माध्यम से performance measure करना, Suspense और server components को integrate करना शामिल हैं। यह Hooks patterns redundancy घटाने, performance सुधारने और professional React development के लिए आवश्यक है।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी