"}),":"]}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"let"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"color",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setColor",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'red'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," color ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"input"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"value"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"color",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onChange"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"e"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token function",children:"setColor"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"e",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"target"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"value"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"Hello, world!"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"ExpensiveTree"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:["(",(0,n.jsx)(e.a,{href:"https://codesandbox.io/s/bold-dust-0jbg7?file=/src/App.js:58-313",children:"Try it here"}),")"]})}),` `,(0,n.jsxs)(e.p,{children:[`Now it seems like we can't just "extract" the parts that don't use `,(0,n.jsx)(e.code,{children:"color"})," into another component, since that would include the parent ",(0,n.jsx)(e.code,{children:"

"}),", which would then include ",(0,n.jsx)(e.code,{children:""}),". Can't avoid ",(0,n.jsx)(e.code,{children:"memo"})," this time, right?"]}),` `,(0,n.jsx)(e.p,{children:"Or can we?"}),` `,(0,n.jsx)(e.p,{children:"Play with this sandbox and see if you can figure it out."}),` `,(0,n.jsx)(e.p,{children:"..."}),` `,(0,n.jsx)(e.p,{children:"..."}),` `,(0,n.jsx)(e.p,{children:"..."}),` `,(0,n.jsx)(e.p,{children:"The answer is remarkably plain:"}),` `,(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"ColorPicker"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"Hello, world!"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"ExpensiveTree"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ColorPicker"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token parameter",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," children ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"let"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"color",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setColor",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'red'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," color ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"input"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"value"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"color",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"onChange"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"e"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token function",children:"setColor"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"e",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"target"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"value"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"children",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.em,{children:["(",(0,n.jsx)(e.a,{href:"https://codesandbox.io/s/wonderful-banach-tyfr1?file=/src/App.js:58-423",children:"Try it here"}),")"]})}),` `,(0,n.jsxs)(e.p,{children:["We split the ",(0,n.jsx)(e.code,{children:"App"})," component in two. The parts that depend on the ",(0,n.jsx)(e.code,{children:"color"}),", together with the ",(0,n.jsx)(e.code,{children:"color"})," state variable itself, have moved into ",(0,n.jsx)(e.code,{children:"ColorPicker"}),"."]}),` `,(0,n.jsxs)(e.p,{children:["The parts that don't care about the ",(0,n.jsx)(e.code,{children:"color"})," stayed in the ",(0,n.jsx)(e.code,{children:"App"})," component and are passed to ",(0,n.jsx)(e.code,{children:"ColorPicker"})," as JSX content, also known as the ",(0,n.jsx)(e.code,{children:"children"})," prop."]}),` `,(0,n.jsxs)(e.p,{children:["When the ",(0,n.jsx)(e.code,{children:"color"})," changes, ",(0,n.jsx)(e.code,{children:"ColorPicker"})," re-renders. But it still has the same ",(0,n.jsx)(e.code,{children:"children"})," prop it got from the ",(0,n.jsx)(e.code,{children:"App"})," last time, so React doesn't visit that subtree."]}),` `,(0,n.jsxs)(e.p,{children:["And as a result, ",(0,n.jsx)(e.code,{children:""})," doesn't re-render."]}),` `,(0,n.jsxs)(e.h2,{id:"whats-the-moral",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#whats-the-moral",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"What's the moral?"]}),` `,(0,n.jsxs)(e.p,{children:["Before you apply optimizations like ",(0,n.jsx)(e.code,{children:"memo"})," or ",(0,n.jsx)(e.code,{children:"useMemo"}),", it might make sense to look if you can split the parts that change from the parts that don't change."]}),` `,(0,n.jsxs)(e.p,{children:["The interesting part about these approaches is that ",(0,n.jsx)(e.strong,{children:"they don't really have anything to do with performance, per se"}),". Using the ",(0,n.jsx)(e.code,{children:"children"})," prop to split up components usually makes the data flow of your application easier to follow and reduces the number of props plumbed down through the tree. Improved performance in cases like this is a cherry on top, not the end goal."]}),` `,(0,n.jsxs)(e.p,{children:["Curiously, this pattern also unlocks ",(0,n.jsx)(e.em,{children:"more"})," performance benefits in the future."]}),` `,(0,n.jsxs)(e.p,{children:["For example, when ",(0,n.jsx)(e.a,{href:"https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html",children:"Server Components"})," are stable and ready for adoption, our ",(0,n.jsx)(e.code,{children:"ColorPicker"})," component could receive its ",(0,n.jsx)(e.code,{children:"children"})," ",(0,n.jsx)(e.a,{href:"https://youtu.be/TQQPAU21ZUw?t=1314",children:"from the server"}),". Either the whole ",(0,n.jsx)(e.code,{children:""}),' component or its parts could run on the server, and even a top-level React state update would "skip over" those parts on the client.']}),` `,(0,n.jsxs)(e.p,{children:["That's something even ",(0,n.jsx)(e.code,{children:"memo"})," couldn't do! But again, both approaches are complementary. Don't neglect moving state down (and lifting content up!)"]}),` `,(0,n.jsx)(e.p,{children:"Then, where it's not enough, use the Profiler and sprinkle those memo\u2019s."}),` `,(0,n.jsxs)(e.h2,{id:"didnt-i-read-about-this-before",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#didnt-i-read-about-this-before",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Didn't I read about this before?"]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://kentcdodds.com/blog/optimize-react-re-renders",children:"Yes, probably."})}),` `,(0,n.jsx)(e.p,{children:"This is not a new idea. It's a natural consequence of React composition model. It's simple enough that it's underappreciated, and deserves a bit more love."}),` `,(0,n.jsxs)(e.h2,{id:"reference",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#reference",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Reference"]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://overreacted.io/before-you-memo/",children:"Origin article"})})]})}}var x=y;return f(v);})(); ;return Component;

Tags