[{"_1":2,"_623":-5,"_624":-5},"loaderData",{"_3":4,"_364":365,"_506":507},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_158":159,"_161":162,"_163":16,"_164":165,"_222":167,"_223":169,"_170":171,"_224":225,"_246":247,"_271":-5,"_272":-5,"_273":274},"userId",{"_7":8,"_9":10},"id","acxwrc2rs3qp31irygwjmn44","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},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_166":167,"_168":169,"_170":171,"_177":178,"_195":196,"_198":199,"_200":201,"_202":203,"_206":207,"_212":213,"_216":217,"_218":219,"_220":221},"title","React Suspense 🔀","subtitle","Simplify your Async UI and improve your User Experience","instructor",{"_20":172,"_173":174,"_175":176},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-suspense","discordChannelId","1285244676286189569","discordTags",[193,194],"1285246046498328627","1285245867791745116","onboardingVideo",[197],"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",{"_204":205},"view","editor","forms",{"_208":209,"_210":211},"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",{"_214":215},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_226":227,"_228":229,"_230":231,"_232":199,"_233":201,"_234":215,"_235":236,"_237":238,"_239":240,"_241":215,"_242":243,"_244":245},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_WORKSHOP_INSTANCE_ID","4e1570b81d1baf3d16bd3a08ece570cb","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","6.40.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","c8071aecbe8fbab47bafda13017613e227f52c30b4623738db42eba4496c9bac","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_248":249,"_250":251,"_252":253,"_254":255,"_256":255,"_257":258,"_265":266,"_267":268,"_269":217,"_270":215},"protocol","http:","hostname","suspense.epicreact.dev","port","","origin","http://suspense.epicreact.dev","domain","hints",{"_259":260,"_261":262,"_263":264},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/06/finished","session",{"_259":-5},"separator","online","toast","confettiId","presence",{"_275":276},"users",[277,295,305,312,319,329,339,346,353,359],{"_7":278,"_279":215,"_280":281,"_282":283,"_20":284,"_285":286},"3fc13fe7-469f-46c7-957c-9c5531f649f8","hasAccess","imageUrlSmall","https://avatars.githubusercontent.com/u/3429093?v=4&size=64","imageUrlLarge","https://avatars.githubusercontent.com/u/3429093?v=4&size=512","Jorge Gonzalez","location",{"_222":287,"_254":288,"_210":289},"React Fundamentals ⚛","http://localhost:5639",{"_9":290,"_291":292,"_293":294},"problem","exerciseNumber",7,"stepNumber",5,{"_7":296,"_279":215,"_280":297,"_282":298,"_20":299,"_285":300},"0e17f9f6-b6f8-4e70-9843-997aaf5f04bc","https://www.gravatar.com/avatar/e8d639b13492773df687df73ad3312d3?size=64&default=identicon","https://www.gravatar.com/avatar/e8d639b13492773df687df73ad3312d3?size=512&default=identicon","Albert Tarradas",{"_222":301,"_254":288,"_210":302},"Advanced React APIs 🔥",{"_9":290,"_291":303,"_293":304},4,2,{"_7":306,"_279":215,"_280":307,"_282":308,"_20":309,"_285":310},"3e02fc3d-79e0-4f7d-8428-0fc3f67c381e","https://www.gravatar.com/avatar/617478f6288ef784e482e283817c0535?size=64&default=identicon","https://www.gravatar.com/avatar/617478f6288ef784e482e283817c0535?size=512&default=identicon","Andre Carlucci",{"_222":301,"_254":288,"_210":311},{"_291":292},{"_7":313,"_279":215,"_280":314,"_282":315,"_20":316,"_285":317},"37021da2-fc74-4ba8-88e7-75554d023554","https://www.gravatar.com/avatar/c39d314a95796b306fcda200bf53b64c?size=64&default=identicon","https://www.gravatar.com/avatar/c39d314a95796b306fcda200bf53b64c?size=512&default=identicon","Arian Orwat",{"_222":287,"_254":288,"_210":318},{"_291":292},{"_7":320,"_279":215,"_280":321,"_282":322,"_20":323,"_285":324},"1928c88f-0548-46e7-a97a-17919a1fff6a","https://www.gravatar.com/avatar/ea3e5e5b01d7976792274f096dccd7aa?size=64&default=identicon","https://www.gravatar.com/avatar/ea3e5e5b01d7976792274f096dccd7aa?size=512&default=identicon","Bryce",{"_222":325,"_254":288,"_210":326},"MCP UI 🪟",{"_9":327,"_291":304,"_293":328},"solution",1,{"_7":330,"_279":215,"_280":331,"_282":332,"_20":333,"_285":334},"b28059b9-1a10-4d06-8af7-549f95f203a8","https://www.gravatar.com/avatar/03bc87ad50b6ef09ccbd5ea00ed225bc?size=64&default=identicon","https://www.gravatar.com/avatar/03bc87ad50b6ef09ccbd5ea00ed225bc?size=512&default=identicon","thomas grice",{"_222":335,"_254":336,"_210":337},"Web Authentication 🔐","http://localhost:5640",{"_291":338},17,{"_7":340,"_279":215,"_280":341,"_282":342,"_20":-5,"_285":343},"f09acb8f-323d-425a-969d-a34ec10027f9","https://www.gravatar.com/avatar/2d2a96f61d454c63a1e956e757ab5cec?size=64&default=identicon","https://www.gravatar.com/avatar/2d2a96f61d454c63a1e956e757ab5cec?size=512&default=identicon",{"_222":344,"_254":288,"_210":345},"MCP Fundamentals 🧱",{"_9":327,"_291":304,"_293":328},{"_7":347,"_279":215,"_280":348,"_282":349,"_20":-5,"_285":350},"7862769b-340f-4f31-b6f1-a1f8817e35d0","https://www.gravatar.com/avatar/0f2f5ac5811383957995dc653e74a5ac?size=64&default=identicon","https://www.gravatar.com/avatar/0f2f5ac5811383957995dc653e74a5ac?size=512&default=identicon",{"_222":325,"_254":336,"_210":351},{"_9":327,"_291":352,"_293":352},3,{"_7":354,"_279":215,"_280":355,"_282":356,"_20":-5,"_285":357},"0c3548c0-5c2e-4dbb-aa86-96f7d9ac7264","https://cdn.discordapp.com/avatars/845542637581631498/9275261f3169de0ec86d2d1b7a74fb4a.png?size=64","https://cdn.discordapp.com/avatars/845542637581631498/9275261f3169de0ec86d2d1b7a74fb4a.png?size=512",{"_222":325,"_254":336,"_210":358},{"_9":327,"_291":352,"_293":328},{"_7":360,"_285":361},"wz30b413m1v6x9n6b1xoqo5g",{"_222":167,"_254":255,"_210":362},{"_291":363,"_293":-5,"_9":-5},6,"routes/_app+/_layout",{"_222":167,"_366":367,"_502":503,"_505":16},"exercises",[368,406,429,451,474,485],{"_291":328,"_166":369,"_370":371,"_382":383,"_389":390},"Data fetching","solutions",[372,374,376,378,380],{"_293":328,"_166":373,"_20":27},"Throwing Promises",{"_293":304,"_166":375,"_20":35},"Error Handling",{"_293":352,"_166":377,"_20":43},"Formal Status",{"_293":303,"_166":379,"_20":51},"Utility",{"_293":294,"_166":381,"_20":59},"use React","problems",[384,385,386,387,388],{"_293":328,"_166":373,"_20":21},{"_293":304,"_166":375,"_20":31},{"_293":352,"_166":377,"_20":39},{"_293":303,"_166":379,"_20":47},{"_293":294,"_166":381,"_20":55},"steps",[391,394,397,400,403],{"_293":328,"_166":373,"_20":21,"_290":392,"_327":393},{"_20":21,"_166":373},{"_20":27,"_166":373},{"_293":304,"_166":375,"_20":31,"_290":395,"_327":396},{"_20":31,"_166":375},{"_20":35,"_166":375},{"_293":352,"_166":377,"_20":39,"_290":398,"_327":399},{"_20":39,"_166":377},{"_20":43,"_166":377},{"_293":303,"_166":379,"_20":47,"_290":401,"_327":402},{"_20":47,"_166":379},{"_20":51,"_166":379},{"_293":294,"_166":381,"_20":55,"_290":404,"_327":405},{"_20":55,"_166":381},{"_20":59,"_166":381},{"_291":304,"_166":407,"_370":408,"_382":415,"_389":419},"Dynamic Promises",[409,411,413],{"_293":328,"_166":410,"_20":67},"Promise Cache",{"_293":304,"_166":412,"_20":75},"useTransition",{"_293":352,"_166":414,"_20":83},"Pending Flash",[416,417,418],{"_293":328,"_166":410,"_20":63},{"_293":304,"_166":412,"_20":71},{"_293":352,"_166":414,"_20":79},[420,423,426],{"_293":328,"_166":410,"_20":63,"_290":421,"_327":422},{"_20":63,"_166":410},{"_20":67,"_166":410},{"_293":304,"_166":412,"_20":71,"_290":424,"_327":425},{"_20":71,"_166":412},{"_20":75,"_166":412},{"_293":352,"_166":414,"_20":79,"_290":427,"_327":428},{"_20":79,"_166":414},{"_20":83,"_166":414},{"_291":352,"_166":430,"_370":431,"_382":437,"_389":441},"Optimistic UI",[432,433,435],{"_293":328,"_166":430,"_20":91},{"_293":304,"_166":434,"_20":99},"Form Status",{"_293":352,"_166":436,"_20":107},"Multi-step Actions",[438,439,440],{"_293":328,"_166":430,"_20":87},{"_293":304,"_166":434,"_20":95},{"_293":352,"_166":436,"_20":103},[442,445,448],{"_293":328,"_166":430,"_20":87,"_290":443,"_327":444},{"_20":87,"_166":430},{"_20":91,"_166":430},{"_293":304,"_166":434,"_20":95,"_290":446,"_327":447},{"_20":95,"_166":434},{"_20":99,"_166":434},{"_293":352,"_166":436,"_20":103,"_290":449,"_327":450},{"_20":103,"_166":436},{"_20":107,"_166":436},{"_291":303,"_166":452,"_370":453,"_382":460,"_389":464},"Suspense img",[454,456,458],{"_293":328,"_166":455,"_20":115},"Img Component",{"_293":304,"_166":457,"_20":123},"Img Error Boundary",{"_293":352,"_166":459,"_20":131},"Key prop",[461,462,463],{"_293":328,"_166":455,"_20":111},{"_293":304,"_166":457,"_20":119},{"_293":352,"_166":459,"_20":127},[465,468,471],{"_293":328,"_166":455,"_20":111,"_290":466,"_327":467},{"_20":111,"_166":455},{"_20":115,"_166":455},{"_293":304,"_166":457,"_20":119,"_290":469,"_327":470},{"_20":119,"_166":457},{"_20":123,"_166":457},{"_293":352,"_166":459,"_20":127,"_290":472,"_327":473},{"_20":127,"_166":459},{"_20":131,"_166":459},{"_291":294,"_166":475,"_370":476,"_382":479,"_389":481},"Responsive",[477],{"_293":328,"_166":478,"_20":139},"useDeferredValue",[480],{"_293":328,"_166":478,"_20":135},[482],{"_293":328,"_166":478,"_20":135,"_290":483,"_327":484},{"_20":135,"_166":478},{"_20":139,"_166":478},{"_291":363,"_166":486,"_370":487,"_382":492,"_389":495},"Optimizations",[488,490],{"_293":328,"_166":489,"_20":147},"Parallel Loading",{"_293":304,"_166":491,"_20":155},"Server Cache",[493,494],{"_293":328,"_166":489,"_20":143},{"_293":304,"_166":491,"_20":151},[496,499],{"_293":328,"_166":489,"_20":143,"_290":497,"_327":498},{"_20":143,"_166":489},{"_20":147,"_166":489},{"_293":304,"_166":491,"_20":151,"_290":500,"_327":501},{"_20":151,"_166":491},{"_20":155,"_166":491},"playground",{"_504":-5,"_291":-2,"_293":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_508":509,"_222":167,"_210":510,"_604":605,"_606":607,"_608":609,"_613":614,"_619":620},"articleId","workshop-react-suspense-6-finished",{"_22":511,"_291":363,"_512":513,"_166":486,"_514":515,"_516":517,"_518":519,"_521":522,"_389":524,"_382":582,"_370":593},"/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",[520],"https://www.epicreact.dev/workshops/react-suspense/intro-to-optimizations","finishedEpicVideoEmbeds",[523],"https://www.epicreact.dev/workshops/react-suspense/dad-joke-break-optimizations",[525,558],{"_293":328,"_290":526,"_327":546},{"_20":143,"_166":489,"_512":527,"_22":144,"_24":145,"_514":528,"_529":530,"_532":533,"_540":541,"_543":544,"_291":363,"_293":328,"_9":290,"_545":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",[531],"https://www.epicreact.dev/workshops/react-suspense/parallel-loading","test",{"_9":534,"_535":536,"_537":538},"browser","pathname","/app/06.01.problem/test/","testFiles",[539],"parallel-loading.test.ts","dev",{"_9":534,"_535":542},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":147,"_166":489,"_512":547,"_22":148,"_24":149,"_514":548,"_529":549,"_532":551,"_540":554,"_543":556,"_291":363,"_293":328,"_9":327,"_557":-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;",[550],"https://www.epicreact.dev/workshops/react-suspense/parallel-loading/solution",{"_9":534,"_535":552,"_537":553},"/app/06.01.solution/test/",[539],{"_9":534,"_535":555},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_293":304,"_290":559,"_327":571},{"_20":151,"_166":491,"_512":560,"_22":152,"_24":153,"_514":561,"_529":562,"_532":564,"_540":568,"_543":570,"_291":363,"_293":304,"_9":290,"_545":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;",[563],"https://www.epicreact.dev/workshops/react-suspense/server-cache",{"_9":534,"_535":565,"_537":566},"/app/06.02.problem/test/",[567],"cache-control.test.ts",{"_9":534,"_535":569},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":155,"_166":491,"_512":572,"_22":156,"_24":157,"_514":573,"_529":574,"_532":576,"_540":579,"_543":581,"_291":363,"_293":304,"_9":327,"_557":-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;",[575],"https://www.epicreact.dev/workshops/react-suspense/server-cache/solution",{"_9":534,"_535":577,"_537":578},"/app/06.02.solution/test/",[567],{"_9":534,"_535":580},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[583,588],{"_20":143,"_166":489,"_512":527,"_22":144,"_24":145,"_514":528,"_529":584,"_532":585,"_540":587,"_543":544,"_291":363,"_293":328,"_9":290,"_545":147},[531],{"_9":534,"_535":536,"_537":586},[539],{"_9":534,"_535":542},{"_20":151,"_166":491,"_512":560,"_22":152,"_24":153,"_514":561,"_529":589,"_532":590,"_540":592,"_543":570,"_291":363,"_293":304,"_9":290,"_545":155},[563],{"_9":534,"_535":565,"_537":591},[567],{"_9":534,"_535":569},[594,599],{"_20":147,"_166":489,"_512":547,"_22":148,"_24":149,"_514":548,"_529":595,"_532":596,"_540":598,"_543":556,"_291":363,"_293":328,"_9":327,"_557":-5},[550],{"_9":534,"_535":552,"_537":597},[539],{"_9":534,"_535":555},{"_20":155,"_166":491,"_512":572,"_22":156,"_24":157,"_514":573,"_529":600,"_532":601,"_540":603,"_543":581,"_291":363,"_293":304,"_9":327,"_557":-5},[575],{"_9":534,"_535":577,"_537":602},[567],{"_9":534,"_535":580},"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",607],"exerciseFinished",{"_610":611,"_24":612},"file","/myapp/workshop-content/exercises/06.optimization/FINISHED.mdx","exercises/06.optimization/FINISHED.mdx","prevStepLink",{"_615":616,"_617":618},"to","/exercise/06/02/solution","aria-label","Server Cache (solution)","nextStepLink",{"_615":621,"_617":622},"/finished","Finished! 🎉","actionData","errors"]

06. Optimizations/Elaboration