કમ્પોઝીશન પેટર્નની તુલના કરો: render props, HOCs, અને કસ્ટમ hooks.

Question

Accepted Answer

ત્રણેય ઘટકો વચ્ચે તર્ક શેર કરે છે, પરંતુ તેઓ સમયાંતરે વિકસિત થયા છે અને **કસ્ટમ hooks આધુનિક ડિફોલ્ટ છે** તર્ક શેર કરવા માટે. ## Higher-Order Component (HOC) એક ફંક્શન જે ઘટક લે છે અને એક સુધારેલ એક વળતર આપે છે: ```jsx const withAuth = Component => props => { const user = useUser(); return user ? : ; }; const ProtectedPage = withAuth(Page); ``` ગેરફાયદાઓ: **wrapper nesting** (ટ્રીમાં "wrapper hell"), prop નામ અથડામણ, અને તે અસ્પષ્ટ છે કે ઇંજેક્ટેड props ક્યાંથી આવે છે. ## Render props ઘટક તર્ક શેર કરવા માટે તેના બાળક તરીકે ફંક્શન લે છે: ```jsx {({ x, y }) => } ``` વધુ પુષ્ટિ, પરંતુ જો તમે કેટલાક render-prop ઘટકો નેસ્ટ કરો તો "callback pyramid" બને છે. ## Custom hooks (પસંદ) સ્ટેટફુલ તર્ક `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 } ``` ## કેવી રીતે પસંદ કરવું - **તર્ક શેર કરવું** → કસ્ટમ hooks (આધુનિક જવાબ). - **UI શેર કરવું/સંરચના** → સાદો **composition** (pass કરો `children`/ઘટકો). - **HOCs / render props** જૂના લાયબ્રેરીઝને એકીકૃત કરતી વખતે પણ ઉપયોગી છે અથવા જ્યારે તમે રેન્ડરિંગ પોતે લપેટવું જોઈએ (ઉદા. કેટલીક animation libraries). તે ખોટા નથી — ફક્ત મોટાભાગે તર્ક પુનઃવપરાશ માટે hooks દ્વારા બદલવામાં આવ્યા છે.