Render Props Pattern क्या है
Render props pattern एक chef को एक plate देने और उन्हें यह decide करने देने जैसा है कि इस पर क्या रखना है, जबकि आप ingredients इकट्ठा करने का ध्यान रखते हैं।
Syntax
function ComponentName({ render }) {
// shared logic
return <div>{render(data)}</div>;
}
<ComponentName render={data => <p>{data}</p>} />What a Render Prop Is
एक render prop एक prop है जिसकी value एक function है जो JSX return करता है। एक component internally क्या दिखाना है decide करने के बजाय, यह इस function को call करता है और जो भी यह return करे उसे render करता है।
यह component को data या behavior supply करने देता है जबकि caller exact markup control करता है।
Note:
Function को render नाम देना ज़रूरी नहीं — children को भी अक्सर एक render prop के रूप में उपयोग किया जाता है, directly JSX के रूप में render होने के बजाय एक function के रूप में call किया जाते हुए।
Warning:
एक render prop (JSX return करने वाला एक function) को एक regular prop के साथ confuse न करें जो सिर्फ एक React element रखता हो — उन्हें बहुत अलग तरीकों से उपयोग किया जाता है।
उदाहरण: What a Render Prop Is
<!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 MouseTracker({ render }) {
const [pos, setPos] = React.useState({ x: 0, y: 0 });
return (
<div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })} style={{height: 100, border: "1px solid #333"}}>
{render(pos)}
</div>
);
}
function App() {
return <MouseTracker render={pos => <p>Mouse at {pos.x}, {pos.y}</p>} />;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Using 'children' as a Render Prop
एक custom-named prop के बजाय, आप built-in children prop को एक function के रूप में उपयोग कर सकते हैं। React यह require नहीं करता कि children JSX हो — यह कोई भी value हो सकता है, एक function सहित, जिसे component फिर call करता है और जहां भी चाहे render करता है।
Note:
यह style call site पर अच्छा पढ़ता है क्योंकि यह normal JSX nesting जैसा दिखता है, सिर्फ elements के बजाय अंदर एक function के साथ।
Warning:
क्योंकि function के रूप में children newcomers को unusual दिखता है, अगर आप इसे shared/library code में उपयोग करें तो pattern explain करने वाला एक छोटा comment जोड़ें।
उदाहरण: Using 'children' as a Render Prop
<!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 Toggle({ children }) {
const [on, setOn] = React.useState(false);
return children({ on, toggle: () => setOn(o => !o) });
}
function App() {
return (
<Toggle>
{({ on, toggle }) => (
<button onClick={toggle}>{on ? "Visible" : "Hidden"}</button>
)}
</Toggle>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Render Props vs. Custom Hooks
वह सब कुछ जो एक render-props component कर सकता है, एक custom hook usually ज़्यादा simply कर सकता है, बिना JSX nesting की एक extra layer जोड़े। ऊपर वाला MouseTracker example एक useMousePosition hook के रूप में rewrite किया जा सकता है जिसे कोई भी component directly call करता है, किसी wrapping component की ज़रूरत नहीं।
Note:
नए code के लिए, पहले एक custom hook पर पहुंचें — render props मुख्यतः तब उपयोग करें जब एक existing library के साथ काम कर रहे हों जो already उस pattern को expect करती है।
Warning:
Deeply nested render props (एक render prop के अंदर एक render prop, एक और के अंदर) exact वह 'wrapper hell' problems बनाता है जिन्हें solve करने के लिए hooks introduce हुए थे।
उदाहरण: Render Props vs. Custom Hooks
<!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 useMousePosition() {
const [pos, setPos] = React.useState({ x: 0, y: 0 });
const handleMove = e => setPos({ x: e.clientX, y: e.clientY });
return [pos, handleMove];
}
function App() {
const [pos, handleMove] = useMousePosition();
return (
<div onMouseMove={handleMove} style={{height: 100, border: "1px solid #333"}}>
<p>Mouse at {pos.x}, {pos.y} (hook version, no wrapper needed)</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</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. #}
आम गलतियां
- यह भूल जाना कि prop को literally render कहा जाना ज़रूरी नहीं — कोई भी prop जो JSX return करने वाला एक function है एक render prop count होता है।
- Render prop के लिए हर render पर एक नया inline function बनाना, जो optimized child components में unnecessary re-renders cause कर सकता है।
- आज render props को overuse करना जब एक custom hook simpler होता — hooks ने इस pattern के ज़्यादातर historical use cases को replace कर दिया है।
चैप्टर सारांश
- Render-props pattern एक component है जो एक function को एक prop के रूप में लेता है और यह decide करने के लिए इसे call करता है कि क्या render करना है।
- यह एक component को stateful logic share करने देता है जबकि caller को resulting UI पर पूरा control देता है।
- यह hooks से पहले exist करता था और React 16.8 से पहले components के बीच logic share करने का primary तरीका था।
- Custom hooks अब इस pattern के ज़्यादातर पुराने use cases को cover करते हैं, लेकिन यह pattern अब भी कुछ libraries में दिखता है।
ब्राउज़र सपोर्ट
यह function components और props support करने वाले किसी भी React version में काम करता है (React 0.14+); सबसे commonly pre-Hooks (pre-16.8) codebases में देखा जाता है।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: