const{Fragment:e,jsx:n,jsxs:l}=arguments[0];function _createMdxContent(r){const o={a:"a",code:"code",figure:"figure",h3:"h3",h4:"h4",li:"li",mark:"mark",p:"p",pre:"pre",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...r.components};return l(e,{children:[n(o.p,{children:"In React development, reusing code and keeping concerns separate is key to\nbuilding scalable, maintainable apps. One effective way to achieve this is\nthrough Higher-Order Components (HOCs). This guide will explain how HOCs address\ncommon issues in React apps, how they compare to modern alternatives like hooks,\nand when each pattern should be used."}),"\n",n(o.h3,{children:"What are HOCs?"}),"\n",n(o.p,{children:"Higher-Order Components are a technique in React that allows you to reuse\ncomponent logic. Essentially, an HOC is a function that takes a component and\nreturns a new one with added functionality, leaving the original component\nunchanged."}),"\n",n(o.p,{children:"Here’s a simple example:"}),"\n",n(o.figure,{"data-rehype-pretty-code-figure":"",children:n(o.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"tsx","data-theme":"tokyo-night",children:l(o.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:"const"}),n(o.span,{style:{color:"#7AA2F7"},children:" withEnhancement"}),n(o.span,{style:{color:"#89DDFF"},children:" ="}),n(o.span,{style:{color:"#9ABDF5"},children:" ("}),n(o.span,{style:{color:"#E0AF68"},children:"WrappedComponent"}),n(o.span,{style:{color:"#9ABDF5"},children:")"}),n(o.span,{style:{color:"#BB9AF7"},children:" =>"}),n(o.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" "}),n(o.mark,{"data-highlighted-chars":"",children:n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:"return"})}),n(o.span,{style:{color:"#BB9AF7"},children:" function"}),n(o.span,{style:{color:"#7AA2F7"},children:" EnhancedComponent"}),n(o.span,{style:{color:"#9ABDF5"},children:"("}),n(o.span,{style:{color:"#E0AF68"},children:"props"}),n(o.span,{style:{color:"#9ABDF5"},children:") {"})]}),"\n",n(o.span,{"data-line":"",children:n(o.span,{style:{color:"#51597D",fontStyle:"italic"},children:" // Additional logic or props"})}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" "}),n(o.mark,{"data-highlighted-chars":"",children:n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:"return"})}),n(o.span,{style:{color:"#BA3C97"},children:" <"}),n(o.span,{style:{color:"#DE5971"},children:"WrappedComponent "}),n(o.span,{style:{color:"#7DCFFF"},children:"{"}),n(o.span,{style:{color:"#F7768E",fontWeight:"bold"},children:"..."}),n(o.span,{style:{color:"#C0CAF5"},children:"props"}),n(o.span,{style:{color:"#7DCFFF"},children:"}"}),n(o.span,{style:{color:"#BA3C97"},children:" />"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9ABDF5"},children:" }"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9ABDF5"},children:"}"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),"\n",l(o.p,{children:["Before ",n(o.a,{href:"https://react.dev/reference/react/hooks",children:"hooks"})," were introduced, HOCs\nwere the go-to method for sharing logic across components without duplicating\ncode."]}),"\n",n(o.h3,{children:"Issues without HOCs"}),"\n",n(o.p,{children:"In large React apps, you often need to handle repetitive concerns like:"}),"\n",l(o.ul,{children:["\n",l(o.li,{children:[n("b",{children:"Authentication:"})," Only allowing logged-in users to access certain pages."]}),"\n",l(o.li,{children:[n("b",{children:"Logging:"})," Tracking user interactions."]}),"\n",l(o.li,{children:[n("b",{children:"Data fetching:"})," Pulling data from APIs and managing loading states."]}),"\n",l(o.li,{children:[n("b",{children:"Error handling:"})," Catching and displaying errors across multiple\ncomponents."]}),"\n"]}),"\n",n(o.p,{children:"Without HOCs, you might end up copying similar logic across various components,\nleading to:"}),"\n",l(o.ul,{children:["\n",l(o.li,{children:[n("b",{children:"Code duplication:"})," Repeated logic across components."]}),"\n",l(o.li,{children:[n("b",{children:"Tightly coupled code:"})," Embedding concerns like authentication directly\ninto components, reducing reusability."]}),"\n",l(o.li,{children:[n("b",{children:"Inconsistency:"})," Handling similar concerns inconsistently across the app."]}),"\n"]}),"\n",n(o.p,{children:"For example, checking user authentication might be done multiple times across\ndifferent components:"}),"\n",n(o.figure,{"data-rehype-pretty-code-figure":"",children:n(o.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"tsx","data-theme":"tokyo-night",children:l(o.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:"const"}),n(o.span,{style:{color:"#7AA2F7"},children:" Dashboard"}),n(o.span,{style:{color:"#89DDFF"},children:" ="}),n(o.span,{style:{color:"#9ABDF5"},children:" ("}),n(o.span,{style:{color:"#89DDFF"},children:"{"}),n(o.span,{style:{color:"#E0AF68"},children:" user"}),n(o.span,{style:{color:"#89DDFF"},children:" }"}),n(o.span,{style:{color:"#9ABDF5"},children:")"}),n(o.span,{style:{color:"#BB9AF7"},children:" =>"}),n(o.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",l(o.span,{"data-line":"","data-highlighted-line":"",children:[n(o.span,{style:{color:"#BB9AF7"},children:" if"}),n(o.span,{style:{color:"#9ABDF5"},children:" ("}),n(o.span,{style:{color:"#BB9AF7"},children:"!"}),n(o.span,{style:{color:"#C0CAF5"},children:"user"}),n(o.span,{style:{color:"#9ABDF5"},children:") "}),n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:"return"}),n(o.span,{style:{color:"#BA3C97"},children:" <"}),n(o.span,{style:{color:"#F7768E"},children:"div"}),n(o.span,{style:{color:"#BA3C97"},children:">"}),n(o.span,{style:{color:"#9AA5CE"},children:"Please log in to view this page"}),n(o.span,{style:{color:"#BA3C97"},children:""}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),n(o.span,{style:{color:"#BA3C97"},children:" <"}),n(o.span,{style:{color:"#F7768E"},children:"div"}),n(o.span,{style:{color:"#BA3C97"},children:">"}),n(o.span,{style:{color:"#9AA5CE"},children:"Welcome to the Dashboard"}),n(o.span,{style:{color:"#BA3C97"},children:""}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9ABDF5"},children:"}"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:" "}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:"const"}),n(o.span,{style:{color:"#7AA2F7"},children:" Settings"}),n(o.span,{style:{color:"#89DDFF"},children:" ="}),n(o.span,{style:{color:"#9ABDF5"},children:" ("}),n(o.span,{style:{color:"#89DDFF"},children:"{"}),n(o.span,{style:{color:"#E0AF68"},children:" user"}),n(o.span,{style:{color:"#89DDFF"},children:" }"}),n(o.span,{style:{color:"#9ABDF5"},children:")"}),n(o.span,{style:{color:"#BB9AF7"},children:" =>"}),n(o.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",l(o.span,{"data-line":"","data-highlighted-line":"",children:[n(o.span,{style:{color:"#BB9AF7"},children:" if"}),n(o.span,{style:{color:"#9ABDF5"},children:" ("}),n(o.span,{style:{color:"#BB9AF7"},children:"!"}),n(o.span,{style:{color:"#C0CAF5"},children:"user"}),n(o.span,{style:{color:"#9ABDF5"},children:") "}),n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:"return"}),n(o.span,{style:{color:"#BA3C97"},children:" <"}),n(o.span,{style:{color:"#F7768E"},children:"div"}),n(o.span,{style:{color:"#BA3C97"},children:">"}),n(o.span,{style:{color:"#9AA5CE"},children:"Please log in to view this page"}),n(o.span,{style:{color:"#BA3C97"},children:""}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),n(o.span,{style:{color:"#BA3C97"},children:" <"}),n(o.span,{style:{color:"#F7768E"},children:"div"}),n(o.span,{style:{color:"#BA3C97"},children:">"}),n(o.span,{style:{color:"#9AA5CE"},children:"Settings Page"}),n(o.span,{style:{color:"#BA3C97"},children:""}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9ABDF5"},children:"}"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),"\n",n(o.p,{children:"This repetition can become difficult to maintain."}),"\n",n(o.h3,{children:"Solving iIssues with HOCs"}),"\n",n(o.p,{children:"HOCs can solve this by centralizing the logic. Here’s an example HOC for\nauthentication:"}),"\n",n(o.figure,{"data-rehype-pretty-code-figure":"",children:n(o.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"tsx","data-theme":"tokyo-night",children:l(o.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:"const"}),n(o.span,{style:{color:"#7AA2F7"},children:" withAuthentication"}),n(o.span,{style:{color:"#89DDFF"},children:" ="}),n(o.span,{style:{color:"#9ABDF5"},children:" ("}),n(o.mark,{"data-highlighted-chars":"",children:n(o.span,{style:{color:"#E0AF68"},children:"WrappedComponent"})}),n(o.span,{style:{color:"#9ABDF5"},children:")"}),n(o.span,{style:{color:"#BB9AF7"},children:" =>"}),n(o.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),n(o.span,{style:{color:"#BB9AF7"},children:" function"}),n(o.span,{style:{color:"#7AA2F7"},children:" EnhancedComponent"}),n(o.span,{style:{color:"#9ABDF5"},children:"("}),n(o.span,{style:{color:"#E0AF68"},children:"props"}),n(o.span,{style:{color:"#9ABDF5"},children:") {"})]}),"\n",l(o.span,{"data-line":"","data-highlighted-line":"",children:[n(o.span,{style:{color:"#BB9AF7"},children:" if"}),n(o.span,{style:{color:"#9ABDF5"},children:" ("}),n(o.span,{style:{color:"#BB9AF7"},children:"!"}),n(o.span,{style:{color:"#C0CAF5"},children:"props"}),n(o.span,{style:{color:"#89DDFF"},children:"."}),n(o.span,{style:{color:"#7DCFFF"},children:"user"}),n(o.span,{style:{color:"#9ABDF5"},children:") "}),n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:"return"}),n(o.span,{style:{color:"#BA3C97"},children:" <"}),n(o.span,{style:{color:"#F7768E"},children:"div"}),n(o.span,{style:{color:"#BA3C97"},children:">"}),n(o.span,{style:{color:"#9AA5CE"},children:"Please log in to view this page"}),n(o.span,{style:{color:"#BA3C97"},children:""}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),n(o.span,{style:{color:"#BA3C97"},children:" <"}),n(o.mark,{"data-highlighted-chars":"",children:n(o.span,{style:{color:"#DE5971"},children:"WrappedComponent"})}),n(o.span,{style:{color:"#DE5971"},children:" "}),n(o.span,{style:{color:"#7DCFFF"},children:"{"}),n(o.span,{style:{color:"#F7768E",fontWeight:"bold"},children:"..."}),n(o.span,{style:{color:"#C0CAF5"},children:"props"}),n(o.span,{style:{color:"#7DCFFF"},children:"}"}),n(o.span,{style:{color:"#BA3C97"},children:" />"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9ABDF5"},children:" }"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9ABDF5"},children:"}"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),"\n",n(o.p,{children:"You can then apply it to multiple components:"}),"\n",n(o.figure,{"data-rehype-pretty-code-figure":"",children:n(o.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"tsx","data-theme":"tokyo-night",children:l(o.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:"const"}),n(o.span,{style:{color:"#BB9AF7"},children:" ProtectedDashboard"}),n(o.span,{style:{color:"#89DDFF"},children:" ="}),n(o.span,{style:{color:"#7AA2F7"},children:" "}),n(o.mark,{"data-highlighted-chars":"",children:n(o.span,{style:{color:"#7AA2F7"},children:"withAuthentication"})}),n(o.span,{style:{color:"#9ABDF5"},children:"("}),n(o.span,{style:{color:"#C0CAF5"},children:"Dashboard"}),n(o.span,{style:{color:"#9ABDF5"},children:")"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:"const"}),n(o.span,{style:{color:"#BB9AF7"},children:" ProtectedSettings"}),n(o.span,{style:{color:"#89DDFF"},children:" ="}),n(o.span,{style:{color:"#7AA2F7"},children:" "}),n(o.mark,{"data-highlighted-chars":"",children:n(o.span,{style:{color:"#7AA2F7"},children:"withAuthentication"})}),n(o.span,{style:{color:"#9ABDF5"},children:"("}),n(o.span,{style:{color:"#C0CAF5"},children:"Settings"}),n(o.span,{style:{color:"#9ABDF5"},children:")"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),"\n",n(o.p,{children:"Now, the authentication check is reused across components, keeping the logic\ncentralized and easy to maintain."}),"\n",n(o.h3,{children:"Advantages and disadvantages of HOCs"}),"\n",n(o.h4,{children:"Pros"}),"\n",l(o.ul,{children:["\n",l(o.li,{children:[n("b",{children:"Reusability:"})," Logic can be shared across multiple components."]}),"\n",l(o.li,{children:[n("b",{children:"Separation of concerns:"})," Keeps things like authentication or logging\nseparate from the component’s main purpose."]}),"\n",l(o.li,{children:[n("b",{children:"Composability:"})," HOCs can be stacked together to add multiple layers of\nfunctionality."]}),"\n",l(o.li,{children:[n("b",{children:"Maintainability:"})," Centralizing logic in HOCs makes updates easier."]}),"\n"]}),"\n",n(o.h4,{children:"Cons"}),"\n",l(o.ul,{children:["\n",l(o.li,{children:[n("b",{children:"Wrapper hell:"})," Using too many HOCs can lead to deeply nested component\ntrees, making debugging difficult."]}),"\n",l(o.li,{children:[n("b",{children:"Prop collision:"})," HOCs may accidentally override props, causing bugs."]}),"\n",l(o.li,{children:[n("b",{children:"Reduced readability:"})," It’s harder to track where certain functionality\ncomes from."]}),"\n",l(o.li,{children:[n("b",{children:"Performance impact:"})," Every HOC adds another layer to the component tree,\nwhich can slow things down in large apps."]}),"\n"]}),"\n",n(o.h3,{children:"Hooks: A modern alternative"}),"\n",n(o.p,{children:"With React 16.8, hooks were introduced as a more modern way to share logic in\nfunctional components. Hooks allow you to manage state and side effects without\nneeding HOCs."}),"\n",n(o.p,{children:"Here’s how you can refactor the previous HOC into a hook:"}),"\n",n(o.figure,{"data-rehype-pretty-code-figure":"",children:n(o.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"tsx","data-theme":"tokyo-night",children:l(o.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#7DCFFF"},children:"import"}),n(o.span,{style:{color:"#9ABDF5"},children:" { "}),n(o.span,{style:{color:"#0DB9D7"},children:"useAuth"}),n(o.span,{style:{color:"#9ABDF5"},children:" }"}),n(o.span,{style:{color:"#7DCFFF"},children:" from"}),n(o.span,{style:{color:"#89DDFF"},children:' "'}),n(o.span,{style:{color:"#9ECE6A"},children:"./auth-context"}),n(o.span,{style:{color:"#89DDFF"},children:'"'}),n(o.span,{style:{color:"#89DDFF"},children:";"}),n(o.span,{style:{color:"#51597D",fontStyle:"italic"},children:" // Assume an auth provider"})]}),"\n",n(o.span,{"data-line":"",children:" "}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:"const"}),n(o.span,{style:{color:"#7AA2F7"},children:" useAuthentication"}),n(o.span,{style:{color:"#89DDFF"},children:" ="}),n(o.span,{style:{color:"#9ABDF5"},children:" ()"}),n(o.span,{style:{color:"#BB9AF7"},children:" =>"}),n(o.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:" const"}),n(o.span,{style:{color:"#BB9AF7"},children:" user"}),n(o.span,{style:{color:"#89DDFF"},children:" ="}),n(o.span,{style:{color:"#7AA2F7"},children:" useAuth"}),n(o.span,{style:{color:"#9ABDF5"},children:"()"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),n(o.span,{style:{color:"#9ABDF5"},children:" { "}),n(o.span,{style:{color:"#73DACA"},children:"isAuthenticated"}),n(o.span,{style:{color:"#89DDFF"},children:":"}),n(o.span,{style:{color:"#BB9AF7"},children:" !!"}),n(o.span,{style:{color:"#C0CAF5"},children:"user"}),n(o.span,{style:{color:"#89DDFF"},children:","}),n(o.span,{style:{color:"#C0CAF5"},children:" user"}),n(o.span,{style:{color:"#9ABDF5"},children:" }"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9ABDF5"},children:"}"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:" "}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:"const"}),n(o.span,{style:{color:"#7AA2F7"},children:" Dashboard"}),n(o.span,{style:{color:"#89DDFF"},children:" ="}),n(o.span,{style:{color:"#9ABDF5"},children:" ()"}),n(o.span,{style:{color:"#BB9AF7"},children:" =>"}),n(o.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",l(o.span,{"data-line":"","data-highlighted-line":"",children:[n(o.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:" const"}),n(o.span,{style:{color:"#89DDFF"},children:" {"}),n(o.span,{style:{color:"#BB9AF7"},children:" isAuthenticated"}),n(o.span,{style:{color:"#89DDFF"},children:","}),n(o.span,{style:{color:"#BB9AF7"},children:" user"}),n(o.span,{style:{color:"#89DDFF"},children:" }"}),n(o.span,{style:{color:"#89DDFF"},children:" ="}),n(o.span,{style:{color:"#7AA2F7"},children:" useAuthentication"}),n(o.span,{style:{color:"#9ABDF5"},children:"()"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:" "}),"\n",l(o.span,{"data-line":"","data-highlighted-line":"",children:[n(o.span,{style:{color:"#BB9AF7"},children:" if"}),n(o.span,{style:{color:"#9ABDF5"},children:" ("}),n(o.span,{style:{color:"#BB9AF7"},children:"!"}),n(o.span,{style:{color:"#C0CAF5"},children:"isAuthenticated"}),n(o.span,{style:{color:"#9ABDF5"},children:") "}),n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:"return"}),n(o.span,{style:{color:"#BA3C97"},children:" <"}),n(o.span,{style:{color:"#F7768E"},children:"div"}),n(o.span,{style:{color:"#BA3C97"},children:">"}),n(o.span,{style:{color:"#9AA5CE"},children:"Please log in to view this page"}),n(o.span,{style:{color:"#BA3C97"},children:""}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:" "}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),n(o.span,{style:{color:"#BA3C97"},children:" <"}),n(o.span,{style:{color:"#F7768E"},children:"div"}),n(o.span,{style:{color:"#BA3C97"},children:">"}),n(o.span,{style:{color:"#9AA5CE"},children:"Welcome to the Dashboard, "}),n(o.span,{style:{color:"#7DCFFF"},children:"{"}),n(o.span,{style:{color:"#C0CAF5"},children:"user"}),n(o.span,{style:{color:"#89DDFF"},children:"."}),n(o.span,{style:{color:"#7DCFFF"},children:"name}"}),n(o.span,{style:{color:"#BA3C97"},children:""}),n(o.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:[n(o.span,{style:{color:"#9ABDF5"},children:"}"}),n(o.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),"\n",n(o.p,{children:"With hooks, you can keep the logic within the component itself, avoiding the\nneed to wrap components with HOCs. This makes the code more readable and avoids\nthe “wrapper hell” problem."}),"\n",n(o.h3,{children:"HOCs vs. Hooks: A comparison"}),"\n",l(o.table,{children:[n(o.thead,{children:l(o.tr,{children:[n(o.th,{children:"Aspect"}),n(o.th,{children:"HOCs"}),n(o.th,{children:"Hooks"})]})}),l(o.tbody,{children:[l(o.tr,{children:[n(o.td,{children:"Reusability"}),n(o.td,{children:"Logic is reused by wrapping components"}),n(o.td,{children:"Logic reused through custom hooks"})]}),l(o.tr,{children:[n(o.td,{children:"Code complexity"}),n(o.td,{children:"Can lead to deeply nested trees"}),n(o.td,{children:"Simpler code, no extra wrappers"})]}),l(o.tr,{children:[n(o.td,{children:"Component structure"}),n(o.td,{children:"Requires wrapping components"}),n(o.td,{children:"Logic stays within the component"})]}),l(o.tr,{children:[n(o.td,{children:"Performance"}),n(o.td,{children:"Adds extra layers to the tree"}),n(o.td,{children:"Better performance, no layers"})]}),l(o.tr,{children:[n(o.td,{children:"Readability"}),n(o.td,{children:"Harder to follow"}),n(o.td,{children:"More readable and declarative"})]}),l(o.tr,{children:[n(o.td,{children:"Prop handling"}),n(o.td,{children:"Risk of prop collisions"}),n(o.td,{children:"Encapsulates logic within hooks"})]}),l(o.tr,{children:[n(o.td,{children:"State and Side Effects"}),n(o.td,{children:"Managed in the HOC"}),n(o.td,{children:"Handled directly in the component"})]}),l(o.tr,{children:[n(o.td,{children:"Debugging"}),n(o.td,{children:"Harder to debug"}),n(o.td,{children:"Easier to debug and test"})]}),l(o.tr,{children:[n(o.td,{children:"Composability"}),n(o.td,{children:"Can stack multiple HOCs"}),n(o.td,{children:"Hooks compose naturally within components"})]}),l(o.tr,{children:[n(o.td,{children:"Use cases"}),n(o.td,{children:"Ideal for enhancing third-party components, cross-cutting concerns"}),n(o.td,{children:"Best for managing state and side effects in functional components"})]})]})]}),"\n",n(o.h3,{children:"Conclusion"}),"\n",n(o.p,{children:"Higher-Order Components (HOCs) are a powerful pattern for reusing logic,\nespecially for things like authentication, logging, or error handling. However,\nwith the introduction of hooks, many developers now prefer using custom hooks to\nmanage state and side effects within components, offering a cleaner and more\nmodern approach."}),"\n",n(o.p,{children:"HOCs are still useful in legacy code or in situations where you need to enhance\ncomponents without altering their structure. However, for most modern React\napplications, hooks offer a more efficient, readable, and maintainable way to\nhandle shared logic. Knowing both approaches will help you choose the right tool\nfor the job."})]})}return{default:function(e={}){const{wrapper:l}=e.components||{};return l?n(l,{...e,children:n(_createMdxContent,{...e})}):_createMdxContent(e)}};

Hey, I’m Carlos! Welcome to my slice of the web!

Recent posts

Higher Order Components (HOCs) in React

How I built my blog

How to build a gaming PC on a budget: Top stores in Guatemala