[{"_1":2,"_594":-5,"_595":-5},"loaderData",{"_3":4,"_369":370,"_477":478,"_593":-5},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_158":159,"_211":161,"_212":163,"_164":165,"_213":214,"_224":225,"_249":-5,"_250":-5,"_251":252},"userId",{"_7":8,"_9":10},"id","ma3798uouu7jv4k8ka2tx5vf","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","workshopConfig",{"_160":161,"_162":163,"_164":165,"_171":172,"_189":190,"_191":192,"_193":194,"_195":196,"_199":200,"_205":206,"_209":210},"title","React Suspense 🔀","subtitle","Simplify your Async UI and improve your User Experience","instructor",{"_20":166,"_167":168,"_169":170},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-suspense","discordChannelId","1285244676286189569","discordTags",[187,188],"1285246046498328627","1285245867791745116","onboardingVideo","https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/react-suspense","githubRoot","https://github.com/epicweb-dev/react-suspense/tree/main","stackBlitzConfig",{"_197":198},"view","editor","forms",{"_201":202,"_203":204},"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",{"_207":208},"enabled",true,"initialRoute","/","workshopTitle","workshopSubtitle","ENV",{"_215":216,"_217":218,"_219":192,"_220":194,"_221":208,"_222":223},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","5.9.0","requestInfo",{"_226":227,"_228":229,"_230":231,"_232":233,"_234":233,"_235":236,"_243":244,"_245":246,"_247":210,"_248":208},"protocol","http:","hostname","suspense.epicreact.dev","port","","origin","http://suspense.epicreact.dev","domain","hints",{"_237":238,"_239":240,"_241":242},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/06/finished","session",{"_237":-5},"separator","online","toast","confettiId","presence",{"_253":254},"users",[255,273,282,292,299,309,315,321,326,329,335,339,343,351,356,361,365],{"_7":256,"_257":208,"_258":259,"_260":261,"_20":262,"_263":264},"e71dc40a-4996-41e2-88e0-1c711a47c87e","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/e503563055288081d366c186f035be7e?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/e503563055288081d366c186f035be7e?size=512&default=identicon","Michael LaRoy","location",{"_211":265,"_232":266,"_203":267},"React Fundamentals ⚛","http://localhost:5639",{"_9":268,"_269":270,"_271":272},"solution","exerciseNumber",4,"stepNumber",3,{"_7":274,"_257":208,"_258":275,"_260":276,"_20":277,"_263":278},"8aedbce0-d56e-4b80-b5b6-b448da26fa25","https://www.gravatar.com/avatar/1004f4e485055ab611922657818a5e4d?size=64&default=identicon","https://www.gravatar.com/avatar/1004f4e485055ab611922657818a5e4d?size=512&default=identicon","Prashant Chaudhari",{"_211":279,"_232":266,"_203":280},"Full Stack Foundations 🔭",{"_269":281},2,{"_7":283,"_257":208,"_258":284,"_260":285,"_20":286,"_263":287},"33afa5da-2fb1-444d-b2b1-ba4842ac9303","https://www.gravatar.com/avatar/3a5680d6ddb2ef3c0145ea3b9c4f939e?size=64&default=identicon","https://www.gravatar.com/avatar/3a5680d6ddb2ef3c0145ea3b9c4f939e?size=512&default=identicon","Brandon Pluim",{"_211":288,"_232":266,"_203":289},"React Hooks 🎣",{"_9":290,"_269":291,"_271":272},"problem",6,{"_7":293,"_257":208,"_258":294,"_260":295,"_20":296,"_263":297},"79660814-d05f-4c3e-9afe-a8f2ec836f69","https://cdn.discordapp.com/avatars/373775170395045897/058a54d5de68b0015d680abd5d0daf0b.png?size=64","https://cdn.discordapp.com/avatars/373775170395045897/058a54d5de68b0015d680abd5d0daf0b.png?size=512","Jean Carlos Osorio Eulacio",{"_211":288,"_232":266,"_203":298},{"_269":291},{"_7":300,"_257":208,"_258":301,"_260":302,"_20":303,"_263":304},"7503b572-ff6a-4f0d-8f55-0a4dc88bb30a","https://cdn.discordapp.com/avatars/111472332551254016/390ff6296408906df6bc583a5dbfff4a.png?size=64","https://cdn.discordapp.com/avatars/111472332551254016/390ff6296408906df6bc583a5dbfff4a.png?size=512","Gus Saiani",{"_211":305,"_232":266,"_203":306},"Advanced React APIs 🔥",{"_9":290,"_269":307,"_271":308},7,1,{"_7":310,"_263":311},"mqc8za8me7ge5ewpy87nz4ic",{"_211":312,"_232":313,"_203":314},"Advanced React Patterns 🤯","http://advanced-patterns.epicreact.dev",{"_9":290,"_269":307,"_271":308},{"_7":316,"_257":208,"_258":317,"_260":318,"_20":-5,"_263":319},"987b0836-2513-48bc-9cf0-b0d95010a356","https://www.gravatar.com/avatar/ec8192094b6c55cece4e73612ac22596?size=64&default=identicon","https://www.gravatar.com/avatar/ec8192094b6c55cece4e73612ac22596?size=512&default=identicon",{"_211":288,"_232":266,"_203":320},{"_9":290,"_269":308,"_271":308},{"_7":322,"_263":323},"agnzowfzid8ypvr4c9uikwyk",{"_211":265,"_232":324,"_203":325},"http://fundamentals.epicreact.dev",{"_9":290,"_269":272,"_271":281},{"_7":327,"_263":328},"ev9sk2p5wp4pyqkqxm5hsw59",{"_211":265,"_232":266},{"_7":330,"_257":208,"_258":331,"_260":332,"_20":-5,"_263":333},"c2054311-d4bc-4a95-9284-d596174f4fa1","https://www.gravatar.com/avatar/e6b8aa05d11787759a30dab647f46365?size=64&default=identicon","https://www.gravatar.com/avatar/e6b8aa05d11787759a30dab647f46365?size=512&default=identicon",{"_211":288,"_232":266,"_203":334},{"_9":290,"_269":291,"_271":308},{"_7":336,"_263":337},"yl7oud2meoipio2sb5k56h7y",{"_211":305,"_232":266,"_203":338},{"_269":308},{"_7":340,"_263":341},"tt29lzr4p7abgl9nalrnc8q4",{"_211":265,"_232":324,"_203":342},{"_9":268,"_269":272,"_271":308},{"_7":344,"_257":208,"_258":345,"_260":346,"_20":-5,"_263":347},"a0f0d345-e6f8-430c-b14a-12db21d052e1","https://www.gravatar.com/avatar/a14fdd481bbaea1750d779e3affedb37?size=64&default=identicon","https://www.gravatar.com/avatar/a14fdd481bbaea1750d779e3affedb37?size=512&default=identicon",{"_211":348,"_232":266,"_203":349},"React Performance ⚡",{"_9":268,"_269":350,"_271":272},5,{"_7":352,"_263":353},"quwmvtacl85civoxglruv5hk",{"_211":354,"_203":355},"Data Modeling Deep Dive 💾",{"_9":290,"_269":281,"_271":281},{"_7":357,"_263":358},"boo5qaarhb9qi3pleavt3nik",{"_211":359,"_203":360},"Professional Web Forms 📝",{"_9":290,"_269":291,"_271":272},{"_7":362,"_263":363},"m65eqbtjwqxm8rsjodzm6e9y",{"_211":348,"_232":364},"http://performance.epicreact.dev",{"_7":366,"_263":367},"uw7kcv8q69u166614vendob7",{"_211":161,"_232":233,"_203":368},{"_269":291,"_271":-5,"_9":-5},"routes/_app+/_layout",{"_211":161,"_371":372,"_473":474,"_476":16},"exercises",[373,401,418,434,451,460],{"_269":308,"_160":374,"_375":376,"_387":388,"_394":395},"Data fetching","solutions",[377,379,381,383,385],{"_271":308,"_160":378,"_20":27},"Throwing Promises",{"_271":281,"_160":380,"_20":35},"Error Handling",{"_271":272,"_160":382,"_20":43},"Formal Status",{"_271":270,"_160":384,"_20":51},"Utility",{"_271":350,"_160":386,"_20":59},"use React","problems",[389,390,391,392,393],{"_271":308,"_160":378,"_20":21},{"_271":281,"_160":380,"_20":31},{"_271":272,"_160":382,"_20":39},{"_271":270,"_160":384,"_20":47},{"_271":350,"_160":386,"_20":55},"steps",[396,397,398,399,400],{"_271":308,"_160":378,"_20":21},{"_271":281,"_160":380,"_20":31},{"_271":272,"_160":382,"_20":39},{"_271":270,"_160":384,"_20":47},{"_271":350,"_160":386,"_20":55},{"_269":281,"_160":402,"_375":403,"_387":410,"_394":414},"Dynamic Promises",[404,406,408],{"_271":308,"_160":405,"_20":67},"Promise Cache",{"_271":281,"_160":407,"_20":75},"useTransition",{"_271":272,"_160":409,"_20":83},"Pending Flash",[411,412,413],{"_271":308,"_160":405,"_20":63},{"_271":281,"_160":407,"_20":71},{"_271":272,"_160":409,"_20":79},[415,416,417],{"_271":308,"_160":405,"_20":63},{"_271":281,"_160":407,"_20":71},{"_271":272,"_160":409,"_20":79},{"_269":272,"_160":419,"_375":420,"_387":426,"_394":430},"Optimistic UI",[421,422,424],{"_271":308,"_160":419,"_20":91},{"_271":281,"_160":423,"_20":99},"Form Status",{"_271":272,"_160":425,"_20":107},"Multi-step Actions",[427,428,429],{"_271":308,"_160":419,"_20":87},{"_271":281,"_160":423,"_20":95},{"_271":272,"_160":425,"_20":103},[431,432,433],{"_271":308,"_160":419,"_20":87},{"_271":281,"_160":423,"_20":95},{"_271":272,"_160":425,"_20":103},{"_269":270,"_160":435,"_375":436,"_387":443,"_394":447},"Suspense img",[437,439,441],{"_271":308,"_160":438,"_20":115},"Img Component",{"_271":281,"_160":440,"_20":123},"Img Error Boundary",{"_271":272,"_160":442,"_20":131},"Key prop",[444,445,446],{"_271":308,"_160":438,"_20":111},{"_271":281,"_160":440,"_20":119},{"_271":272,"_160":442,"_20":127},[448,449,450],{"_271":308,"_160":438,"_20":111},{"_271":281,"_160":440,"_20":119},{"_271":272,"_160":442,"_20":127},{"_269":350,"_160":452,"_375":453,"_387":456,"_394":458},"Responsive",[454],{"_271":308,"_160":455,"_20":139},"useDeferredValue",[457],{"_271":308,"_160":455,"_20":135},[459],{"_271":308,"_160":455,"_20":135},{"_269":291,"_160":461,"_375":462,"_387":467,"_394":470},"Optimizations",[463,465],{"_271":308,"_160":464,"_20":147},"Parallel Loading",{"_271":281,"_160":466,"_20":155},"Server Cache",[468,469],{"_271":308,"_160":464,"_20":143},{"_271":281,"_160":466,"_20":151},[471,472],{"_271":308,"_160":464,"_20":143},{"_271":281,"_160":466,"_20":151},"playground",{"_475":-5,"_269":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_479":480,"_211":161,"_203":481,"_574":575,"_576":577,"_578":579,"_583":584,"_589":590},"articleId","workshop-react-suspense-6-finished",{"_269":291,"_482":483,"_160":461,"_484":485,"_486":487,"_488":489,"_491":492,"_394":494,"_387":552,"_375":563},"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,y=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var l in e)r(n,l,{get:e[l],enumerable:!0})},c=(n,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of v(e))!y.call(n,s)&&s!==l&&r(n,s,{get:()=>e[s],enumerable:!(o=p(e,s))||o.enumerable});return n};var k=(n,e,l)=>(l=n!=null?b(u(n)):{},c(e||!n||!n.__esModule?r(l,\"default\",{value:n,enumerable:!0}):l,n)),g=n=>c(r({},\"__esModule\",{value:!0}),n);var i=m((E,t)=>{t.exports=_jsx_runtime});var w={};f(w,{default:()=>h,frontmatter:()=>N});var a=k(i()),N=void 0;function d(n){let e={a:\"a\",code:\"code\",h1:\"h1\",h2:\"h2\",p:\"p\",pre:\"pre\",span:\"span\",...n.components},{EpicVideo:l}=e;return l||D(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Optimizations\"}),`\n`,(0,a.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-suspense/intro-to-optimizations\"}),`\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\"}),\" will 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",[490],"https://www.epicreact.dev/workshops/react-suspense/intro-to-optimizations","finishedEpicVideoEmbeds",[493],"https://www.epicreact.dev/workshops/react-suspense/dad-joke-break-optimizations",[495,528],{"_271":308,"_290":496,"_268":516},{"_20":143,"_160":464,"_482":497,"_22":144,"_24":145,"_484":498,"_499":500,"_502":503,"_510":511,"_513":514,"_269":291,"_271":308,"_9":290,"_515":147},"01.problem.parallel","var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!w.call(t,a)&&a!==o&&i(t,a,{get:()=>e[a],enumerable:!(r=m(e,a))||r.enumerable});return t};var _=(t,e,o)=>(o=t!=null?p(f(t)):{},s(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),j=t=>s(i({},\"__esModule\",{value:!0}),t);var d=g((k,h)=>{h.exports=_jsx_runtime});var y={};x(y,{default:()=>c,frontmatter:()=>v});var n=_(d()),v=void 0;function l(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||b(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Parallel Loading\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-suspense/parallel-loading\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Right now our \",(0,n.jsx)(e.code,{children:\"ShipDetails\"}),` has to wait for the ship's data before we render\nthe `,(0,n.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,n.jsxs)(e.p,{children:[\"Please preload the image for the ship in \",(0,n.jsx)(e.code,{children:\"ShipDetails\"}),` so we don't have that\nwaterfall.`]}),`\n`,(0,n.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 c(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(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 j(y);})();\n;return Component;","epicVideoEmbeds",[501],"https://www.epicreact.dev/workshops/react-suspense/parallel-loading","test",{"_9":504,"_505":506,"_507":508},"browser","pathname","/app/06.01.problem/test/","testFiles",[509],"parallel-loading.test.ts","dev",{"_9":504,"_505":512},"/app/06.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/06.optimization/01.problem.parallel?view=editor&title=Parallel+Loading+%28problem%29","solutionName",{"_20":147,"_160":464,"_482":517,"_22":148,"_24":149,"_484":518,"_499":519,"_502":521,"_510":524,"_513":526,"_269":291,"_271":308,"_9":268,"_527":-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;",[520],"https://www.epicreact.dev/workshops/react-suspense/parallel-loading/solution",{"_9":504,"_505":522,"_507":523},"/app/06.01.solution/test/",[509],{"_9":504,"_505":525},"/app/06.01.solution/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/06.optimization/01.solution.parallel?view=editor&title=Parallel+Loading+%28solution%29","problemName",{"_271":281,"_290":529,"_268":541},{"_20":151,"_160":466,"_482":530,"_22":152,"_24":153,"_484":531,"_499":532,"_502":534,"_510":538,"_513":540,"_269":291,"_271":281,"_9":290,"_515":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;",[533],"https://www.epicreact.dev/workshops/react-suspense/server-cache",{"_9":504,"_505":535,"_507":536},"/app/06.02.problem/test/",[537],"cache-control.test.ts",{"_9":504,"_505":539},"/app/06.02.problem/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/06.optimization/02.problem.cache?view=editor&title=Server+Cache+%28problem%29",{"_20":155,"_160":466,"_482":542,"_22":156,"_24":157,"_484":543,"_499":544,"_502":546,"_510":549,"_513":551,"_269":291,"_271":281,"_9":268,"_527":-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;",[545],"https://www.epicreact.dev/workshops/react-suspense/server-cache/solution",{"_9":504,"_505":547,"_507":548},"/app/06.02.solution/test/",[537],{"_9":504,"_505":550},"/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",[553,558],{"_20":143,"_160":464,"_482":497,"_22":144,"_24":145,"_484":498,"_499":554,"_502":555,"_510":557,"_513":514,"_269":291,"_271":308,"_9":290,"_515":147},[501],{"_9":504,"_505":506,"_507":556},[509],{"_9":504,"_505":512},{"_20":151,"_160":466,"_482":530,"_22":152,"_24":153,"_484":531,"_499":559,"_502":560,"_510":562,"_513":540,"_269":291,"_271":281,"_9":290,"_515":155},[533],{"_9":504,"_505":535,"_507":561},[537],{"_9":504,"_505":539},[564,569],{"_20":147,"_160":464,"_482":517,"_22":148,"_24":149,"_484":518,"_499":565,"_502":566,"_510":568,"_513":526,"_269":291,"_271":308,"_9":268,"_527":-5},[520],{"_9":504,"_505":522,"_507":567},[509],{"_9":504,"_505":525},{"_20":155,"_160":466,"_482":542,"_22":156,"_24":157,"_484":543,"_499":570,"_502":571,"_510":573,"_513":551,"_269":291,"_271":281,"_9":268,"_527":-5},[545],{"_9":504,"_505":547,"_507":572},[537],{"_9":504,"_505":550},"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",577],"exerciseFinished",{"_580":581,"_24":582},"file","/myapp/workshop-content/exercises/06.optimization/FINISHED.mdx","exercises/06.optimization/FINISHED.mdx","prevStepLink",{"_585":586,"_587":588},"to","/exercise/06/02/solution","aria-label","Server Cache (solution)","nextStepLink",{"_585":591,"_587":592},"/finished","Finished! 🎉","routes/_app+/exercise+/_layout","actionData","errors"]

06. Optimizations/Elaboration