कंपोजिशन पॅटर्न्सची तुलना करा: render props, HOCs, आणि custom hooks.

Question

Accepted Answer

तिन्ही कॉम्पोनेंट्समध्ये लॉजिक शेअर करतात, परंतु ते कालांतराने विकसित झाले आणि **custom hooks हे लॉजिक शेअर करण्यासाठी आधुनिक मानक** आहे. ## Higher-Order Component (HOC) एक फंक्शन जो कॉम्पोनेंट घेतो आणि एक वर्धित कॉम्पोनेंट परत करतो: ```jsx const withAuth = Component => props => { const user = useUser(); return user ? : ; }; const ProtectedPage = withAuth(Page); ``` अनिष्ट प्रभाव: **wrapper nesting** (ट्रीमध्ये "wrapper hell"), prop नामामध्ये संघर्ष, आणि injected props कुठून येतात हे अस्पष्ट आहे. ## Render props एक कॉम्पोनेंट state शेअर करण्यासाठी फंक्शन म्हणून child घेतो: ```jsx {({ x, y }) => } ``` लवकार, परंतु अनेक render-prop कॉम्पोनेंट्स nesting "callback pyramid" तयार करते. ## Custom hooks (प्राधान्य दिलेले) stateful लॉजिक `useX` फंक्शनमध्ये काढा — **कोणतीही अतिरिक्त ट्री nesting नाही, स्पष्ट डेटा प्रवाह**: ```jsx function useMouse() { const [pos, setPos] = useState({ x: 0, y: 0 }); useEffect(() => { /* attach listener, cleanup */ }, []); return pos; } function Component() { const { x, y } = useMouse(); // clear, flat, composable } ``` ## कसे निवडायचे - **लॉजिक शेअर करणे** → custom hooks (आधुनिक उत्तर). - **UI शेअर करणे/संरचना बनवणे** → साधे **कंपोजिशन** (`children`/कॉम्पोनेंट्स पास करणे). - **HOCs / render props** जुन्या लाइब्रेरीजचे एकीकरण करताना किंवा जेव्हा आपल्याला rendering स्वत:ला wrap करावे लागेल तेव्हा अजूनही उपयोगी आहेत (उदा. काही animation लाइब्रेरीज). ते गोष्टी वाईट नाहीत — फक्त बहुतांश लॉजिक पुनः वापरासाठी hooks द्वारे बदलले गेले आहेत.