लोड हो रहा है...

अतिरिक्त संसाधन

रिएक्ट (React) में अतिरिक्त संसाधन वे उन्नत टूल्स, हुक्स, लाइब्रेरीज़ और डिज़ाइन पैटर्न हैं, जो डेवलपर्स को अधिक प्रदर्शनक्षम, स्केलेबल और मेंटेन करने योग्य एप्लिकेशन बनाने में मदद करते हैं। ये संसाधन आधुनिक Single Page Applications (SPA) में अत्यंत महत्वपूर्ण हैं, क्योंकि यहाँ state management, data flow और component lifecycle का कुशल प्रबंधन उपयोगकर्ता अनुभव और प्रदर्शन के लिए आवश्यक है।
अतिरिक्त संसाधन का उपयोग विभिन्न परिस्थितियों में किया जाता है। उदाहरण के लिए, useState और useReducer स्थानीय या जटिल स्टेट प्रबंधन के लिए, जबकि Context API या Redux ग्लोबल स्टेट मैनेजमेंट के लिए प्रयोग किए जाते हैं। useEffect हुक साइड इफेक्ट्स को संभालता है और React.memo, useCallback या Lazy Loading जैसे टूल्स रेंडरिंग को अनुकूलित करने में मदद करते हैं।
इस दस्तावेज़ में, आप सीखेंगे कि कैसे अतिरिक्त संसाधन का उपयोग कर सकते हैं, जिसमें फॉर्च्ड स्टेट मैनेजमेंट, component architecture, performance optimization और lifecycle management शामिल हैं। यह गाइड आपको SPA विकास में दक्ष बनाएगा और React के best practices के अनुसार robust एप्लिकेशन तैयार करने में मार्गदर्शन देगा।

मूल उदाहरण

jsx
JSX Code 
import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

const increment = () => setCount(prev => prev + 1);
const decrement = () => setCount(prev => prev - 1);

return (
<div style={{ padding: '20px', textAlign: 'center' }}> <h2>सरल काउंटर</h2> <p>वर्तमान मान: {count}</p> <button onClick={increment}>बढ़ाएँ</button> <button onClick={decrement}>घटाएँ</button> </div>
);
}

export default Counter;

यह उदाहरण रिएक्ट में अतिरिक्त संसाधन के प्रयोग को दर्शाता है, जिसमें useState के माध्यम से local state management शामिल है। setCount को functional update के साथ प्रयोग किया गया है, ताकि state immutable बनी रहे और unnecessary re-renders से बचा जा सके।
Counter component component-based architecture का पालन करता है, UI और logic को अलग रखता है और high reusability सुनिश्चित करता है। beginners के लिए यह समझना महत्वपूर्ण है कि useState reactive डेटा flow सुनिश्चित करता है। JSX declarative rendering के लिए प्रयोग किया जाता है। उचित naming conventions और best practices को अपनाकर code readability और maintainability बढ़ती है।

व्यावहारिक उदाहरण

jsx
JSX Code 
import React, { useState, useEffect } from 'react';

function DataFetcher({ apiUrl }) {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
async function fetchData() {
try {
const response = await fetch(apiUrl);
if (!response.ok) throw new Error('डेटा लाने में त्रुटि');
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
fetchData();
}, [apiUrl]);

if (loading) return <p>लोड हो रहा है...</p>;
if (error) return <p>त्रुटि: {error}</p>;

return ( <ul>
{data.map(item => ( <li key={item.id}>{item.name}</li>
))} </ul>
);
}

export default DataFetcher;

Advanced रिएक्ट (React) Implementation

jsx
JSX Code 
import React, { useState, useEffect, memo, useCallback } from 'react';

const ListItem = memo(({ item }) => {
console.log('Rendering ListItem:', item.id);
return <li>{item.name}</li>;
});

function OptimizedFetcher({ apiUrl }) {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

const fetchData = useCallback(async () => {
setLoading(true);
try {
const response = await fetch(apiUrl);
if (!response.ok) throw new Error('डेटा लाने में त्रुटि');
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}, [apiUrl]);

useEffect(() => {
fetchData();
}, [fetchData]);

if (loading) return <p>लोड हो रहा है...</p>;
if (error) return <p>त्रुटि: {error}</p>;

return ( <ul>
{data.map(item => ( <ListItem key={item.id} item={item} />
))} </ul>
);
}

export default OptimizedFetcher;

Advanced example में React.memo और useCallback का उपयोग करके unnecessary re-renders को रोका गया है। ListItem केवल तब render होता है जब उसके props बदलते हैं। fetchData useCallback के साथ memoized है, जिससे यह हर render पर नया function न बने।
यह implementation दिखाती है कि डेटा flow, state और lifecycle को real-world applications में कैसे effectively manage किया जा सकता है। try/catch से error handling और loading state UI experience को enhance करते हैं। ये तकनीकें high-performance और maintainable SPA बनाने में essential हैं।

📊 संपूर्ण संदर्भ

रिएक्ट (React) Element/Method Description Syntax Example Notes
useState Local state management hook const [state, setState] = useState(initial) const [count, setCount] = useState(0); Component state management
useEffect Side-effect hook useEffect(() => {}, [deps]); useEffect(() => { fetchData(); }, []); Data fetching, subscriptions
useContext Access context values const value = useContext(MyContext); const theme = useContext(ThemeContext); Avoids prop drilling
useReducer Complex state management const [state, dispatch] = useReducer(reducer, initialState); const [state, dispatch] = useReducer(reducer, {}); Multi-state logic
React.memo Prevent unnecessary re-renders export default memo(Component); export default memo(ListItem); Re-renders only on prop change
useCallback Function memoization const memoizedFn = useCallback(fn, [deps]); const fetchData = useCallback(() => {...}, [apiUrl]); Performance optimization
useRef Access DOM or persistent values const ref = useRef(initial); const inputRef = useRef(null); Persistent between renders
lazy Lazy-load components const Component = React.lazy(() => import('./Component')); const LazyComp = React.lazy(() => import('./LazyComp')); Improves initial load
Suspense Fallback for async loading <Suspense fallback={<Loader/>}><LazyComp/></Suspense> <Suspense fallback={<p>लोड हो रहा है...</p>}><LazyComp/></Suspense> Use with lazy
PropTypes Props type checking Component.propTypes = { prop: PropTypes.string } Counter.propTypes = { count: PropTypes.number } Helps debug & documentation

📊 Complete रिएक्ट (React) Properties Reference

Property Values Default Description रिएक्ट (React) Support
count number 0 Current counter value All versions
loading boolean true Data loading state All versions
error string null Error state while fetching All versions
data array [] Fetched data All versions
onClick function null Click event handler All versions
children node null Component children All versions
style object {} Inline styles All versions
apiUrl string '' URL for fetching data All versions
fallback node null Fallback for lazy loading 16.6+ for Suspense
key string '' Unique key in lists All versions

अतिरिक्त संसाधन रिएक्ट में developers को state efficiently manage करने, performance optimize करने और reusable components बनाने के लिए उपकरण प्रदान करते हैं। इन्हें mastering करना SPA development में robust data flow, lifecycle management और high-performance rendering सुनिश्चित करता है। अगले कदम में Redux/Zustand, Suspense, Lazy Loading और test-driven development practices सीखना उपयोगी होगा। इन संसाधनों का व्यावहारिक प्रयोग production-ready रिएक्ट एप्लिकेशन बनाने में मदद करता है।

संबंधित खोज शब्द

उपयोगकर्ता इन शब्दों का उपयोग करके भी इस सामग्री की खोज करते हैं:

अतिरिक्त संसाधन रिएक्ट React component architecture हिंदी React state management हिंदी useState useEffect tutorial हिंदी React performance optimization हिंदी Prop drilling रोकें React React data flow हिंदी Advanced React techniques हिंदी Reusable React components हिंदी Lazy loading Suspense React Asynchronous data handling React हिंदी React error handling हिंदी React.memo useCallback प्रयोग SPA development React हिंदी React best practices हिंदी

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
4
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 1 का 1
React ट्यूटोरियल