React में Rendering कैसे होती है
Rendering React का एक webpage के हिस्से को फिर से draw करने का तरीका है जब भी इसके द्वारा track की जा रही कोई चीज़ बदलती है, score बदलने के moment एक scoreboard update करने जैसा।
In this page:
Re-render क्या Trigger करता है
एक component फिर से render होता है जब इसका अपना state बदलता है, जब इसे parent से नए props मिलते हैं, या जब इसका parent किसी भी वजह से re-render होता है (default रूप से, भले ही उस child के props असल में बदले हो या नहीं)।
Note:
एक parent का re-render होना necessarily यह मतलब नहीं कि असली DOM बदलता है -- React अब भी DOM touch करने से पहले diff करता है।
Warning:
यह उम्मीद करना कि एक component सिर्फ इसलिए re-render होगा क्योंकि कोई unrelated global variable बदला एक common misunderstanding है -- React सिर्फ उन state/props changes पर react करता है जिनके बारे में इसे पता है।
उदाहरण: What Triggers a Re-render
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Child() {
console.log('Child rendered');
return <p>I am the child.</p>;
}
function Parent() {
const [count, setCount] = React.useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Parent count: {count}</button>
<Child />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Parent />);
</script>
</body>
</html>Render Phase vs Commit Phase
React rendering दो phases में होता है: render phase calculate करता है कि क्या बदलना चाहिए (आपके component functions को call करते हुए), और commit phase असल में उन changes को असली DOM पर apply करता है।
Note:
आपके component function को खुद direct DOM manipulation से मुक्त रहना चाहिए -- वह commit phase में belong करता है, जिसे React manage करता है, या बाद में एक effect में।
Warning:
एक component की function body के अंदर (render phase के दौरान) directly DOM को mutate करना inconsistent UI का कारण बन सकता है, क्योंकि किसी भी चीज़ के commit होने से पहले render एक से ज़्यादा बार run हो सकता है।
उदाहरण: Render Phase vs Commit Phase
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function PhaseNote() {
const [n, setN] = React.useState(0);
return <button onClick={() => setN(n + 1)}>Render calculates, commit applies: {n}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<PhaseNote />);
</script>
</body>
</html>Multiple State Updates को Batch करना
जब एक ही event handler के अंदर कई state updates होते हैं, React उन्हें प्रति update एक बार render करने के बजाय एक single re-render में group करता है।
यह batching UI को fast और consistent रखता है, क्योंकि एक component कभी user को half-updated in-between state नहीं दिखाता।
Note:
आप एक handler के अंदर एक row में कई setState functions call कर सकते हैं बिना extra renders की चिंता किए -- React उन्हें automatically batch करता है।
Warning:
क्योंकि updates batched हैं, उसी handler के अंदर इसके setter को call करने के ठीक बाद state पढ़ना अब भी OLD value देता है, नई value नहीं।
उदाहरण: Batching Multiple State Updates
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Toggler() {
const [a, setA] = React.useState(false);
const [b, setB] = React.useState(false);
function handleClick() {
setA(true);
setB(true);
}
return (
<div>
<button onClick={handleClick}>Set Both</button>
<p>A: {String(a)}, B: {String(b)}</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Toggler />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- यह मान लेना कि हर state update एक immediate, separate render trigger करता है -- React अक्सर कई updates को एक में batch करता है।
- Render phase (क्या बदलना चाहिए calculate करना) को commit phase (असल में DOM update करना) के साथ confuse करना।
- इसके setter को call करने के ठीक बाद एक state variable पढ़ना और उसी function call में नई value की उम्मीद करना।
चैप्टर सारांश
- एक re-render तब होता है जब एक component का state या props बदलते हैं।
- React पहले calculate करता है कि क्या बदला (render phase) असली DOM को touch करने से पहले (commit phase)।
- एक ही event handler के अंदर कई state updates एक single re-render में batched होते हैं।
- इस cycle को समझना यह explain करने में help करता है कि state updates mid-function instantly apply क्यों नहीं होते।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- हर React version में available एक internal React rendering behavior, React 18 से expanded automatic batching के साथ।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: