{title}

{type === "withLinkButton" && ( )} {type === "withNormalButton" && ( )} {type === "withAnalyticsButton" ... withAnalyticsButton }

{title}

{children}

) } `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"children"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Props"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"div"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"h1"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">{title}"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {children}"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ) "})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,s.jsx)(i.p,{children:"Now we can extend this component:"}),` `,(0,s.jsx)(i.figure,{__raw__:`function TitleWithLink ({ title, href, buttonText }) { <a href={href}>{buttonText}</a> } function TitleWithAnalyticsButton ({title, sendAnalytics, buttonText}) { <button onClick={sendAnalytics}> {buttonText} </button> } ... and more buttons `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" TitleWithLink"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"href"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"buttonText"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }) {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"Title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{title}>"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"a"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" href"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{href}>{buttonText}"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" TitleWithAnalyticsButton"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"sendAnalytics"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"buttonText"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}) {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"Title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{title}>"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"button"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" onClick"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{sendAnalytics}>"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {buttonText}"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"..."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" and more buttons"})]})]})})}),` `,(0,s.jsx)(n,{type:"info",title:"Good to know",children:(0,s.jsxs)(i.ul,{children:[` `,(0,s.jsxs)(i.li,{children:[` `,(0,s.jsxs)(i.p,{children:["Note that while ",(0,s.jsx)(i.code,{children:"children"})," only allows us one placeholder, we are not limited by this. If we need multiple extensions and the ",(0,s.jsx)(i.code,{children:"children"})," props is already in used, we can follow the ",(0,s.jsx)(i.a,{href:"https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop",children:"render props patterns"}),"."]}),` `]}),` `,(0,s.jsxs)(i.li,{children:[` `,(0,s.jsxs)(i.p,{children:["Here an ",(0,s.jsx)(i.a,{href:"https://github.com/nodejs/nodejs.org/tree/main/apps/site/components",children:"example"})," of components following open-close principle in production."]}),` `]}),` `]})}),` `,(0,s.jsxs)(i.h2,{id:"3-liskov-substitution-principle",children:[(0,s.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#3-liskov-substitution-principle",children:(0,s.jsx)(i.span,{className:"icon icon-link"})}),"3. Liskov substitution principle"]}),` `,(0,s.jsx)(i.p,{children:(0,s.jsx)(i.strong,{children:"\u201CSubtype objects should be subtitutable for supertype objects\u201D"})}),` `,(0,s.jsxs)(i.p,{children:["Liskov suggest that we should design objects that can be easily substitutable. If we have a ",(0,s.jsx)(i.code,{children:"Dog"})," class that extends ",(0,s.jsx)(i.code,{children:"Animal"})," class then we should be able to replace ",(0,s.jsx)(i.code,{children:"Dog"})," with ",(0,s.jsx)(i.code,{children:"Animal"})," without breaking anything. This sounds like more applicable in object-oriented but can be done also in React."]}),` `,(0,s.jsx)(i.p,{children:"In React, a component is a function that returns JSX (HTML like). If we console log it, we will notice that this is represented as a Javascript object, hence Liskov substitution is applicable in React components."}),` `,(0,s.jsx)(i.p,{children:"This is how JSX output looks like:"}),` `,(0,s.jsx)(i.figure,{__raw__:`function App() { return ( ); } // console.log(App()) -> { type: Button, props: { // <- \u{1F440} notice props title: "Submit", children: "Click me!" }, key: null, ref: null, _owner: null, _store: {} } `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" App"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"() {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"Button"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"Submit"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" Click me!"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" );"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:"// console.log(App()) ->"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" type"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:": Button,"})]}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" props"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:": { "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:"// <- \u{1F440} notice props"})]}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:": "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"Submit"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" children"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:": "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"Click me!"'})]}),` `,(0,s.jsx)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" },"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" key"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:": "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"null"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" ref"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:": "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"null"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" _owner"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:": "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"null"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" _store"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:": {}"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,s.jsxs)(i.p,{children:["Let's say we have two components. Clearly ",(0,s.jsx)(i.code,{children:"RedButton"})," extends from ",(0,s.jsx)(i.code,{children:"Button"})," component. Notice ",(0,s.jsx)(i.code,{children:"RedButton"})," accepts a boolean ",(0,s.jsx)(i.code,{children:"isBig"})," but ",(0,s.jsx)(i.code,{children:"Button"})," does not."]}),` `,(0,s.jsx)(i.figure,{__raw__:`type ButtonProps = { children: React.ReactNode color?: string size?: string } function Button ({ children, color, size }: ButtonProps) { return ( ) } type RedButtonProps = { children: React.ReactNode isBig?: boolean } function RedButton ({ children, isBig }: RedButtonProps) { return ( ) } function App () { return ( Send ) } `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"type"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" ButtonProps"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" children"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" React"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"ReactNode"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" color"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?:"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" string"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" size"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?:"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" string"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Button"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"children"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"color"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"size"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" ButtonProps"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"button"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" style"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{{color, fontSize: size "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"==="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" 'xl'"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ?"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" '32px'"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" :"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" '16px'"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}} > "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {children}"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"type"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" RedButtonProps"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" children"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" React"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"ReactNode"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" isBig"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?:"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" boolean"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" RedButton"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"children"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"isBig"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" RedButtonProps"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"Button"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" size"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{isBig "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" 'xl'"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" :"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" 'sm'"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"} "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"color"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"'red'"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {children} "})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" App"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" () {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"RedButton"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" isBig"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"true"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}>"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" Send"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,s.jsxs)(i.p,{children:["Now, for some reason our UI designer tells us that instead of using ",(0,s.jsx)(i.code,{children:"Redbutton"}),", we should use ",(0,s.jsx)(i.code,{children:"Button"}),". As junior developers, we might be tempted to just change the component's name and call it a day."]}),` `,(0,s.jsx)(i.figure,{__raw__:`function App () { return ( ) } `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" App"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" () {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"Button"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" isBig"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"true"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}>"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" Send"})}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,s.jsxs)(i.p,{children:["Doing such change will break our app since ",(0,s.jsx)(i.code,{children:"Button"})," does not have ",(0,s.jsx)(i.code,{children:"isBig"})," prop, they are not interchangeable. And if you are working without typescript, you will never know."]}),` `,(0,s.jsx)(i.p,{children:"To fix this, we should always use the same props and types as the supertype object."}),` `,(0,s.jsx)(i.figure,{__raw__:`// \u274C 'isBig' is not a prop of Button function RedButton ({ children, isBig }) { return ( ) } // \u2705 'size' is a prop of Button function RedButton ({ children, size }) { return ( ) } `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:"// \u274C 'isBig' is not a prop of Button"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" RedButton"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"children"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"isBig"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }) {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"Button"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" size"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{isBig "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" 'xl'"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" :"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" 'sm'"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"} "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"color"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"'red'"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {children} "})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:"// \u2705 'size' is a prop of Button"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" RedButton"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"children"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"size"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }) {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"Button"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" size"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{size} "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"color"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"'red'"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {children} "})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,s.jsx)(i.p,{children:"If we try it again, interchanging will not break our app. Of course, this is a simple example but imagine something more complex component. This can save you a lot of time."}),` `,(0,s.jsxs)(i.h2,{id:"4-interface-segregration-principle",children:[(0,s.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#4-interface-segregration-principle",children:(0,s.jsx)(i.span,{className:"icon icon-link"})}),"4. Interface segregration principle"]}),` `,(0,s.jsx)(i.p,{children:(0,s.jsx)(i.strong,{children:"\u201CClients should not depend on interfaces that they do not use.\u201D"})}),` `,(0,s.jsxs)(i.p,{children:["In React, this principle states that we should only pass the necessary props to our components. However, developers sometimes ignore this and pass the entire object as props into the component, which is ",(0,s.jsx)(i.strong,{children:"bad practice"}),"."]}),` `,(0,s.jsxs)(i.h3,{id:"example-1",children:[(0,s.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#example-1",children:(0,s.jsx)(i.span,{className:"icon icon-link"})}),"Example 1"]}),` `,(0,s.jsxs)(i.p,{children:["Here we have a ",(0,s.jsx)(i.code,{children:"Thumbnail"})," component with an object contract. The problem is that we are passing the whole object ",(0,s.jsx)(i.code,{children:"Video"})," while the component only uses the ",(0,s.jsx)(i.code,{children:"coverUrl"}),"."]}),` `,(0,s.jsx)(i.figure,{__raw__:`type Props = { video: Video // Video: { ...50 entries } } function Thumbnail ({ video }: Props) { return

} `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"type"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Props"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" video"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Video"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:" // Video: { ...50 entries }"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Thumbnail"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"video"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Props"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"img"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" src"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{video.coverUrl} />"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,s.jsxs)(i.p,{children:["Now, imagine you want to test this component, you would need to mock several ",(0,s.jsx)(i.code,{children:"Video"})," objects and pass it to ",(0,s.jsx)(i.code,{children:"Thumbnail"})," component. What if the ",(0,s.jsx)(i.code,{children:"Video"})," object has 50 entries? Do you see the issue? The contract of this component is too big to be mocked."]}),` `,(0,s.jsx)(i.p,{children:"We could fix this by passing only the necessary props."}),` `,(0,s.jsx)(i.figure,{__raw__:`type Props = { coverUrl: string } function Thumbnail ({ coverUrl }: Props) { return

} `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"type"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Props"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" coverUrl"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" string"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Thumbnail"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"coverUrl"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Props"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"img"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" src"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{coverUrl} />"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,s.jsxs)(i.p,{children:["Now testing this is so easy; we only need to pass a ",(0,s.jsx)(i.strong,{children:"string"}),"."]}),` `,(0,s.jsxs)(i.h3,{id:"example-2",children:[(0,s.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#example-2",children:(0,s.jsx)(i.span,{className:"icon icon-link"})}),"Example 2"]}),` `,(0,s.jsxs)(i.p,{children:["Here we have several components that are part of the main component ",(0,s.jsx)(i.code,{children:"Post"})]}),` `,(0,s.jsx)(i.figure,{__raw__:`type TPost = { title: string author: Author createdAt: Date } // main component function Post ({ post }: TPost) { return (

{post.author.name}

) } function PostTitle ({ post }: TPost) { return

{post.title}

} function PostDate ({ post }: TPost) { return {post.createdAt.toString()} } `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"type"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" TPost"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" string"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" author"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Author"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" createdAt"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Date"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:"// main component"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Post"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"post"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" TPost"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") { "})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"div"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"> "})]}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"PostTitle"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" post"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{post} />"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"span"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">{post.author.name}"})]}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"PostDate"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" post"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{post} />"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" PostTitle"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"post"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" TPost"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"h1"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">{post.title}"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" PostDate"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"post"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" TPost"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"time"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">{post.createdAt."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"toString"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"()}"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,s.jsxs)(i.p,{children:["We see the same issue where the ",(0,s.jsx)(i.code,{children:"PostTitle"})," component is passed the entire ",(0,s.jsx)(i.code,{children:"Post"})," object, which doesn't make sense. To fix this, we simply pass the necessary props."]}),` `,(0,s.jsx)(i.figure,{__raw__:`function PostTitle ({ title }: { title: string }) { return

{title}

} function PostDate ({ createdAt }: { createdAt: Date }) { return {createdAt.toString()} } `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" PostTitle"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"title"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" string"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }) {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"h1"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">{title}"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" PostDate"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"createdAt"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"createdAt"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Date"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }) {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"time"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">{createdAt."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"toString"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"()}"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,s.jsxs)(i.h2,{id:"5-dependency-inversion-principle",children:[(0,s.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#5-dependency-inversion-principle",children:(0,s.jsx)(i.span,{className:"icon icon-link"})}),"5. Dependency inversion principle"]}),` `,(0,s.jsx)(i.p,{children:(0,s.jsx)(i.strong,{children:"\u201COne should depend upon abstractions, not concretions\u201D"})}),` `,(0,s.jsx)(i.p,{children:"Basically one component, classes, utility functions, or 3rd party library shouldn't directly depend on another component, but rather they both should depend on some common abstraction."}),` `,(0,s.jsxs)(i.h3,{id:"example-1-1",children:[(0,s.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#example-1-1",children:(0,s.jsx)(i.span,{className:"icon icon-link"})}),"Example 1"]}),` `,(0,s.jsxs)(i.p,{children:["Here, notice ",(0,s.jsx)(i.code,{children:"LoginForm"})," component depends on ",(0,s.jsx)(i.code,{children:"api"})," module (since we imported ",(0,s.jsx)(i.code,{children:"api"}),"), they both coupled each other."]}),` `,(0,s.jsx)(i.figure,{__filepath__:"./components/form/login-form.tsx",__showHeader__:!0,__raw__:`import api from '~/api' function LoginForm () { const [email, setEmail] = useState('') const [password, setPassword] = useState('') const handleSubmit = async (e) => { e.preventDefault() await api.login(email, password) } return ( ) } `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" api "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" '~/api'"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" LoginForm"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" () {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ["}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"email"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"setEmail"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"] "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useState"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"''"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:")"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ["}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"password"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"setPassword"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"] "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useState"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"''"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:")"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" handleSubmit"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" async"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"e"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" e."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"preventDefault"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"()"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" await"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" api."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"login"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(email, password)"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"form"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" onSubmit"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{handleSubmit}>"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"input"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FDAEB7","--shiki-light":"#B31D28","--shiki-dark-font-style":"italic","--shiki-light-font-style":"italic"},children:" ..."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" />"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"input"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FDAEB7","--shiki-light":"#B31D28","--shiki-dark-font-style":"italic","--shiki-light-font-style":"italic"},children:" ..."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" />"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"button"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" type"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"submit"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">Log in"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,s.jsxs)(i.p,{children:["This is bad practice because ",(0,s.jsx)(i.strong,{children:"dependency"})," adds complexity and makes it harder to modify the code. How?"]}),` `,(0,s.jsxs)(i.p,{children:["For example, imagine we want to reuse this ",(0,s.jsx)(i.code,{children:"LoginForm"})," elsewhere in our app with an extra logic ",(0,s.jsx)(i.code,{children:"api.sendAnalytics()"})," function in the ",(0,s.jsx)(i.code,{children:"handleSubmit"}),". We couldn't reuse this component at all because modifying it would cause analytics to be sent everytime this component is used. But that's not what we want\u2014we want control over when and where analytics are sent."]}),` `,(0,s.jsxs)(i.p,{children:["We have two possible solutions: we could either inject via ",(0,s.jsx)(i.strong,{children:"props"})," or ",(0,s.jsx)(i.strong,{children:"context"}),"."]}),` `,(0,s.jsxs)(i.p,{children:["In this case we'll use via props, our ",(0,s.jsx)(i.code,{children:"LoginForm"})," is no longer coupled with ",(0,s.jsx)(i.code,{children:"onSubmit"}),". Note ",(0,s.jsx)(i.code,{children:"LoginForm"})," was changed to simply ",(0,s.jsx)(i.code,{children:"Form"}),"."]}),` `,(0,s.jsx)(i.figure,{__raw__:`type Props = { onSubmit: (email: string, password: string) => Promise } // passing 'onSubmit' via props function Form ({ onSubmit }: Props) { const [email, setEmail] = useState('') const [password, setPassword] = useState('') const handleSubmit = async (e) => { e.preventDefault() await onSubmit(email, password) } return ( ) } `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"type"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Props"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" onSubmit"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"email"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" string"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"password"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" string"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Promise"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"<"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"void"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#6A737D","--shiki-light":"#6A737D"},children:"// passing 'onSubmit' via props"})}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Form"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ({ "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"onSubmit"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Props"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ["}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"email"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"setEmail"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"] "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useState"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"''"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:")"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ["}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"password"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"setPassword"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"] "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useState"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:"''"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:")"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" handleSubmit"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" async"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"e"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" e."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"preventDefault"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"()"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" await"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" onSubmit"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(email, password)"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"form"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" onSubmit"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{handleSubmit}>"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"input"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FDAEB7","--shiki-light":"#B31D28","--shiki-dark-font-style":"italic","--shiki-light-font-style":"italic"},children:" ..."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" />"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"input"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FDAEB7","--shiki-light":"#B31D28","--shiki-dark-font-style":"italic","--shiki-light-font-style":"italic"},children:" ..."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" />"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"button"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" type"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"submit"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">Log in"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,s.jsxs)(i.p,{children:["Let the parent component responsible for importing the module and passing it via props to ",(0,s.jsx)(i.code,{children:"Form"}),". Thus, following the 1st principle ",(0,s.jsx)(i.strong,{children:"single reponsability"})," as well."]}),` `,(0,s.jsx)(i.figure,{__filepath__:"./components/form/with-login-analytics.tsx",__showHeader__:!0,__raw__:`import api from '~/api' function FormWithLogin () { const handleSubmit = async (email, password) => { await api.login(email, password) } return

} function FormWithLoginAnalytics () { const handleSubmit = async (email, password) => { await api.login(email, password) api.sendAnalytics() } return } `,__language__:"tsx","data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{style:{"--shiki-dark":"#e1e4e8","--shiki-light":"#24292e","--shiki-dark-bg":"#24292e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-dark github-light",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" api "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" '~/api'"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" FormWithLogin"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" () {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" handleSubmit"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" async"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"email"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"password"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" await"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" api."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"login"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(email, password)"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"Form"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" onSubmit"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{handleSubmit} />"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{className:"line--highlighted","data-line":"","data-highlighted-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" FormWithLoginAnalytics"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" () {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" handleSubmit"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" async"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"email"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"password"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" await"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" api."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"login"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(email, password)"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" api."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"sendAnalytics"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"()"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"Form"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" onSubmit"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{handleSubmit} />"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})})]})})}),` `,(0,s.jsxs)(i.h3,{id:"example-2-1",children:[(0,s.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#example-2-1",children:(0,s.jsx)(i.span,{className:"icon icon-link"})}),"Example 2"]}),` `,(0,s.jsxs)(i.p,{children:["In this example, a 3rd party library ",(0,s.jsx)(i.code,{children:"SWR"})," and ",(0,s.jsx)(i.code,{children:"Todo"})," component are coupled."]}),` `,(0,s.jsx)(i.figure,{__raw__:`import SWR from "swr" async function fetcher (url : string) { const res = await fetch(url) return res.json() } function Todo () { const { data } = useSWR("https://someapi.com/todos", fetcher) if (!data) return

return (

{todo.id} {todo.title}

return (

{todo.id} {todo.title}

Writing on software engineering, best pattern designs, and new technologies.