var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var l in e)r(n,l,{get:e[l],enumerable:!0})},c=(n,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of v(e))!y.call(n,s)&&s!==l&&r(n,s,{get:()=>e[s],enumerable:!(o=p(e,s))||o.enumerable});return n};var k=(n,e,l)=>(l=n!=null?b(u(n)):{},c(e||!n||!n.__esModule?r(l,"default",{value:n,enumerable:!0}):l,n)),g=n=>c(r({},"__esModule",{value:!0}),n);var i=m((E,t)=>{t.exports=_jsx_runtime});var w={};f(w,{default:()=>h,frontmatter:()=>N});var a=k(i()),N=void 0;function d(n){let e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...n.components},{EpicVideo:l}=e;return l||D("EpicVideo",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:"Optimizations"}),` `,(0,a.jsx)(l,{url:"https://www.epicreact.dev/workshops/react-suspense/intro-to-optimizations"}),` `,(0,a.jsx)(e.h2,{children:"Waterfalls"}),` `,(0,a.jsx)(e.p,{children:`React Suspense is a powerful way to colocate data requirements with the UI that requires the data. However, there is one drawback to this approach and that involves something called "waterfalls."`}),` `,(0,a.jsx)(e.p,{children:`If you look at the Network tab of your DevTools, you'll find a "waterfall" column. This displays the time each request was in flight. When the request waterfalls look like a stair-stepping cascade, that leads to a slower user experience than if all the requests start at the same time.`}),` `,(0,a.jsx)("callout-warning",{class:"aside",children:(0,a.jsx)(e.p,{children:`While "waterfall" describes the visual appearance of the network requests in general (even the fast ones), it is often (confusingly) used to simply describe what I'm calling the "stair-stepping cascade" (the slow kind of waterfall). So, in the future when I say "waterfall" I'm talking about the "stair-stepping cascade" kind unless otherwise noted.`})}),` `,(0,a.jsx)(e.p,{children:"To be clear:"}),` `,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{children:`Request A --------> Response A Request B --------> Response B Request C --------> Response C`})}),` `,(0,a.jsx)(e.p,{children:"This is a stair-stepping cascade, alternatively:"}),` `,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{children:`Request A --------> Response A Request B --------> Response B Request C --------> Response C`})}),` `,(0,a.jsx)(e.p,{children:"This is much faster."}),` `,(0,a.jsx)("callout-info",{children:(0,a.jsx)(e.p,{children:`Of course, sometimes you can't avoid a little waterfalling if the data you need depends on other data to be retrieved first (if that's the case, then fix your API to not have this limitation).`})}),` `,(0,a.jsx)(e.p,{children:`Due to the design of Suspense, you can easily create waterfalls by mistake. For example:`}),` `,(0,a.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ProfileDetails"}),"({ ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"})," }",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"})," }) {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCount"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFavoritesCount"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),"))",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friends"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFriends"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),"))",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/* some profile details */"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:["}",` `]})]})}),` `,(0,a.jsxs)(e.p,{children:["The trouble with this is the ",(0,a.jsx)(e.code,{children:"use(getFavoritesCount(username))"}),` will cause the `,(0,a.jsx)(e.code,{children:"ProfileDetails"})," will suspend until the ",(0,a.jsx)(e.code,{children:"getFavoritesCount"}),` request is resolved. Only then will the `,(0,a.jsx)(e.code,{children:"getFriends"})," request be made. This is a waterfall."]}),` `,(0,a.jsxs)(e.p,{children:[`To solve this problem is pretty simple, though maybe not obvious at first. You just need to make sure to trigger both requests before `,(0,a.jsx)(e.code,{children:"use"})," is called:"]}),` `,(0,a.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ProfileDetails"}),"({ ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"})," }",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"})," }) {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFavoritesCount"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFriends"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCount"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friends"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"}),")",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"6",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/* some profile details */"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8",children:["}",` `]})]})}),` `,(0,a.jsxs)(e.p,{children:["This way, both requests are made at the same time and the ",(0,a.jsx)(e.code,{children:"ProfileDetails"}),` component will remain suspended when both are resolved (the order of the `,(0,a.jsx)(e.code,{children:"use"}),` calls doesn't matter in this case).`]}),` `,(0,a.jsx)(e.p,{children:`That's simple enough (you could even make a custom Lint rule to enforce you always do this correctly), but there's an even trickier place where this can happen.`}),` `,(0,a.jsx)(e.p,{children:"What if you were to nest these components?"}),` `,(0,a.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ProfilePage"}),"({ ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"})," }",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"})," }) {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatar"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getUserAvatar"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),"))",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Avatar"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"url"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatar"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ProfileDetails"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"hr"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ProfilePosts"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10",children:[" )",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"11",children:["}",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"12",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"13",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ProfileDetails"}),"({ ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"})," }",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"})," }) {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"14",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFavoritesCount"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"15",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFriends"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"16",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCount"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"17",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friends"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"}),")",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"18",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"19",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/* some profile details */"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"20",children:["}",` `]})]})}),` `,(0,a.jsxs)(e.p,{children:[`Can you find the waterfall? It's not as obvious as the previous example, but it's there. The `,(0,a.jsx)(e.code,{children:"ProfilePage"})," component will suspend until ",(0,a.jsx)(e.code,{children:"userAvatarPromise"}),` is resolved. Only then will the `,(0,a.jsx)(e.code,{children:"ProfileDetails"}),` component trigger the `,(0,a.jsx)(e.code,{children:"favoritesCountPromise"})," and ",(0,a.jsx)(e.code,{children:"friendsPromise"})," requests."]}),` `,(0,a.jsxs)(e.p,{children:["This is a problem because the ",(0,a.jsx)(e.code,{children:"ProfileDetails"}),` component is not even visible to the user until the `,(0,a.jsx)(e.code,{children:"ProfilePage"})," component is resolved. This is a waterfall."]}),` `,(0,a.jsx)(e.p,{children:`To solve this problem, you need to trigger the requests in the parent component and pass the promises down to the child components:`}),` `,(0,a.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ProfilePage"}),"({ ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"})," }",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"})," }) {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatarPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getUserAvatar"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"postPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getPosts"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFavoritesCount"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFriends"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"6",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatar"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatarPromise"}),")",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"8",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"11",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Avatar"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"url"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatar"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"12",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ProfileDetails"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"13",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"favoritesCountPromise"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"14",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"friendsPromise"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"15",children:[" />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"16",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"hr"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"17",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ProfilePosts"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"postPromise"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"postPromise"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"18",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"19",children:[" )",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"20",children:["}",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"21",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"22",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ProfileDetails"}),"({",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"23",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"}),",",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"24",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"}),",",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"25",children:["}",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"26",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ReturnType"}),"<",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"typeof"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"getFavoritesCount"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"27",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ReturnType"}),"<",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"typeof"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"getFriends"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"28",children:["}) {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"29",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCount"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"30",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friends"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"}),")",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"31",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"32",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/* some profile details */"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"33",children:["}",` `]})]})}),` `,(0,a.jsxs)(e.p,{children:[`Sheesh, that's annoying!! I thought the whole point was to be able to colocate our data requirements with the code that requires it. That's what's so cool about the `,(0,a.jsx)(e.code,{children:"use"})," hook and the ",(0,a.jsx)(e.code,{children:"Suspense"})," model!"]}),` `,(0,a.jsx)(e.p,{children:`Well, because of the promise caching we added before, you can actually get away with keeping things as they were before and simply adding a call to the cached function in the parent component instead of adding promise props everywhere:`}),` `,(0,a.jsx)(e.pre,{"data-add":"2-5","data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1","data-diff-line-number":"1",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ProfilePage"}),"({ ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"})," }",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"})," }) {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2","data-add":!0,"data-diff-line-number":"2",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"// preload some necessary data"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3","data-add":!0,"data-diff-line-number":"3",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFavoritesCount"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4","data-add":!0,"data-diff-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFriends"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5","data-add":!0,"data-diff-line-number":"5",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getPosts"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"6","data-diff-line-number":"6",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7","data-diff-line-number":"7",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatar"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getUserAvatar"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),"))",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8","data-diff-line-number":"8",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9","data-diff-line-number":"9",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10","data-diff-line-number":"10",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Avatar"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"url"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatar"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"11","data-diff-line-number":"11",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ProfileDetails"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"12","data-diff-line-number":"12",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"hr"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"13","data-diff-line-number":"13",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ProfilePosts"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"14","data-diff-line-number":"14",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"15","data-diff-line-number":"15",children:[" )",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"16","data-diff-line-number":"16",children:["}",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"17","data-diff-line-number":"17",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"18","data-diff-line-number":"18",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ProfileDetails"}),"({ ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"})," }",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"})," }) {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"19","data-diff-line-number":"19",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"// these will get the cached promise that was created by the parent above"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"20","data-diff-line-number":"20",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFavoritesCount"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"21","data-diff-line-number":"21",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFriends"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"22","data-diff-line-number":"22",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCount"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"23","data-diff-line-number":"23",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friends"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"}),")",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"24","data-diff-line-number":"24",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"25","data-diff-line-number":"25",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/* some profile details */"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"26","data-diff-line-number":"26",children:["}",` `]})]})}),` `,(0,a.jsxs)(e.p,{children:[`What's annoying about this is that you have to remember to call the function before you render the component. This is a bit of a leaky abstraction. You could make it a tiny bit better with a utility function you tack onto the `,(0,a.jsx)(e.code,{children:"ProfileDetails"})," if you want:"]}),` `,(0,a.jsx)(e.pre,{"data-add":"27-32","data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1","data-diff-line-number":"1",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ProfilePage"}),"({ ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"})," }",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"})," }) {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"2","data-diff-line-number":"2",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"// preload some necessary data"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"3","data-diff-line-number":"3",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"ProfileDetails"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"loadData"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"4","data-diff-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"ProfilePosts"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"loadData"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"5","data-diff-line-number":"5",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6","data-diff-line-number":"6",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatar"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getUserAvatar"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),"))",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7","data-diff-line-number":"7",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8","data-diff-line-number":"8",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9","data-diff-line-number":"9",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Avatar"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"url"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatar"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10","data-diff-line-number":"10",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ProfileDetails"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"11","data-diff-line-number":"11",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"hr"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"12","data-diff-line-number":"12",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ProfilePosts"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"13","data-diff-line-number":"13",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"14","data-diff-line-number":"14",children:[" )",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"15","data-diff-line-number":"15",children:["}",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"16","data-diff-line-number":"16",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"17","data-diff-line-number":"17",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ProfileDetails"}),"({ ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"})," }",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"})," }) {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"18","data-diff-line-number":"18",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"// these will get the cached promise that was created by the parent above"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"19","data-diff-line-number":"19",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"}),", ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"})," } ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-highlight":"true","data-line-number":"20","data-diff-line-number":"20",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"ProfileDetails"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"loadData"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"21","data-diff-line-number":"21",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCount"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"22","data-diff-line-number":"22",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friends"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"}),")",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"23","data-diff-line-number":"23",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"24","data-diff-line-number":"24",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base03)"},children:"/* some profile details */"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"25","data-diff-line-number":"25",children:["}",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"26","data-diff-line-number":"26",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"27","data-add":!0,"data-diff-line-number":"27",children:[(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"ProfileDetails"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"loadData"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," (",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"}),") ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"28","data-add":!0,"data-diff-line-number":"28",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"29","data-add":!0,"data-diff-line-number":"29",children:[" favoritesCountPromise: ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFavoritesCount"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),"),",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"30","data-add":!0,"data-diff-line-number":"30",children:[" friendsPromise: ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFriends"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),"),",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"31","data-add":!0,"data-diff-line-number":"31",children:[" }",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"32","data-add":!0,"data-diff-line-number":"32",children:["}",` `]})]})}),` `,(0,a.jsxs)(e.p,{children:[`But then you'll run into issues if you decide you want to lazy load `,(0,a.jsx)(e.code,{children:"ProfileDetails"}),". You'll have to remember to call ",(0,a.jsx)(e.code,{children:"ProfileDetails.loadData"}),` in the parent component before you render the `,(0,a.jsx)(e.code,{children:"ProfileDetails"})," component."]}),` `,(0,a.jsx)(e.p,{children:`Alternatively, you could restructure your components to avoid this problem using the composition pattern we learned about in the Advanced React Patterns workshop:`}),` `,(0,a.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:[(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ProfilePage"}),"({ ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"})," }",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," { ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0C)"},children:"string"})," }) {",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatarPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getUserAvatar"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"postPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getPosts"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFavoritesCount"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"getFriends"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"username"}),")",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"6",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatar"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatarPromise"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"posts"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"postPromise"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCount"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCountPromise"}),")",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friends"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"use"}),"(",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friendsPromise"}),")",` `]}),(0,a.jsx)(e.span,{className:"codeblock-line","data-line-number":"11",children:` `}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"12",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"13",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"14",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Avatar"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"url"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"userAvatar"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"15",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ProfileDetails"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"16",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"favoritesCount"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),"<",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"FavoritesDisplay"}),">",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"favoritesCount"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),"",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"17",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"friendsList"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friends"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"map"}),"((",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friend"}),") ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," (",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"18",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Friend"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"key"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friend"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"id"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"friend"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"friend"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"19",children:[" ))",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"20",children:[" />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"21",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"hr"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"22",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"ProfilePosts"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"23",children:[" ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"postList"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"posts"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"map"}),"((",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"post"}),") ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," (",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"24",children:[" <",(0,a.jsx)(e.span,{style:{color:"var(--base0A)"},children:"Post"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"key"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"post"}),".",(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"id"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," ",(0,a.jsx)(e.span,{style:{color:"var(--base0D)"},children:"post"}),(0,a.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,a.jsx)(e.span,{style:{color:"var(--base08)"},children:"post"}),(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"25",children:[" ))",(0,a.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"26",children:[" />",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"27",children:[" ",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"28",children:[" )",` `]}),(0,a.jsxs)(e.span,{className:"codeblock-line","data-line-number":"29",children:["}",` `]})]})}),` `,(0,a.jsx)(e.p,{children:`And maybe that's ok, but sometimes that just doesn't feel quite right for the UI we're building.`}),` `,(0,a.jsxs)(e.p,{children:[`Really, the problem here is that we naturally follow a render-then-fetch pattern which is we don't fetch until we render. The pattern we should be following is a fetch-as-you-render pattern which is to say you trigger all fetch requests before you render anything. You can learn more about this in `,(0,a.jsx)(e.a,{href:"https://epicreact.dev/render-as-you-fetch/",children:"Render as you fetch (with and without suspense)"}),"."]}),` `,(0,a.jsxs)(e.p,{children:[`Another thing you'll want to think about in this regard is the fact that often we "code-split" our components using lazy loading with `,(0,a.jsx)(e.code,{children:"lazy"}),` (which we cover in the React Performance workshop). Combine this with colocating data fetching and you wind up in a situation where you have a waterfall because you have to first request the code, then the code runs, then that code requests the data.`]}),` `,(0,a.jsx)(e.p,{children:"Ugh, there must be a better way!!"}),` `,(0,a.jsx)(e.p,{children:"There is \u{1F60E}"}),` `,(0,a.jsx)("callout-success",{class:"important",children:(0,a.jsxs)(e.p,{children:["Optimizations like this is where using ",(0,a.jsx)(e.a,{href:"https://remix.run",children:"Remix"}),` is a huge win. It's designed to help you avoid waterfalls naturally.`]})}),` `,(0,a.jsx)(e.p,{children:`And the future deeper integration of Remix with React Server Components will make this even more powerful.`}),` `,(0,a.jsx)(e.p,{children:`Additionally, it's data loading primitives are designed to help you avoid waterfalls without even thinking about it.`}),` `,(0,a.jsx)(e.p,{children:`But if you're using raw suspense as we are in this workshop, you'll need to think about these things.`}),` `,(0,a.jsx)(e.h2,{children:"Cache headers"}),` `,(0,a.jsx)(e.p,{children:`As often happens with optimizations, some of the best optimizations happen on the backend. Your app can be no faster than your slowest query. So finding ways to make your queries faster is a huge win.`}),` `,(0,a.jsx)(e.p,{children:`One way you can speed up your backend is by applying caching at various layers of your tech stack. One of these layers is in HTTP and for certain kinds of data you can use cache headers to enable the client to cache the data and prevent network requests even across page refreshes.`}),` `,(0,a.jsxs)(e.p,{children:[`To do this, you set the `,(0,a.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control",children:(0,a.jsx)(e.code,{children:"Cache-Control"})}),` header on your HTTP responses. This header can have a variety of values (called "directives") that tell the client how to cache the response. The most common directive is `,(0,a.jsx)(e.code,{children:"max-age"}),` which tells the client how long it can cache the response.`]}),` `,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{children:"Cache-Control: max-age=3600"})}),` `,(0,a.jsx)(e.p,{children:`This tells the client to cache the response for 3600 seconds (1 hour). This means that if the client makes a request for the same resource within 1 hour of the first request, it will use the cached response instead of making a network request.`}),` `,(0,a.jsx)(e.p,{children:`As with all caching this comes with tradeoffs. If the data changes frequently, you might not want to cache it for very long. If the data is sensitive, you might not want to cache it at all (in which case, a server-side cache might be more appropriate).`})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function D(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return g(w);})(); ;return Component;

06. Optimizations/Elaboration