Higher-Order Components (HOC) की जानकारी
एक higher-order component एक gift wrapper जैसा है — यह जो भी component आप इसे दें उसे लेता है और वापस देने से पहले कुछ extra behavior के साथ इसे wrap करता है।
Syntax
function withEnhancement(WrappedComponent) {
return function EnhancedComponent(props) {
return <WrappedComponent {...props} extraProp={value} />;
};
}
const EnhancedName = withEnhancement(BaseComponent);Higher-Order Component क्या है
एक higher-order component सिर्फ एक function है जो एक component को argument के रूप में accept करता है और एक नया component return करता है। Return किया गया component आमतौर पर original वाले को render करता है, इसके चारों ओर extra props, behavior, या conditional logic जोड़ते हुए — original component का code modify किए बिना।
Note:
एक HOC को एक factory की तरह सोचें: withLoading(MyComponent) एक बिल्कुल नया component produce करता है, यह MyComponent को खुद नहीं बदलता।
Warning:
एक HOC का नाम (जैसे withLoading) सिर्फ एक naming convention है, कोई special React feature नहीं — React इसे किसी भी दूसरे function की तरह ही treat करता है जो एक component return करता है।
उदाहरण: What a Higher-Order Component 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 withGreeting(WrappedComponent) {
return function Enhanced(props) {
return <div><p>Welcome!</p><WrappedComponent {...props} /></div>;
};
}
function Message({ text }) {
return <p>{text}</p>;
}
const GreetedMessage = withGreeting(Message);
function App() {
return <GreetedMessage text="This is the wrapped component" />;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>एक Practical HOC: withLoading
एक common real-world HOC data ready न होने तक एक loading indicator दिखाता है, और एक बार हो जाने पर wrapped component render करता है। यह loading-check logic को हर individual component से बाहर रखता है जिसे इसकी ज़रूरत है।
Note:
Loading condition को एक prop (जैसे isLoading) के रूप में pass करें ताकि वही HOC अलग-अलग data sources के साथ reuse हो सके।
Warning:
हमेशा बाकी बचे props ({...props}) को wrapped component पर spread करें, नहीं तो इसके लिए meant props चुपचाप गायब हो जाएंगे।
उदाहरण: A Practical HOC: withLoading
<!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 withLoading(WrappedComponent) {
return function WithLoadingComponent({ isLoading, ...props }) {
if (isLoading) return <p>Loading...</p>;
return <WrappedComponent {...props} />;
};
}
function UserProfile({ name }) {
return <p>Profile: {name}</p>;
}
const UserProfileWithLoading = withLoading(UserProfile);
function App() {
return <UserProfileWithLoading isLoading={false} name="Asha" />;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>HOCs vs. Hooks आज
ज़्यादातर logic-sharing use cases जिनके लिए एक समय HOC चाहिए होता था, अब एक custom hook के रूप में लिखे जा सकते हैं, tree में एक extra wrapper component बिना introduce किए।
Hooks को नए code के लिए आमतौर पर पसंद किया जाता है क्योंकि वे component hierarchy को obscure नहीं करते जैसे nested HOCs कर सकते हैं।
Note:
अगर आप एक component के चारों ओर एक या दो से ज़्यादा HOCs stack कर रहे हैं, तो consider करें कि क्या एक custom hook (या कई) ज़्यादा clear होगा।
Warning:
एक ही component को कई HOCs में wrap करना (withAuth(withLoading(withTheme(Component)))) DevTools में component tree को debug करना काफी मुश्किल बना देता है।
उदाहरण: HOCs vs. Hooks Today
<!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 useLoading(isLoading) {
return isLoading;
}
function UserProfile({ name, isLoading }) {
const loading = useLoading(isLoading);
if (loading) return <p>Loading...</p>;
return <p>Profile: {name} (hook version, no wrapper component)</p>;
}
function App() {
return <UserProfile isLoading={false} name="Asha" />;
}
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. #}
आम गलतियां
- दूसरे component के render के अंदर एक नया HOC-wrapped component बनाना, जो हर render पर wrapped component को mount और unmount करता है (इसकी state खोते हुए)।
- Extra props को wrapped component तक forward करना भूल जाना, जो चुपचाप उन props को तोड़ता है जिनकी wrapped component को ज़रूरत थी।
- Wrapped component पर एक helpful displayName सेट न करना, जिससे React DevTools confusing anonymous component names दिखाता है।
चैप्टर सारांश
- एक higher-order component (HOC) एक function है जो एक component लेता है और एक नया, enhanced component return करता है।
- HOCs cross-cutting behavior share करने के लिए उपयोग होते हैं, जैसे authentication checks या loading states, कई components में।
- Naming convention withSomething है, जैसे withAuth या withLoading।
- Custom hooks ने कई historical HOC use cases replace कर दिए हैं, लेकिन HOCs अब भी कुछ libraries में दिखते हैं (जैसे Redux का connect())।
ब्राउज़र सपोर्ट
किसी भी React version में काम करता है जो function/class components support करता है (React 0.14+); एक JavaScript pattern है, कोई React API नहीं।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: