Fragments और Portals
React में Fragments और Portals दो महत्वपूर्ण advanced concepts हैं, जो component structure, DOM management और modern web applications की performance को optimize करने में मदद करते हैं। Fragments का उपयोग multiple elements को wrap करने के लिए किया जाता है बिना extra DOM nodes create किए। यह unnecessary wrapper elements को avoid करता है और re-renders को कम करता है, विशेषकर तब जब component से कई elements return करने हों। Portals का उपयोग component के children को parent hierarchy के बाहर render करने के लिए किया जाता है। यह technique modals, tooltips या notifications के लिए अत्यंत उपयोगी है, जो parent container की DOM constraints को bypass करते हुए UI पर overlay करने की आवश्यकता रखते हैं।
React के core concepts जैसे components, state management, unidirectional data flow और lifecycle methods को समझना Fragments और Portals का सही उपयोग करने के लिए महत्वपूर्ण है। इनका सही implementation modern Single Page Applications (SPAs) में UI updates को efficient और maintainable बनाता है।
इस tutorial में आप सीखेंगे कि Fragments और Portals को practical scenarios में कैसे implement किया जाए, best practices कैसे follow करें और common mistakes जैसे prop drilling या unnecessary re-renders से कैसे बचा जाए। आप reusable और high-performance components बनाएंगे जो complex SPAs के लिए तैयार होंगे।
मूल उदाहरण
jsximport React, { useState } from 'react';
import ReactDOM from 'react-dom';
function Modal({ children, isOpen, onClose }) {
if (!isOpen) return null;
return ReactDOM.createPortal(
<div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.5)' }}>
<div style={{ backgroundColor: 'white', margin: '20% auto', padding: '20px', width: '300px', borderRadius: '8px' }}>
{children} <button onClick={onClose}>Close</button> </div> </div>,
document.getElementById('modal-root')
);
}
function App() {
const [isModalOpen, setIsModalOpen] = useState(false);
return (
<> <h1>Fragments और Portals in React</h1>
<button onClick={() => setIsModalOpen(true)}>Open Modal</button>
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}> <h2>Modal Content</h2> <p>This content is rendered using a Portal.</p> </Modal>
</>
);
}
export default App;इस उदाहरण में App component में multiple elements को Fragment (<>) में wrap किया गया है, जिससे extra DOM nodes create नहीं होती। useState hook का उपयोग modal state को manage करने के लिए किया गया है, जो state management और unidirectional data flow को दर्शाता है।
Modal component ReactDOM.createPortal का उपयोग करता है, जिससे modal content parent component hierarchy के बाहर 'modal-root' में render होता है। conditional rendering (if (!isOpen) return null) DOM updates को optimize करता है और unnecessary rendering को रोकता है।
यह pattern reusable component design, clean UI logic और encapsulated state management को demonstrate करता है। Portals का use UI overlays जैसे modals और notifications के लिए critical है क्योंकि यह parent DOM hierarchy को disturb किए बिना UI को render करता है।
व्यावहारिक उदाहरण
jsximport React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
function Notification({ message, onClose }) {
useEffect(() => {
const timer = setTimeout(onClose, 3000);
return () => clearTimeout(timer);
}, [onClose]);
return ReactDOM.createPortal(
<div style={{ position: 'fixed', bottom: '20px', right: '20px', backgroundColor: '#444', color: '#fff', padding: '10px 20px', borderRadius: '5px' }}>
{message} </div>,
document.getElementById('notification-root')
);
}
function App() {
const [notifications, setNotifications] = useState([]);
const addNotification = () => {
setNotifications(prev => [...prev, `Notification ${prev.length + 1}`]);
};
const removeNotification = index => {
setNotifications(prev => prev.filter((_, i) => i !== index));
};
return (
<> <h1>Advanced Example with Fragments and Portals</h1> <button onClick={addNotification}>Add Notification</button>
{notifications.map((msg, idx) => (
<Notification key={idx} message={msg} onClose={() => removeNotification(idx)} />
))}
</>
);
}
export default App;यह advanced उदाहरण Portal और state management का बेहतर उपयोग दिखाता है। प्रत्येक Notification parent DOM hierarchy के बाहर render होती है, जिससे यह UI overlay के रूप में दिखाई देती है। useEffect hook notification को 3 सेकंड में automatically close करता है, जिससे lifecycle और resource cleanup efficiently manage होता है।
App component state array में dynamic notifications manage करता है, immutable updates के कारण unnecessary re-renders नहीं होते। Spread operator का उपयोग state mutation से बचता है। यह pattern reusable, maintainable और performance optimized components बनाना सिखाता है। Fragments और Portals DOM nodes की संख्या कम करते हैं और SPA में debugging और maintainability आसान बनाते हैं।
React best practices में Fragments का उपयोग unnecessary wrapper nodes को avoid करने के लिए किया जाता है। Portals का उपयोग UI overlays को parent hierarchy से बाहर render करने के लिए किया जाता है, लेकिन component state और events manage किए जाते हैं। State updates immutable होने चाहिए ताकि side effects और unnecessary re-renders से बचा जा सके। Prop drilling avoid करने के लिए callbacks और encapsulated state का use करें।
Common mistakes में unnecessary wrapper use करना, Portals को null-check के बिना render करना और direct state mutation शामिल हैं। Performance optimize करने के लिए memoization, proper key usage और minimal state updates करें। Security में Portal content sanitize करना चाहिए। useEffect cleanup memory leaks रोकता है।
📊 संदर्भ तालिका
| रिएक्ट (React) Element/Concept | Description | Usage Example |
|---|---|---|
| Fragment | Multiple elements को wrap करता है बिना extra DOM nodes | <> <div/> <span/> </> |
| Portal | Children को parent hierarchy के बाहर render करता है | ReactDOM.createPortal(<Modal/>, document.getElementById('modal-root')) |
| useState | Local state manage करता है | const [open, setOpen] = useState(false) |
| useEffect | Side effects और lifecycle manage करता है | useEffect(() => { console.log('mounted'); return cleanup; }, []) |
| Conditional Rendering | State के आधार पर component को render करता है | isOpen ? <Modal/> : null |
Fragments और Portals modern React applications के लिए आवश्यक tools हैं। Fragments DOM को clean रखते हैं, जबकि Portals modals, notifications और tooltips के लिए flexibility प्रदान करते हैं। State management, lifecycle और performance optimizations के साथ इनका combination reusable, maintainable और reactive components बनाता है।
Next steps में Context API, advanced hooks (useReducer, useMemo) और component composition patterns सीखना recommended है। Projects जैसे dashboards और notification systems में इन patterns को implement करना knowledge को मजबूत करता है। React documentation और community tutorials learning resources के रूप में उपयोगी हैं।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी