[{"_1":2,"_607":-5,"_608":-5},"loaderData",{"_3":4,"_347":348,"_490":491},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_158":159,"_166":167,"_168":169,"_223":171,"_224":173,"_174":175,"_225":226,"_240":241,"_265":-5,"_266":-5,"_267":268},"userId",{"_7":8,"_9":10},"id","h1u6c1ivekltx3h4u36brczn","type","cookie.randomId","preferences","progress",[],"user","userHasAccess",false,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.fetching/01.problem.throw","relativePath","exercises/01.fetching/01.problem.throw",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.fetching/01.solution.throw","exercises/01.fetching/01.solution.throw",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.fetching/02.problem.errors","exercises/01.fetching/02.problem.errors",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.fetching/02.solution.errors","exercises/01.fetching/02.solution.errors",{"_20":39,"_22":40,"_24":41},"01.03.problem","/myapp/workshop-content/exercises/01.fetching/03.problem.status","exercises/01.fetching/03.problem.status",{"_20":43,"_22":44,"_24":45},"01.03.solution","/myapp/workshop-content/exercises/01.fetching/03.solution.status","exercises/01.fetching/03.solution.status",{"_20":47,"_22":48,"_24":49},"01.04.problem","/myapp/workshop-content/exercises/01.fetching/04.problem.util","exercises/01.fetching/04.problem.util",{"_20":51,"_22":52,"_24":53},"01.04.solution","/myapp/workshop-content/exercises/01.fetching/04.solution.util","exercises/01.fetching/04.solution.util",{"_20":55,"_22":56,"_24":57},"01.05.problem","/myapp/workshop-content/exercises/01.fetching/05.problem.use","exercises/01.fetching/05.problem.use",{"_20":59,"_22":60,"_24":61},"01.05.solution","/myapp/workshop-content/exercises/01.fetching/05.solution.use","exercises/01.fetching/05.solution.use",{"_20":63,"_22":64,"_24":65},"02.01.problem","/myapp/workshop-content/exercises/02.dynamic/01.problem.cache","exercises/02.dynamic/01.problem.cache",{"_20":67,"_22":68,"_24":69},"02.01.solution","/myapp/workshop-content/exercises/02.dynamic/01.solution.cache","exercises/02.dynamic/01.solution.cache",{"_20":71,"_22":72,"_24":73},"02.02.problem","/myapp/workshop-content/exercises/02.dynamic/02.problem.transition","exercises/02.dynamic/02.problem.transition",{"_20":75,"_22":76,"_24":77},"02.02.solution","/myapp/workshop-content/exercises/02.dynamic/02.solution.transition","exercises/02.dynamic/02.solution.transition",{"_20":79,"_22":80,"_24":81},"02.03.problem","/myapp/workshop-content/exercises/02.dynamic/03.problem.flash","exercises/02.dynamic/03.problem.flash",{"_20":83,"_22":84,"_24":85},"02.03.solution","/myapp/workshop-content/exercises/02.dynamic/03.solution.flash","exercises/02.dynamic/03.solution.flash",{"_20":87,"_22":88,"_24":89},"03.01.problem","/myapp/workshop-content/exercises/03.optimistic/01.problem.optimistic","exercises/03.optimistic/01.problem.optimistic",{"_20":91,"_22":92,"_24":93},"03.01.solution","/myapp/workshop-content/exercises/03.optimistic/01.solution.optimistic","exercises/03.optimistic/01.solution.optimistic",{"_20":95,"_22":96,"_24":97},"03.02.problem","/myapp/workshop-content/exercises/03.optimistic/02.problem.form-status","exercises/03.optimistic/02.problem.form-status",{"_20":99,"_22":100,"_24":101},"03.02.solution","/myapp/workshop-content/exercises/03.optimistic/02.solution.form-status","exercises/03.optimistic/02.solution.form-status",{"_20":103,"_22":104,"_24":105},"03.03.problem","/myapp/workshop-content/exercises/03.optimistic/03.problem.message","exercises/03.optimistic/03.problem.message",{"_20":107,"_22":108,"_24":109},"03.03.solution","/myapp/workshop-content/exercises/03.optimistic/03.solution.message","exercises/03.optimistic/03.solution.message",{"_20":111,"_22":112,"_24":113},"04.01.problem","/myapp/workshop-content/exercises/04.image/01.problem.img","exercises/04.image/01.problem.img",{"_20":115,"_22":116,"_24":117},"04.01.solution","/myapp/workshop-content/exercises/04.image/01.solution.img","exercises/04.image/01.solution.img",{"_20":119,"_22":120,"_24":121},"04.02.problem","/myapp/workshop-content/exercises/04.image/02.problem.error","exercises/04.image/02.problem.error",{"_20":123,"_22":124,"_24":125},"04.02.solution","/myapp/workshop-content/exercises/04.image/02.solution.error","exercises/04.image/02.solution.error",{"_20":127,"_22":128,"_24":129},"04.03.problem","/myapp/workshop-content/exercises/04.image/03.problem.key","exercises/04.image/03.problem.key",{"_20":131,"_22":132,"_24":133},"04.03.solution","/myapp/workshop-content/exercises/04.image/03.solution.key","exercises/04.image/03.solution.key",{"_20":135,"_22":136,"_24":137},"05.01.problem","/myapp/workshop-content/exercises/05.responsive/01.problem.deferred","exercises/05.responsive/01.problem.deferred",{"_20":139,"_22":140,"_24":141},"05.01.solution","/myapp/workshop-content/exercises/05.responsive/01.solution.deferred","exercises/05.responsive/01.solution.deferred",{"_20":143,"_22":144,"_24":145},"06.01.problem","/myapp/workshop-content/exercises/06.optimization/01.problem.parallel","exercises/06.optimization/01.problem.parallel",{"_20":147,"_22":148,"_24":149},"06.01.solution","/myapp/workshop-content/exercises/06.optimization/01.solution.parallel","exercises/06.optimization/01.solution.parallel",{"_20":151,"_22":152,"_24":153},"06.02.problem","/myapp/workshop-content/exercises/06.optimization/02.problem.cache","exercises/06.optimization/02.problem.cache",{"_20":155,"_22":156,"_24":157},"06.02.solution","/myapp/workshop-content/exercises/06.optimization/02.solution.cache","exercises/06.optimization/02.solution.cache","repoUpdates",{"_160":16,"_161":162,"_163":162,"_164":165},"updatesAvailable","localCommit","31b01f9","remoteCommit","diffLink","https://github.com/undefined/undefined/compare/31b01f9...31b01f9","unmutedNotifications",[],"workshopConfig",{"_170":171,"_172":173,"_174":175,"_181":182,"_199":200,"_201":202,"_203":204,"_205":206,"_209":210,"_215":216,"_219":220,"_221":222},"title","React Suspense 🔀","subtitle","Simplify your Async UI and improve your User Experience","instructor",{"_20":176,"_177":178,"_179":180},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-suspense","discordChannelId","1285244676286189569","discordTags",[197,198],"1285246046498328627","1285245867791745116","onboardingVideo","https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/react-suspense","githubRoot","https://github.com/epicweb-dev/react-suspense/tree/main","stackBlitzConfig",{"_207":208},"view","editor","forms",{"_211":212,"_213":214},"workshop","https://docs.google.com/forms/d/e/1FAIpQLSdRmj9p8-5zyoqRzxp3UpqSbC3aFkweXvvJIKes0a5s894gzg/viewform?hl=en&embedded=true&entry.2123647600={workshopTitle}","exercise","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234={workshopTitle}&entry.428900931={exerciseTitle}","testTab",{"_217":218},"enabled",true,"initialRoute","/","notifications",[],"workshopTitle","workshopSubtitle","ENV",{"_227":228,"_229":230,"_231":202,"_232":204,"_233":218,"_234":235,"_236":237,"_238":239},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","5.29.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","1866e1695983e08f7c10825d3872b09244b7b98b86f3427ff35945a9c29f8dd8","requestInfo",{"_242":243,"_244":245,"_246":247,"_248":249,"_250":249,"_251":252,"_259":260,"_261":262,"_263":220,"_264":218},"protocol","http:","hostname","suspense.epicreact.dev","port","","origin","http://suspense.epicreact.dev","domain","hints",{"_253":254,"_255":256,"_257":258},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/06/finished","session",{"_253":-5},"separator","online","toast","confettiId","presence",{"_269":270},"users",[271,286,298,306,313,321,325,332,337,342],{"_7":272,"_273":218,"_274":275,"_276":277,"_20":278,"_279":280},"001817dd-0635-4fc9-b05a-389e10a4a228","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/59a7e06ff3d697c0a3130d850a76d474?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/59a7e06ff3d697c0a3130d850a76d474?size=512&default=identicon","Chinmay Joshi","location",{"_223":281,"_248":282,"_213":283},"React Server Components 🤹","http://localhost:5639",{"_284":285},"exerciseNumber",3,{"_7":287,"_273":218,"_274":288,"_276":289,"_20":290,"_279":291},"e041cb97-02f9-445f-ae61-18cab58e77c0","https://www.gravatar.com/avatar/0a31881b2e2d36e1885b208fadf0efc8?size=64&default=identicon","https://www.gravatar.com/avatar/0a31881b2e2d36e1885b208fadf0efc8?size=512&default=identicon","Jason Maier",{"_223":292,"_248":282,"_213":293},"React Fundamentals ⚛",{"_9":294,"_284":295,"_296":297},"problem",1,"stepNumber",2,{"_7":299,"_273":218,"_274":300,"_276":301,"_20":302,"_279":303},"3d8b06a5-496e-48d9-8a7d-faac1916371a","https://www.gravatar.com/avatar/59ba0084ca39deb4a4e1d503a5e5c00a?size=64&default=identicon","https://www.gravatar.com/avatar/59ba0084ca39deb4a4e1d503a5e5c00a?size=512&default=identicon","Billy Hopkins",{"_223":304,"_248":282,"_213":305},"Advanced React APIs 🔥",{"_284":285},{"_7":307,"_273":218,"_274":308,"_276":309,"_20":310,"_279":311},"e3c7c526-fb14-4b66-b8a8-9d8844d0fa04","https://www.gravatar.com/avatar/3eb078de669af429547883778ed0d0f2?size=64&default=identicon","https://www.gravatar.com/avatar/3eb078de669af429547883778ed0d0f2?size=512&default=identicon","Nguyen Viet",{"_223":171,"_248":282,"_213":312},{"_9":294,"_284":285,"_296":295},{"_7":314,"_273":218,"_274":315,"_276":316,"_20":317,"_279":318},"ec1e54bb-dff8-474c-8713-e1323e0de293","https://avatars.githubusercontent.com/u/6647799?v=4&size=64","https://avatars.githubusercontent.com/u/6647799?v=4&size=512","Allen Ngorora",{"_223":292,"_248":282,"_213":319},{"_284":320},9,{"_7":322,"_279":323},"bxw0jga1rd5ksob6ol1wmkim",{"_223":304,"_248":282,"_213":324},{"_9":294,"_284":320,"_296":295},{"_7":326,"_279":327},"vdgqchyp4ufb3t5eg44luos0",{"_223":328,"_248":329,"_213":330},"React Component Testing with Vitest","http://react-component-testing-with-vitest.epicweb.dev",{"_9":331,"_284":285,"_296":295},"solution",{"_7":333,"_279":334},"oxd0tzrkb5ftdgyob489apa2",{"_223":281,"_248":282,"_213":335},{"_9":294,"_284":336,"_296":285},5,{"_7":338,"_279":339},"ww7jamyiiuiyt2u0mb4rg745",{"_223":340,"_248":341},"Advanced React Patterns 🤯","http://advanced-patterns.epicreact.dev",{"_7":343,"_279":344},"dh6oj8p46q9255isbx4xeo8k",{"_223":171,"_248":249,"_213":345},{"_284":346,"_296":-5,"_9":-5},6,"routes/_app+/_layout",{"_223":171,"_349":350,"_486":487,"_489":16},"exercises",[351,390,413,435,458,469],{"_284":295,"_170":352,"_353":354,"_366":367,"_373":374},"Data fetching","solutions",[355,357,359,361,364],{"_296":295,"_170":356,"_20":27},"Throwing Promises",{"_296":297,"_170":358,"_20":35},"Error Handling",{"_296":285,"_170":360,"_20":43},"Formal Status",{"_296":362,"_170":363,"_20":51},4,"Utility",{"_296":336,"_170":365,"_20":59},"use React","problems",[368,369,370,371,372],{"_296":295,"_170":356,"_20":21},{"_296":297,"_170":358,"_20":31},{"_296":285,"_170":360,"_20":39},{"_296":362,"_170":363,"_20":47},{"_296":336,"_170":365,"_20":55},"steps",[375,378,381,384,387],{"_296":295,"_170":356,"_20":21,"_294":376,"_331":377},{"_20":21,"_170":356},{"_20":27,"_170":356},{"_296":297,"_170":358,"_20":31,"_294":379,"_331":380},{"_20":31,"_170":358},{"_20":35,"_170":358},{"_296":285,"_170":360,"_20":39,"_294":382,"_331":383},{"_20":39,"_170":360},{"_20":43,"_170":360},{"_296":362,"_170":363,"_20":47,"_294":385,"_331":386},{"_20":47,"_170":363},{"_20":51,"_170":363},{"_296":336,"_170":365,"_20":55,"_294":388,"_331":389},{"_20":55,"_170":365},{"_20":59,"_170":365},{"_284":297,"_170":391,"_353":392,"_366":399,"_373":403},"Dynamic Promises",[393,395,397],{"_296":295,"_170":394,"_20":67},"Promise Cache",{"_296":297,"_170":396,"_20":75},"useTransition",{"_296":285,"_170":398,"_20":83},"Pending Flash",[400,401,402],{"_296":295,"_170":394,"_20":63},{"_296":297,"_170":396,"_20":71},{"_296":285,"_170":398,"_20":79},[404,407,410],{"_296":295,"_170":394,"_20":63,"_294":405,"_331":406},{"_20":63,"_170":394},{"_20":67,"_170":394},{"_296":297,"_170":396,"_20":71,"_294":408,"_331":409},{"_20":71,"_170":396},{"_20":75,"_170":396},{"_296":285,"_170":398,"_20":79,"_294":411,"_331":412},{"_20":79,"_170":398},{"_20":83,"_170":398},{"_284":285,"_170":414,"_353":415,"_366":421,"_373":425},"Optimistic UI",[416,417,419],{"_296":295,"_170":414,"_20":91},{"_296":297,"_170":418,"_20":99},"Form Status",{"_296":285,"_170":420,"_20":107},"Multi-step Actions",[422,423,424],{"_296":295,"_170":414,"_20":87},{"_296":297,"_170":418,"_20":95},{"_296":285,"_170":420,"_20":103},[426,429,432],{"_296":295,"_170":414,"_20":87,"_294":427,"_331":428},{"_20":87,"_170":414},{"_20":91,"_170":414},{"_296":297,"_170":418,"_20":95,"_294":430,"_331":431},{"_20":95,"_170":418},{"_20":99,"_170":418},{"_296":285,"_170":420,"_20":103,"_294":433,"_331":434},{"_20":103,"_170":420},{"_20":107,"_170":420},{"_284":362,"_170":436,"_353":437,"_366":444,"_373":448},"Suspense img",[438,440,442],{"_296":295,"_170":439,"_20":115},"Img Component",{"_296":297,"_170":441,"_20":123},"Img Error Boundary",{"_296":285,"_170":443,"_20":131},"Key prop",[445,446,447],{"_296":295,"_170":439,"_20":111},{"_296":297,"_170":441,"_20":119},{"_296":285,"_170":443,"_20":127},[449,452,455],{"_296":295,"_170":439,"_20":111,"_294":450,"_331":451},{"_20":111,"_170":439},{"_20":115,"_170":439},{"_296":297,"_170":441,"_20":119,"_294":453,"_331":454},{"_20":119,"_170":441},{"_20":123,"_170":441},{"_296":285,"_170":443,"_20":127,"_294":456,"_331":457},{"_20":127,"_170":443},{"_20":131,"_170":443},{"_284":336,"_170":459,"_353":460,"_366":463,"_373":465},"Responsive",[461],{"_296":295,"_170":462,"_20":139},"useDeferredValue",[464],{"_296":295,"_170":462,"_20":135},[466],{"_296":295,"_170":462,"_20":135,"_294":467,"_331":468},{"_20":135,"_170":462},{"_20":139,"_170":462},{"_284":346,"_170":470,"_353":471,"_366":476,"_373":479},"Optimizations",[472,474],{"_296":295,"_170":473,"_20":147},"Parallel Loading",{"_296":297,"_170":475,"_20":155},"Server Cache",[477,478],{"_296":295,"_170":473,"_20":143},{"_296":297,"_170":475,"_20":151},[480,483],{"_296":295,"_170":473,"_20":143,"_294":481,"_331":482},{"_20":143,"_170":473},{"_20":147,"_170":473},{"_296":297,"_170":475,"_20":151,"_294":484,"_331":485},{"_20":151,"_170":475},{"_20":155,"_170":475},"playground",{"_488":-5,"_284":-2,"_296":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_492":493,"_223":171,"_213":494,"_588":589,"_590":591,"_592":593,"_597":598,"_603":604},"articleId","workshop-react-suspense-6-finished",{"_22":495,"_284":346,"_496":497,"_170":470,"_498":499,"_500":501,"_502":503,"_505":506,"_373":508,"_366":566,"_353":577},"/myapp/workshop-content/exercises/06.optimization","dirName","06.optimization","instructionsCode","var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(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))!m.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=y((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\"}),`\n`,(0,a.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-suspense/intro-to-optimizations\"}),`\n`,(0,a.jsx)(\"callout-warning\",{children:(0,a.jsxs)(e.p,{children:[`The problem of waterfalls is something we need to consider as web developers.\nHowever, the specific example we use in this exercise was fixed by React 19\nitself. I recommend you still go through this exercise to learn more about how\nwaterfalls work. We'll get into waterfalls more in the `,(0,a.jsx)(e.a,{href:\"https://server-components.epicreact.dev/\",children:`React Server\nComponents`}),` workshop as well. Learn\nmore from `,(0,a.jsx)(e.a,{href:\"https://github.com/epicweb-dev/react-suspense/issues/98\",children:`issue #98 on the workshop\nrepo`}),\".\"]})}),`\n`,(0,a.jsx)(e.h2,{children:\"Waterfalls\"}),`\n`,(0,a.jsx)(e.p,{children:`React Suspense is a powerful way to colocate data requirements with the UI that\nrequires the data. However, there is one drawback to this approach and that\ninvolves something called \"waterfalls.\"`}),`\n`,(0,a.jsx)(e.p,{children:`If you look at the Network tab of your DevTools, you'll find a \"waterfall\"\ncolumn. This displays the time each request was in flight. When the request\nwaterfalls look like a stair-stepping cascade, that leads to a slower user\nexperience than if all the requests start at the same time.`}),`\n`,(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\ngeneral (even the fast ones), it is often (confusingly) used to simply\ndescribe what I'm calling the \"stair-stepping cascade\" (the slow kind of\nwaterfall). So, in the future when I say \"waterfall\" I'm talking about the\n\"stair-stepping cascade\" kind unless otherwise noted.`})}),`\n`,(0,a.jsx)(e.p,{children:\"To be clear:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{children:`Request A --------> Response A\n Request B --------> Response B\n Request C --------> Response C`})}),`\n`,(0,a.jsx)(e.p,{children:\"This is a stair-stepping cascade, alternatively:\"}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{children:`Request A --------> Response A\nRequest B --------> Response B\nRequest C --------> Response C`})}),`\n`,(0,a.jsx)(e.p,{children:\"This is much faster.\"}),`\n`,(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\nneed depends on other data to be retrieved first (if that's the case, then fix\nyour API to not have this limitation).`})}),`\n`,(0,a.jsx)(e.p,{children:`Due to the design of Suspense, you can easily create waterfalls by mistake. For\nexample:`}),`\n`,(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\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(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\"}),\"))\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(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\"}),\"))\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(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:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"The trouble with this is the \",(0,a.jsx)(e.code,{children:\"use(getFavoritesCount(username))\"}),` will cause the\n`,(0,a.jsx)(e.code,{children:\"ProfileDetails\"}),\" to suspend until the \",(0,a.jsx)(e.code,{children:\"getFavoritesCount\"}),` request is resolved.\nOnly then will the `,(0,a.jsx)(e.code,{children:\"getFriends\"}),\" request be made. This is a waterfall.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[`To solve this problem is pretty simple, though maybe not obvious at first. You\njust need to make sure to trigger both requests before `,(0,a.jsx)(e.code,{children:\"use\"}),\" is called:\"]}),`\n`,(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\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\",(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:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"}\",`\n`]})]})}),`\n`,(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\"}),`\ncomponent will remain suspended when both are resolved (the order of the `,(0,a.jsx)(e.code,{children:\"use\"}),`\ncalls doesn't matter in this case).`]}),`\n`,(0,a.jsx)(e.p,{children:`That's simple enough (you could even make a custom Lint rule to enforce you\nalways do this correctly), but there's an even trickier place where this can\nhappen.`}),`\n`,(0,a.jsx)(e.p,{children:\"What if you were to nest these components?\"}),`\n`,(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\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(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\"}),\"))\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"hr\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:`\n`}),(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\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\t\",(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:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[`Can you find the waterfall? It's not as obvious as the previous example, but\nit's there. The `,(0,a.jsx)(e.code,{children:\"ProfilePage\"}),\" component will suspend until \",(0,a.jsx)(e.code,{children:\"userAvatarPromise\"}),`\nis resolved. Only then will the `,(0,a.jsx)(e.code,{children:\"ProfileDetails\"}),` component trigger the\n`,(0,a.jsx)(e.code,{children:\"favoritesCountPromise\"}),\" and \",(0,a.jsx)(e.code,{children:\"friendsPromise\"}),\" requests.\"]}),`\n`,(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\nthe user until the `,(0,a.jsx)(e.code,{children:\"ProfilePage\"}),\" component is resolved. This is a waterfall.\"]}),`\n`,(0,a.jsx)(e.p,{children:`To solve this problem, you need to trigger the requests in the parent component\nand pass the promises down to the child components:`}),`\n`,(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\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ProfileDetails\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t\t\t\",(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:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\t\t\t\",(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:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\t\t/>\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"hr\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:`\n`}),(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\"}),\"({\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"favoritesCountPromise\"}),\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"friendsPromise\"}),\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",children:[\"}\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",children:[\"\t\",(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\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",children:[\"\t\",(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\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",children:[\"}) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",children:[\"\t\",(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:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[`Sheesh, that's annoying!! I thought the whole point was to be able to colocate\nour data requirements with the code that requires it. That's what's so cool\nabout the `,(0,a.jsx)(e.code,{children:\"use\"}),\" hook and the \",(0,a.jsx)(e.code,{children:\"Suspense\"}),\" model!\"]}),`\n`,(0,a.jsx)(e.p,{children:`Well, because of the promise caching we added before, you can actually get away\nwith keeping things as they were before and simply adding a call to the cached\nfunction in the parent component instead of adding promise props everywhere:`}),`\n`,(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\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",\"data-add\":!0,\"data-diff-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// preload some necessary data\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",\"data-add\":!0,\"data-diff-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getFavoritesCount\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"username\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",\"data-add\":!0,\"data-diff-line-number\":\"4\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getFriends\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"username\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-add\":!0,\"data-diff-line-number\":\"5\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getPosts\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"username\"}),\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"6\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-diff-line-number\":\"7\",children:[\"\t\",(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\"}),\"))\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-diff-line-number\":\"8\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-diff-line-number\":\"9\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-diff-line-number\":\"10\",children:[\"\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-diff-line-number\":\"11\",children:[\"\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-diff-line-number\":\"12\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"hr\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-diff-line-number\":\"13\",children:[\"\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-diff-line-number\":\"14\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-diff-line-number\":\"15\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-diff-line-number\":\"16\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",\"data-diff-line-number\":\"17\",children:`\n`}),(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\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"19\",\"data-diff-line-number\":\"19\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// these will get the cached promise that was created by the parent above\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"20\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"21\",\"data-diff-line-number\":\"21\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-diff-line-number\":\"22\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-diff-line-number\":\"23\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-diff-line-number\":\"24\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-diff-line-number\":\"25\",children:[\"\t\",(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:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-diff-line-number\":\"26\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[`What's annoying about this is that you have to remember to call the function\nbefore you render the component. This is a bit of a leaky abstraction. You could\nmake it a tiny bit better with a utility function you tack onto the\n`,(0,a.jsx)(e.code,{children:\"ProfileDetails\"}),\" if you want:\"]}),`\n`,(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\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"2\",\"data-diff-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// preload some necessary data\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"3\",\"data-diff-line-number\":\"3\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"4\",\"data-diff-line-number\":\"4\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",\"data-diff-line-number\":\"5\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",\"data-diff-line-number\":\"6\",children:[\"\t\",(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\"}),\"))\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",\"data-diff-line-number\":\"7\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",\"data-diff-line-number\":\"8\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",\"data-diff-line-number\":\"9\",children:[\"\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",\"data-diff-line-number\":\"10\",children:[\"\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",\"data-diff-line-number\":\"11\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"hr\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",\"data-diff-line-number\":\"12\",children:[\"\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",\"data-diff-line-number\":\"13\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",\"data-diff-line-number\":\"14\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",\"data-diff-line-number\":\"15\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",\"data-diff-line-number\":\"16\",children:`\n`}),(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\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"18\",\"data-diff-line-number\":\"18\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// these will get the cached promise that was created by the parent above\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"19\",\"data-diff-line-number\":\"19\",children:[\"\t\",(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:\"=\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"20\",\"data-diff-line-number\":\"20\",children:[\"\t\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",\"data-diff-line-number\":\"21\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",\"data-diff-line-number\":\"22\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",\"data-diff-line-number\":\"23\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",\"data-diff-line-number\":\"24\",children:[\"\t\",(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:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",\"data-diff-line-number\":\"25\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",\"data-diff-line-number\":\"26\",children:`\n`}),(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:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",\"data-add\":!0,\"data-diff-line-number\":\"28\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",\"data-add\":!0,\"data-diff-line-number\":\"29\",children:[\"\t\tfavoritesCountPromise: \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getFavoritesCount\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"username\"}),\"),\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",\"data-add\":!0,\"data-diff-line-number\":\"30\",children:[\"\t\tfriendsPromise: \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getFriends\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"username\"}),\"),\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",\"data-add\":!0,\"data-diff-line-number\":\"31\",children:[\"\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",\"data-add\":!0,\"data-diff-line-number\":\"32\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[`But then you'll run into issues if you decide you want to lazy load\n`,(0,a.jsx)(e.code,{children:\"ProfileDetails\"}),\". You'll have to remember to call \",(0,a.jsx)(e.code,{children:\"ProfileDetails.loadData\"}),` in\nthe parent component before you render the `,(0,a.jsx)(e.code,{children:\"ProfileDetails\"}),\" component.\"]}),`\n`,(0,a.jsx)(e.p,{children:`Alternatively, you could restructure your components to avoid this problem using\nthe composition pattern we learned about in the Advanced React Patterns\nworkshop:`}),`\n`,(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\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\",(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\"}),\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ProfileDetails\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t\t\t\t\",(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:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"\t\t\t\t\",(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:\"=>\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"\t\t\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\t\t\t\t))\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"\t\t\t/>\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"hr\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ProfilePosts\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:[\"\t\t\t\t\",(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:\"=>\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:[\"\t\t\t\t\t<\",(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:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",children:[\"\t\t\t\t))\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",children:[\"\t\t\t/>\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`And maybe that's ok, but sometimes that just doesn't feel quite right for the UI\nwe're building.`}),`\n`,(0,a.jsxs)(e.p,{children:[`Really, the problem here is that we naturally follow a render-then-fetch pattern\nwhich is we don't fetch until we render. The pattern we should be following is\na fetch-as-you-render pattern which is to say you trigger all fetch requests\nbefore you render anything. You can learn more about this in\n`,(0,a.jsx)(e.a,{href:\"https://epicreact.dev/render-as-you-fetch/\",children:\"Render as you fetch (with and without suspense)\"}),\".\"]}),`\n`,(0,a.jsxs)(e.p,{children:[`Another thing you'll want to think about in this regard is the fact that often\nwe \"code-split\" our components using lazy loading with `,(0,a.jsx)(e.code,{children:\"lazy\"}),` (which we cover in\nthe React Performance workshop). Combine this with colocating data fetching and\nyou wind up in a situation where you have a waterfall because you have to first\nrequest the code, then the code runs, then that code requests the data.`]}),`\n`,(0,a.jsx)(e.p,{children:\"Ugh, there must be a better way!!\"}),`\n`,(0,a.jsx)(e.p,{children:\"There is \\u{1F60E}\"}),`\n`,(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\nwin. It's designed to help you avoid waterfalls naturally.`]})}),`\n`,(0,a.jsx)(e.p,{children:`And the future deeper integration of Remix with React Server Components will\nmake this even more powerful.`}),`\n`,(0,a.jsx)(e.p,{children:`Additionally, it's data loading primitives are designed to help you avoid\nwaterfalls without even thinking about it.`}),`\n`,(0,a.jsx)(e.p,{children:`But if you're using raw suspense as we are in this workshop, you'll need to\nthink about these things.`}),`\n`,(0,a.jsx)(e.h2,{children:\"Cache headers\"}),`\n`,(0,a.jsx)(e.p,{children:`As often happens with optimizations, some of the best optimizations happen on\nthe backend. Your app can be no faster than your slowest query. So finding ways\nto make your queries faster is a huge win.`}),`\n`,(0,a.jsx)(e.p,{children:`One way you can speed up your backend is by applying caching at various layers\nof your tech stack. One of these layers is in HTTP and for certain kinds of data\nyou can use cache headers to enable the client to cache the data and prevent\nnetwork requests even across page refreshes.`}),`\n`,(0,a.jsxs)(e.p,{children:[`To do this, you set the\n`,(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\"})}),`\nheader on your HTTP responses. This header can have a variety of values (called\n\"directives\") that tell the client how to cache the response. The most common\ndirective is `,(0,a.jsx)(e.code,{children:\"max-age\"}),` which tells the client how long it can cache the\nresponse.`]}),`\n`,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{children:\"Cache-Control: max-age=3600\"})}),`\n`,(0,a.jsx)(e.p,{children:`This tells the client to cache the response for 3600 seconds (1 hour). This\nmeans that if the client makes a request for the same resource within 1 hour of\nthe first request, it will use the cached response instead of making a network\nrequest.`}),`\n`,(0,a.jsx)(e.p,{children:`As with all caching this comes with tradeoffs. If the data changes frequently,\nyou might not want to cache it for very long. If the data is sensitive, you\nmight not want to cache it at all (in which case, a server-side cache might be\nmore 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);})();\n;return Component;","finishedCode","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!x.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return t};var j=(t,e,o)=>(o=t!=null?m(l(t)):{},a(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>a(i({},\"__esModule\",{value:!0}),t);var p=w((y,c)=>{c.exports=_jsx_runtime});var E={};_(E,{default:()=>h,frontmatter:()=>k});var n=j(p()),k=void 0;function d(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||g(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Optimizations\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-suspense/dad-joke-break-optimizations\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} There's lots to think about with performance optimizations (there's an entire\nworkshop about that!), but this is a good start. Well done!`})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}function g(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(E);})();\n;return Component;","instructionsEpicVideoEmbeds",[504],"https://www.epicreact.dev/workshops/react-suspense/intro-to-optimizations","finishedEpicVideoEmbeds",[507],"https://www.epicreact.dev/workshops/react-suspense/dad-joke-break-optimizations",[509,542],{"_296":295,"_294":510,"_331":530},{"_20":143,"_170":473,"_496":511,"_22":144,"_24":145,"_498":512,"_513":514,"_516":517,"_524":525,"_527":528,"_284":346,"_296":295,"_9":294,"_529":147},"01.problem.parallel","var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!m.call(t,i)&&i!==n&&a(t,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return t};var v=(t,e,n)=>(n=t!=null?p(w(t)):{},s(e||!t||!t.__esModule?a(n,\"default\",{value:t,enumerable:!0}):n,t)),b=t=>s(a({},\"__esModule\",{value:!0}),t);var d=g((D,h)=>{h.exports=_jsx_runtime});var y={};x(y,{default:()=>l,frontmatter:()=>_});var o=v(d()),_=void 0;function c(t){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||k(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Parallel Loading\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-suspense/parallel-loading\"}),`\n`,(0,o.jsx)(\"callout-warning\",{children:(0,o.jsxs)(e.p,{children:[`The video was recorded with a beta version of React 19 and the behavior you\nsee in the video was fixed in the final release of React 19. Feel free to skip\nthis step if you'd like. Learn more from `,(0,o.jsx)(e.a,{href:\"https://github.com/epicweb-dev/react-suspense/issues/98\",children:`issue #98 on the workshop\nrepo`}),\".\"]})}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Right now our \",(0,o.jsx)(e.code,{children:\"ShipDetails\"}),` has to wait for the ship's data before we render\nthe `,(0,o.jsx)(e.code,{children:\"ShipImg\"}),` component which will then start loading the image. However, we\ncan start loading the image as soon as we have the ship's name.`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"Please preload the image for the ship in \",(0,o.jsx)(e.code,{children:\"ShipDetails\"}),` so we don't have that\nwaterfall.`]}),`\n`,(0,o.jsx)(e.p,{children:`Pull up the Network tab of your DevTools to and click a ship. You'll notice that\nbefore the image doesn't start loading until the ship's data is loaded and after\nthe image starts loading as soon as you select a ship.`})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(c,{...t})}):c(t)}function k(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(y);})();\n;return Component;","epicVideoEmbeds",[515],"https://www.epicreact.dev/workshops/react-suspense/parallel-loading","test",{"_9":518,"_519":520,"_521":522},"browser","pathname","/app/06.01.problem/test/","testFiles",[523],"parallel-loading.test.ts","dev",{"_9":518,"_519":526},"/app/06.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/06.optimization/01.problem.parallel?view=editor&title=Parallel+Loading+%28problem%29","solutionName",{"_20":147,"_170":473,"_496":531,"_22":148,"_24":149,"_498":532,"_513":533,"_516":535,"_524":538,"_527":540,"_284":346,"_296":295,"_9":331,"_541":-5},"01.solution.parallel","var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of w(e))!m.call(t,r)&&r!==n&&i(t,r,{get:()=>e[r],enumerable:!(a=h(e,r))||a.enumerable});return t};var g=(t,e,n)=>(n=t!=null?l(f(t)):{},s(e||!t||!t.__esModule?i(n,\"default\",{value:t,enumerable:!0}):n,t)),_=t=>s(i({},\"__esModule\",{value:!0}),t);var d=x((M,c)=>{c.exports=_jsx_runtime});var v={};y(v,{default:()=>u,frontmatter:()=>j});var o=g(d()),j=void 0;function p(t){let e={a:\"a\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||b(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Parallel Loading\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-suspense/parallel-loading/solution\"}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Boy, this sure would be annoying to have to worry about everywhere in our app\nwhere we're loading data. Hopefully we can adopt `,(0,o.jsx)(e.a,{href:\"https://remix.run\",children:\"Remix\"}),` in\nthe future so we don't have to worry about this \\u{1F605}`]})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(p,{...t})}):p(t)}function b(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(v);})();\n;return Component;",[534],"https://www.epicreact.dev/workshops/react-suspense/parallel-loading/solution",{"_9":518,"_519":536,"_521":537},"/app/06.01.solution/test/",[523],{"_9":518,"_519":539},"/app/06.01.solution/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/06.optimization/01.solution.parallel?view=editor&title=Parallel+Loading+%28solution%29","problemName",{"_296":297,"_294":543,"_331":555},{"_20":151,"_170":475,"_496":544,"_22":152,"_24":153,"_498":545,"_513":546,"_516":548,"_524":552,"_527":554,"_284":346,"_296":297,"_9":294,"_529":155},"02.problem.cache","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!x.call(t,s)&&s!==n&&i(t,s,{get:()=>e[s],enumerable:!(o=f(e,s))||o.enumerable});return t};var j=(t,e,n)=>(n=t!=null?u(w(t)):{},c(e||!t||!t.__esModule?i(n,\"default\",{value:t,enumerable:!0}):n,t)),v=t=>c(i({},\"__esModule\",{value:!0}),t);var a=g((E,h)=>{h.exports=_jsx_runtime});var C={};_(C,{default:()=>l,frontmatter:()=>y});var r=j(a()),y=void 0;function d(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n,InlineFile:o}=e;return n||p(\"EpicVideo\",!0),o||p(\"InlineFile\",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h1,{children:\"Server Cache\"}),`\n`,(0,r.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-suspense/server-cache\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} As the user selects different ships, we cache the promise in our \",(0,r.jsx)(e.code,{children:\"getShip\"}),`\nutility. But if they refresh the page, the cache is lost. Our ship data doesn't\nchange much so we could have the user's browser cache the ship details for a\nwhile to make the data persist across page refreshes.`]}),`\n`,(0,r.jsxs)(e.p,{children:[\"Please add a \",(0,r.jsx)(e.code,{children:\"Cache-Control\"}),\" header to \",(0,r.jsx)(o,{file:\"api.server.ts\"}),`\nfor both our API endpoints.`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(d,{...t})}):d(t)}function p(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return v(C);})();\n;return Component;",[547],"https://www.epicreact.dev/workshops/react-suspense/server-cache",{"_9":518,"_519":549,"_521":550},"/app/06.02.problem/test/",[551],"cache-control.test.ts",{"_9":518,"_519":553},"/app/06.02.problem/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/06.optimization/02.problem.cache?view=editor&title=Server+Cache+%28problem%29",{"_20":155,"_170":475,"_496":556,"_22":156,"_24":157,"_498":557,"_513":558,"_516":560,"_524":563,"_527":565,"_284":346,"_296":297,"_9":331,"_541":-5},"02.solution.cache","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},i=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!m.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(a=u(e,r))||a.enumerable});return t};var _=(t,e,o)=>(o=t!=null?p(w(t)):{},i(e||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>i(s({},\"__esModule\",{value:!0}),t);var d=x((E,c)=>{c.exports=_jsx_runtime});var v={};g(v,{default:()=>l,frontmatter:()=>j});var n=_(d()),j=void 0;function h(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Server Cache\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-suspense/server-cache/solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Good work! That's nice!\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F989} There's a whole other world of optimizations we can get into when we start\ntalking about the backend, but for now this is as far as we'll go. We just want\nyou to know that there are a lot of things you can do to make your server faster\nand not all performance problems should be solved on the frontend.`})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}function k(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(v);})();\n;return Component;",[559],"https://www.epicreact.dev/workshops/react-suspense/server-cache/solution",{"_9":518,"_519":561,"_521":562},"/app/06.02.solution/test/",[551],{"_9":518,"_519":564},"/app/06.02.solution/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/06.optimization/02.solution.cache?view=editor&title=Server+Cache+%28solution%29",[567,572],{"_20":143,"_170":473,"_496":511,"_22":144,"_24":145,"_498":512,"_513":568,"_516":569,"_524":571,"_527":528,"_284":346,"_296":295,"_9":294,"_529":147},[515],{"_9":518,"_519":520,"_521":570},[523],{"_9":518,"_519":526},{"_20":151,"_170":475,"_496":544,"_22":152,"_24":153,"_498":545,"_513":573,"_516":574,"_524":576,"_527":554,"_284":346,"_296":297,"_9":294,"_529":155},[547],{"_9":518,"_519":549,"_521":575},[551],{"_9":518,"_519":553},[578,583],{"_20":147,"_170":473,"_496":531,"_22":148,"_24":149,"_498":532,"_513":579,"_516":580,"_524":582,"_527":540,"_284":346,"_296":295,"_9":331,"_541":-5},[534],{"_9":518,"_519":536,"_521":581},[523],{"_9":518,"_519":539},{"_20":155,"_170":475,"_496":556,"_22":156,"_24":157,"_498":557,"_513":584,"_516":585,"_524":587,"_527":565,"_284":346,"_296":297,"_9":331,"_541":-5},[559],{"_9":518,"_519":561,"_521":586},[551],{"_9":518,"_519":564},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=React%20Suspense%20%F0%9F%94%80&entry.428900931=Optimizations","epicVideoInfosPromise",["P",591],"exerciseFinished",{"_594":595,"_24":596},"file","/myapp/workshop-content/exercises/06.optimization/FINISHED.mdx","exercises/06.optimization/FINISHED.mdx","prevStepLink",{"_599":600,"_601":602},"to","/exercise/06/02/solution","aria-label","Server Cache (solution)","nextStepLink",{"_599":605,"_601":606},"/finished","Finished! 🎉","actionData","errors"]

06. Optimizations/Elaboration