[{"_1":2,"_720":-5,"_721":-5},"loaderData",{"_3":4,"_462":463,"_570":571,"_719":-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","dv17hyltwwqpnkbcw5ur7o6a","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.2","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/02/finished","session",{"_237":-5},"separator","online","toast","confettiId","presence",{"_253":254},"users",[255,273,280,289,297,306,313,320,328,336,344,352,360,367,375,382,389,396,403,410,418,425,429,432,438,442,447,452,458],{"_7":256,"_257":208,"_258":259,"_260":261,"_20":262,"_263":264},"bcdaf6fc-90fb-4973-8906-5b9ae5078de5","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/a9343a461729cc175331bcf4e2848588?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/a9343a461729cc175331bcf4e2848588?size=512&default=identicon","Jennifer Dixon","location",{"_211":265,"_232":266,"_203":267},"React Hooks 🎣","http://localhost:5639",{"_9":268,"_269":270,"_271":272},"problem","exerciseNumber",3,"stepNumber",1,{"_7":274,"_257":208,"_258":275,"_260":276,"_20":277,"_263":278},"5e2a53a5-d0b4-47c8-8b45-c50bae42bfbf","https://www.gravatar.com/avatar/c139e079862b7cb74d705529bbb3ddbc?size=64&default=identicon","https://www.gravatar.com/avatar/c139e079862b7cb74d705529bbb3ddbc?size=512&default=identicon","Simon Vrachliotis",{"_211":279,"_232":266},"React Fundamentals ⚛",{"_7":281,"_257":208,"_258":282,"_260":283,"_20":284,"_263":285},"75f917c4-b90b-4439-91af-4fbdcd3d8cb2","https://cdn.discordapp.com/avatars/621328879222652948/9d1a7eb1a2c7ad020c3fd45e2c185c61.png?size=64","https://cdn.discordapp.com/avatars/621328879222652948/9d1a7eb1a2c7ad020c3fd45e2c185c61.png?size=512","Kirill Barsukov",{"_211":265,"_232":266,"_203":286},{"_9":287,"_269":288,"_271":270},"solution",4,{"_7":290,"_257":208,"_258":291,"_260":292,"_20":293,"_263":294},"9470c8fd-1ee7-419b-9924-947caed19665","https://www.gravatar.com/avatar/e74fc581a393ac600b636da77d370a9e?size=64&default=identicon","https://www.gravatar.com/avatar/e74fc581a393ac600b636da77d370a9e?size=512&default=identicon","MR D Doan Van Bien",{"_211":295,"_232":266,"_203":296},"Advanced React Patterns 🤯",{"_9":268,"_269":270,"_271":272},{"_7":298,"_257":208,"_258":299,"_260":300,"_20":301,"_263":302},"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":303,"_232":266,"_203":304},"Advanced React APIs 🔥",{"_9":287,"_269":305,"_271":270},9,{"_7":307,"_257":208,"_258":308,"_260":309,"_20":310,"_263":311},"50b0029f-1801-4328-bc12-5883b8428022","https://www.gravatar.com/avatar/08934f4458a790bb7ffa85267b08d69f?size=64&default=identicon","https://www.gravatar.com/avatar/08934f4458a790bb7ffa85267b08d69f?size=512&default=identicon","Samuel Levin",{"_211":279,"_232":266,"_203":312},{"_9":268,"_269":270,"_271":288},{"_7":314,"_257":208,"_258":315,"_260":316,"_20":317,"_263":318},"3137be2a-0a92-42df-b888-9c1b347de35b","https://cdn.discordapp.com/avatars/469326559371722755/00f1754dfbd1c0d7c21ad1f3aa7eb3e5.png?size=64","https://cdn.discordapp.com/avatars/469326559371722755/00f1754dfbd1c0d7c21ad1f3aa7eb3e5.png?size=512","Fernando Tomazelli Feres",{"_211":265,"_232":266,"_203":319},{"_9":287,"_269":270,"_271":270},{"_7":321,"_257":208,"_258":322,"_260":323,"_20":324,"_263":325},"971722f3-8d6f-4c9d-adbb-87b5d0c4629d","https://www.gravatar.com/avatar/96e6ac765292345f1da7d4b2ccd742c8?size=64&default=identicon","https://www.gravatar.com/avatar/96e6ac765292345f1da7d4b2ccd742c8?size=512&default=identicon","Joshua Briley",{"_211":279,"_232":266,"_203":326},{"_269":327},2,{"_7":329,"_257":208,"_258":330,"_260":331,"_20":332,"_263":333},"807e1e3e-fa32-44c0-9951-484fb05ec649","https://www.gravatar.com/avatar/266671abf4ff8feab3318740db064161?size=64&default=identicon","https://www.gravatar.com/avatar/266671abf4ff8feab3318740db064161?size=512&default=identicon","Efrain U Diaz P",{"_211":295,"_232":266,"_203":334},{"_269":335},7,{"_7":337,"_257":208,"_258":338,"_260":339,"_20":340,"_263":341},"2f0733ad-b072-4d2b-95f8-b97f719b7196","https://www.gravatar.com/avatar/23b54e100ab5fe9b643924cb888856e4?size=64&default=identicon","https://www.gravatar.com/avatar/23b54e100ab5fe9b643924cb888856e4?size=512&default=identicon","Marek Sommer",{"_211":342,"_232":266,"_203":343},"Full Stack Foundations 🔭",{"_9":287,"_269":335,"_271":270},{"_7":345,"_257":208,"_258":346,"_260":347,"_20":348,"_263":349},"b7c3d82d-c49d-4c05-bb59-23fb905f69db","https://www.gravatar.com/avatar/e833193622a13429609aa62c4b4ceac6?size=64&default=identicon","https://www.gravatar.com/avatar/e833193622a13429609aa62c4b4ceac6?size=512&default=identicon","Alexander Ortiz",{"_211":350,"_232":266,"_203":351},"Data Modeling Deep Dive 💾",{"_9":268,"_269":327,"_271":272},{"_7":353,"_257":16,"_258":354,"_260":355,"_20":356,"_263":357},"f7215387-5068-4c82-90ec-638bfcfef270","https://www.gravatar.com/avatar/9298afaa2712802e5b4f0e99efcc86ef?size=64&default=identicon","https://www.gravatar.com/avatar/9298afaa2712802e5b4f0e99efcc86ef?size=512&default=identicon","Evaristo Marro",{"_211":279,"_232":266,"_203":358},{"_9":268,"_269":359,"_271":359},5,{"_7":361,"_257":208,"_258":362,"_260":363,"_20":364,"_263":365},"51fc3215-0ab2-40e0-86f7-856a24b4dc77","https://avatars.githubusercontent.com/u/25695944?v=4&size=64","https://avatars.githubusercontent.com/u/25695944?v=4&size=512","MaLeK Darwish",{"_211":279,"_232":266,"_203":366},{"_269":272},{"_7":368,"_257":208,"_258":369,"_260":370,"_20":371,"_263":372},"2bfa0b8e-494e-4e0d-896b-3befde27dc4f","https://www.gravatar.com/avatar/06d4bf3ae925cce17be2699cc6241cc3?size=64&default=identicon","https://www.gravatar.com/avatar/06d4bf3ae925cce17be2699cc6241cc3?size=512&default=identicon","Ryo",{"_211":265,"_232":266,"_203":373},{"_9":268,"_269":374,"_271":272},6,{"_7":376,"_257":208,"_258":377,"_260":378,"_20":379,"_263":380},"fa66925f-6bd9-40da-bf4c-6ba7de90d59b","https://www.gravatar.com/avatar/25efea8b09fcadfaa071e19b1a2b611b?size=64&default=identicon","https://www.gravatar.com/avatar/25efea8b09fcadfaa071e19b1a2b611b?size=512&default=identicon","LASZLO SRAGNER",{"_211":342,"_232":266,"_203":381},{"_269":288},{"_7":383,"_257":208,"_258":384,"_260":385,"_20":386,"_263":387},"5eba1383-a2e1-46a9-88f7-083014923866","https://www.gravatar.com/avatar/7d24e2a149d9e70c74d8d4078bdc2fac?size=64&default=identicon","https://www.gravatar.com/avatar/7d24e2a149d9e70c74d8d4078bdc2fac?size=512&default=identicon","R.M.J. van Merode",{"_211":161,"_232":266,"_203":388},{"_9":268,"_269":327,"_271":272},{"_7":390,"_257":208,"_258":391,"_260":392,"_20":393,"_263":394},"fb94c54b-539d-46dd-8634-2f530c7d4056","https://www.gravatar.com/avatar/ddb407c89da69f2a8ed990fcac59dbd3?size=64&default=identicon","https://www.gravatar.com/avatar/ddb407c89da69f2a8ed990fcac59dbd3?size=512&default=identicon","Miroslav Holubec",{"_211":265,"_232":266,"_203":395},{"_9":287,"_269":359,"_271":272},{"_7":397,"_257":208,"_258":398,"_260":399,"_20":400,"_263":401},"96b0ecea-9bce-4d5a-b780-7b9dfa05537b","https://avatars.githubusercontent.com/u/66702127?v=4&size=64","https://avatars.githubusercontent.com/u/66702127?v=4&size=512","Facundo Perez Montalvo",{"_211":350,"_232":266,"_203":402},{"_9":268,"_269":272,"_271":272},{"_7":404,"_257":208,"_258":405,"_260":406,"_20":407,"_263":408},"5b2e9783-b3c5-464d-8c2a-ddacf9cc5070","https://www.gravatar.com/avatar/366c6c26f51bfa434d58cc9639abe33b?size=64&default=identicon","https://www.gravatar.com/avatar/366c6c26f51bfa434d58cc9639abe33b?size=512&default=identicon","Duncan Edwards",{"_211":303,"_232":266,"_203":409},{"_9":268,"_269":272,"_271":374},{"_7":411,"_257":208,"_258":412,"_260":413,"_20":414,"_263":415},"3d8b06a5-496e-48d9-8a7d-faac1916371a","https://www.gravatar.com/avatar/59ba0084ca39deb4a4e1d503a5e5c00a?size=64&default=identicon","https://www.gravatar.com/avatar/59ba0084ca39deb4a4e1d503a5e5c00a?size=512&default=identicon","Billy Hopkins",{"_211":279,"_232":266,"_203":416},{"_9":268,"_269":417,"_271":359},8,{"_7":419,"_257":208,"_258":420,"_260":421,"_20":422,"_263":423},"fd6efcf1-bd85-4735-a72f-dce495720685","https://www.gravatar.com/avatar/1265be3acf2ce1e6b3ed826176ff4898?size=64&default=identicon","https://www.gravatar.com/avatar/1265be3acf2ce1e6b3ed826176ff4898?size=512&default=identicon","REPIDA NATALIIA",{"_211":342,"_232":266,"_203":424},{"_9":268,"_269":272,"_271":270},{"_7":426,"_263":427},"b9380809a470c4fa4f1ce52d54c41cb2",{"_211":279,"_232":266,"_203":428},{"_9":268,"_269":335,"_271":327},{"_7":430,"_263":431},"buas11a8hardudv0x2h6htjm",{"_211":279,"_232":266},{"_7":433,"_257":208,"_258":434,"_260":435,"_20":-5,"_263":436},"456dee2c-8a0f-49f9-be56-ab5ca0e28145","https://www.gravatar.com/avatar/510c2d12d3397256d72665665101aa7b?size=64&default=identicon","https://www.gravatar.com/avatar/510c2d12d3397256d72665665101aa7b?size=512&default=identicon",{"_211":303,"_232":266,"_203":437},{"_9":268,"_269":272,"_271":288},{"_7":439,"_263":440},"z8n4qt1nehcmaa2xh6tvg2u8",{"_211":279,"_232":266,"_203":441},{"_9":268,"_269":327,"_271":327},{"_7":443,"_263":444},"kubdbujvzdclwkvhdbk9vkok",{"_211":445,"_232":446},"React Server Components 🤹","http://127.0.0.1:5639",{"_7":448,"_263":449},"sbz4ebhr8hag0nc6o85cdc86",{"_211":450,"_232":451},"Professional Web Forms 📝","http://forms.epicweb.dev",{"_7":453,"_257":208,"_258":454,"_260":455,"_20":-5,"_263":456},"dd80a1ee-d473-4bc2-ba08-7f060081b8a2","https://www.gravatar.com/avatar/09eded68628cc0b828181c0b0e94b570?size=64&default=identicon","https://www.gravatar.com/avatar/09eded68628cc0b828181c0b0e94b570?size=512&default=identicon",{"_211":342,"_232":266,"_203":457},{"_9":268,"_269":359,"_271":272},{"_7":459,"_263":460},"dik40ushw9gx4uk9no5c9kd9",{"_211":161,"_232":233,"_203":461},{"_269":327,"_271":-5,"_9":-5},"routes/_app+/_layout",{"_211":161,"_464":465,"_566":567,"_569":16},"exercises",[466,494,511,527,544,553],{"_269":272,"_160":467,"_468":469,"_480":481,"_487":488},"Data fetching","solutions",[470,472,474,476,478],{"_271":272,"_160":471,"_20":27},"Throwing Promises",{"_271":327,"_160":473,"_20":35},"Error Handling",{"_271":270,"_160":475,"_20":43},"Formal Status",{"_271":288,"_160":477,"_20":51},"Utility",{"_271":359,"_160":479,"_20":59},"use React","problems",[482,483,484,485,486],{"_271":272,"_160":471,"_20":21},{"_271":327,"_160":473,"_20":31},{"_271":270,"_160":475,"_20":39},{"_271":288,"_160":477,"_20":47},{"_271":359,"_160":479,"_20":55},"steps",[489,490,491,492,493],{"_271":272,"_160":471,"_20":21},{"_271":327,"_160":473,"_20":31},{"_271":270,"_160":475,"_20":39},{"_271":288,"_160":477,"_20":47},{"_271":359,"_160":479,"_20":55},{"_269":327,"_160":495,"_468":496,"_480":503,"_487":507},"Dynamic Promises",[497,499,501],{"_271":272,"_160":498,"_20":67},"Promise Cache",{"_271":327,"_160":500,"_20":75},"useTransition",{"_271":270,"_160":502,"_20":83},"Pending Flash",[504,505,506],{"_271":272,"_160":498,"_20":63},{"_271":327,"_160":500,"_20":71},{"_271":270,"_160":502,"_20":79},[508,509,510],{"_271":272,"_160":498,"_20":63},{"_271":327,"_160":500,"_20":71},{"_271":270,"_160":502,"_20":79},{"_269":270,"_160":512,"_468":513,"_480":519,"_487":523},"Optimistic UI",[514,515,517],{"_271":272,"_160":512,"_20":91},{"_271":327,"_160":516,"_20":99},"Form Status",{"_271":270,"_160":518,"_20":107},"Multi-step Actions",[520,521,522],{"_271":272,"_160":512,"_20":87},{"_271":327,"_160":516,"_20":95},{"_271":270,"_160":518,"_20":103},[524,525,526],{"_271":272,"_160":512,"_20":87},{"_271":327,"_160":516,"_20":95},{"_271":270,"_160":518,"_20":103},{"_269":288,"_160":528,"_468":529,"_480":536,"_487":540},"Suspense img",[530,532,534],{"_271":272,"_160":531,"_20":115},"Img Component",{"_271":327,"_160":533,"_20":123},"Img Error Boundary",{"_271":270,"_160":535,"_20":131},"Key prop",[537,538,539],{"_271":272,"_160":531,"_20":111},{"_271":327,"_160":533,"_20":119},{"_271":270,"_160":535,"_20":127},[541,542,543],{"_271":272,"_160":531,"_20":111},{"_271":327,"_160":533,"_20":119},{"_271":270,"_160":535,"_20":127},{"_269":359,"_160":545,"_468":546,"_480":549,"_487":551},"Responsive",[547],{"_271":272,"_160":548,"_20":139},"useDeferredValue",[550],{"_271":272,"_160":548,"_20":135},[552],{"_271":272,"_160":548,"_20":135},{"_269":374,"_160":554,"_468":555,"_480":560,"_487":563},"Optimizations",[556,558],{"_271":272,"_160":557,"_20":147},"Parallel Loading",{"_271":327,"_160":559,"_20":155},"Server Cache",[561,562],{"_271":272,"_160":557,"_20":143},{"_271":327,"_160":559,"_20":151},[564,565],{"_271":272,"_160":557,"_20":143},{"_271":327,"_160":559,"_20":151},"playground",{"_568":-5,"_269":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_572":573,"_211":161,"_203":574,"_701":702,"_703":704,"_705":706,"_710":711,"_716":717},"articleId","workshop-react-suspense-2-finished",{"_269":327,"_575":576,"_160":495,"_577":578,"_579":580,"_581":582,"_584":585,"_487":587,"_480":669,"_468":685},"dirName","02.dynamic","instructionsCode","var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var s in e)r(n,s,{get:e[s],enumerable:!0})},o=(n,e,s,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of u(e))!y.call(n,l)&&l!==s&&r(n,l,{get:()=>e[l],enumerable:!(c=p(e,l))||c.enumerable});return n};var k=(n,e,s)=>(s=n!=null?b(v(n)):{},o(e||!n||!n.__esModule?r(s,\"default\",{value:n,enumerable:!0}):s,n)),g=n=>o(r({},\"__esModule\",{value:!0}),n);var i=m((C,t)=>{t.exports=_jsx_runtime});var D={};f(D,{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:s}=e;return s||w(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Dynamic Promises\"}),`\n`,(0,a.jsx)(s,{url:\"https://www.epicreact.dev/workshops/react-suspense/intro-to-dynamic-promises\"}),`\n`,(0,a.jsx)(e.h2,{children:\"Promise caching\"}),`\n`,(0,a.jsx)(e.p,{children:\"Fetching data in our components is great, but this would be a problem:\"}),`\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(--base0E)\"},children:\"async\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fetchUser\"}),\"() {\",`\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:\"response\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fetch\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"/api/user\"}),\"'\",\")\",`\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:\"user\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"response\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"json\"}),\"()\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"NumberInfo\"}),\"() {\",`\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:\"count\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setCount\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\")\",`\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:\"userInfo\"}),\" \",(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:\"fetchUser\"}),\"())\",`\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(--base0D)\"},children:\"increment\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" () \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCount\"}),\"((\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",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\":\"11\",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\":\"12\",children:[\"\t\t\tHi \",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"userInfo\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"! You have clicked \",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" times.\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"button\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onClick\"}),(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:\"increment\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">Increment again!\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"The problem is every time you click the button, \",(0,a.jsx)(e.code,{children:\"fetchUser\"}),` will be called again\ntriggering a new fetch request for the user which is not only inefficient, but\nit would trigger the `,(0,a.jsx)(e.code,{children:\"NumberInfo\"}),` component to suspend which would render the\nsuspense boundary and result in a pretty janky experience even if your user\nendpoint was fast and the user had a fast network. This is not a good user\nexperience.`]}),`\n`,(0,a.jsxs)(e.p,{children:[\"The solution to this is to add caching to our \",(0,a.jsx)(e.code,{children:\"fetchUser\"}),` function. That way, if\nthe `,(0,a.jsx)(e.code,{children:\"fetchUser\"}),` function is called again, we can return the same promise that\nwas returned previously:`]}),`\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(--base0A)\"},children:\"let\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"userPromise\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fetchUser\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"userPromise\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"userPromise\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"??\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fetchUserImpl\"}),\"()\",`\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:\"userPromise\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"}\",`\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:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:'// \"impl\" is short for \"implementation\"'}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fetchUserImpl\"}),\"() {\",`\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:\"response\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fetch\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"/api/user\"}),\"'\",\")\",`\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:\"user\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"response\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"json\"}),\"()\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`By returning the same promise, React will keep track of that specific promise\nand it knows whether it's already resolved and needs to suspend or not.`}),`\n`,(0,a.jsxs)(e.p,{children:[`Of course, this is a simple example. Caching like this normally involves a lot\nmore thought. For example, what if we could fetch a user by their ID? We\ncouldn't just have a `,(0,a.jsx)(e.code,{children:\"userPromise\"}),` anymore, we'd now have to have a mapping from\nthe user's ID to the promise that fetches that user:`]}),`\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-highlight\":\"true\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"userPromiseCache\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Map\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Promise\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"User\"}),\">>()\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fetchUser\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"id\"}),(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\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"userPromise\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"userPromiseCache\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"get\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"??\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fetchUserImpl\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"4\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"userPromiseCache\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"set\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"userPromise\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"userPromise\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"async\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fetchUserImpl\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\") {\",`\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:\"response\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fetch\"}),\"(\",\"`\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"/api/user/\"}),\"${\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\"}`\",\")\",`\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:\"user\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"response\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"json\"}),\"()\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`This does get more complicated when you start thinking about the fact that the\nuser data could change and now you have to worry about cache invalidation. But\nthe point is that you need to cache your promises to avoid unnecessary\nre-fetching.`}),`\n`,(0,a.jsxs)(e.p,{children:[`\\u{1F4DC} Learn more about caching generally from\n`,(0,a.jsx)(e.a,{href:\"https://www.epicweb.dev/talks/caching-for-cash\",children:\"Caching for Cash\"})]}),`\n`,(0,a.jsx)(e.h2,{children:\"Transitions\"}),`\n`,(0,a.jsxs)(e.p,{children:[`Whenever you trigger a state update that results in a suspending component, the\nclosest suspense boundary will be found and its `,(0,a.jsx)(e.code,{children:\"fallback\"}),` prop will be rendered\nuntil the promise resolves. This can be a jarring experience for the user if the\nsuspense boundary is far away from the component that triggered the state update\nor the loading state is very different from the resolved state.`]}),`\n`,(0,a.jsxs)(e.p,{children:[`To make the transition from loading to resolved state smoother, you can use the\n`,(0,a.jsx)(e.code,{children:\"useTransition\"}),` hook. This hook returns a tuple of two values: a boolean and a\nfunction. The boolean is `,(0,a.jsx)(e.code,{children:\"true\"}),\" when the promise is still pending and \",(0,a.jsx)(e.code,{children:\"false\"}),`\nwhen the promise has resolved. The function is a callback that you can use to\ntrigger the state update that will result in the promise being fetched.`]}),`\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:\"SomeComponent\"}),\"() {\",`\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:\"someState\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setSomeState\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"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:\"isPending\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"startTransition\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useTransition\"}),\"()\",`\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:\"someResolvedValue\"}),\" \",(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:\"fetchSomeData\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"someState\"}),\"))\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"handleChange\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"someValue\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"7\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"startTransition\"}),\"(() \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"8\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setSomeState\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"someValue\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"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:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"13\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"isPending\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"LoadingSpinner\"}),\" /> \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" <\",(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(--base08)\"},children:\"someResolvedValue\"}),(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\":\"14\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"button\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onClick\"}),(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(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"handleChange\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"some value\"}),\"'\",\")\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">Change state\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"The \",(0,a.jsx)(e.code,{children:\"isPending\"}),\" variable there will be \",(0,a.jsx)(e.code,{children:\"true\"}),` while the suspending component is\nwaiting for the promise to resolve and `,(0,a.jsx)(e.code,{children:\"false\"}),` when the promise has resolved and\nthe component is ready to be rendered. This allows you to show a loading state\non the existing UI rather than using the suspense boundary fallback UI. It often\nresults in a much smoother user experience.`]}),`\n`,(0,a.jsxs)(e.p,{children:[`\\u{1F4DC} Check out\n`,(0,a.jsxs)(e.a,{href:\"https://react.dev/reference/react/useTransition\",children:[\"the \",(0,a.jsx)(e.code,{children:\"useTransition\"}),\" documentation\"]}),`\nfor more on this.`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function w(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(D);})();\n;return Component;","finishedCode","var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var x=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of w(t))!l.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(i=u(t,r))||i.enumerable});return e};var _=(e,t,n)=>(n=e!=null?m(f(e)):{},c(t||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),g=e=>c(s({},\"__esModule\",{value:!0}),e);var d=x((M,a)=>{a.exports=_jsx_runtime});var k={};j(k,{default:()=>h,frontmatter:()=>y});var o=_(d()),y=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||b(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Dynamic Promises\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-suspense/dad-joke-break-dynamic-promises\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} You've done well! You learned how to cache promises and how to show nice\npending states while the user waits for the data. Great job.`})]})}function h(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function b(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(k);})();\n;return Component;","instructionsEpicVideoEmbeds",[583],"https://www.epicreact.dev/workshops/react-suspense/intro-to-dynamic-promises","finishedEpicVideoEmbeds",[586],"https://www.epicreact.dev/workshops/react-suspense/dad-joke-break-dynamic-promises",[588,621,645],{"_271":272,"_268":589,"_287":609},{"_20":63,"_160":498,"_575":590,"_22":64,"_24":65,"_577":591,"_592":593,"_595":596,"_603":604,"_606":607,"_269":327,"_271":272,"_9":268,"_608":67},"01.problem.cache","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var t in e)r(n,t,{get:e[t],enumerable:!0})},a=(n,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of m(e))!w.call(n,c)&&c!==t&&r(n,c,{get:()=>e[c],enumerable:!(i=f(e,c))||i.enumerable});return n};var v=(n,e,t)=>(t=n!=null?p(g(n)):{},a(e||!n||!n.__esModule?r(t,\"default\",{value:n,enumerable:!0}):t,n)),k=n=>a(r({},\"__esModule\",{value:!0}),n);var h=y((j,s)=>{s.exports=_jsx_runtime});var _={};b(_,{default:()=>u,frontmatter:()=>x});var o=v(h()),x=void 0;function d(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:t,PrevDiffLink:i}=e;return t||l(\"EpicVideo\",!0),i||l(\"PrevDiffLink\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Promise Cache\"}),`\n`,(0,o.jsx)(t,{url:\"https://www.epicreact.dev/workshops/react-suspense/promise-cache\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F9DD}\\u200D\\u2642\\uFE0F I've made a \",(0,o.jsx)(i,{children:\"couple of changes\"}),`. I moved the\n`,(0,o.jsx)(e.code,{children:\"getShip\"}),` call into the component itself so we can dynamically change which ship\nwe're looking at. I also added some buttons to allow us to do this from the UI.`]}),`\n`,(0,o.jsxs)(e.p,{children:[`But we've got a problem, and I've added a counter button to the UI so you can\nreproduce the problem. Every time you click it, we're suspending again \\u{1F631} This\nis because we don't have caching on our `,(0,o.jsx)(e.code,{children:\"getShip\"}),` function so every render\ntriggers a new fetch call.`]}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Yeah, this is far from optimal for our application. Could you add a little\ncache for our `,(0,o.jsx)(e.code,{children:\"getShip\"}),` function so when it's called with the same ship name it\ndoesn't request the ship again and suspend?`]}),`\n`,(0,o.jsx)(e.p,{children:`When you're finished, you should be able to click the counter button as many\ntimes as you like without suspending. Additionally, because of the cache, once\nyou've fetched the details for a ship, you should be able to switch back and\nforth and it should be instant.`}),`\n`,(0,o.jsx)(\"callout-info\",{children:(0,o.jsx)(e.p,{children:`If you want to reset the cache while you're working on this, simply refresh\nthe page. We're not going to get into cache invalidation in this workshop.`})})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(d,{...n})}):d(n)}function l(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(_);})();\n;return Component;","epicVideoEmbeds",[594],"https://www.epicreact.dev/workshops/react-suspense/promise-cache","test",{"_9":597,"_598":599,"_600":601},"browser","pathname","/app/02.01.problem/test/","testFiles",[602],"cache.test.ts","dev",{"_9":597,"_598":605},"/app/02.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/02.dynamic/01.problem.cache?view=editor&title=Promise+Cache+%28problem%29","solutionName",{"_20":67,"_160":498,"_575":610,"_22":68,"_24":69,"_577":611,"_592":612,"_595":614,"_603":617,"_606":619,"_269":327,"_271":272,"_9":287,"_620":-5},"01.solution.cache","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of l(t))!f.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(i=m(t,r))||i.enumerable});return e};var g=(e,t,n)=>(n=e!=null?p(x(e)):{},c(t||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(s({},\"__esModule\",{value:!0}),e);var u=w((k,a)=>{a.exports=_jsx_runtime});var E={};_(E,{default:()=>h,frontmatter:()=>b});var o=g(u()),b=void 0;function d(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||y(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Promise Cache\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-suspense/promise-cache/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Phew, that's much better! But our users are complaining about something else\nthey don't like about this UX. Let's address that next.`})]})}function h(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}function y(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(E);})();\n;return Component;",[613],"https://www.epicreact.dev/workshops/react-suspense/promise-cache/solution",{"_9":597,"_598":615,"_600":616},"/app/02.01.solution/test/",[602],{"_9":597,"_598":618},"/app/02.01.solution/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/02.dynamic/01.solution.cache?view=editor&title=Promise+Cache+%28solution%29","problemName",{"_271":327,"_268":622,"_287":634},{"_20":71,"_160":500,"_575":623,"_22":72,"_24":73,"_577":624,"_592":625,"_595":627,"_603":631,"_606":633,"_269":327,"_271":327,"_9":268,"_608":75},"02.problem.transition","var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),y=(a,e)=>{for(var s in e)o(a,s,{get:e[s],enumerable:!0})},r=(a,e,s,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of b(e))!w.call(a,t)&&t!==s&&o(a,t,{get:()=>e[t],enumerable:!(i=u(e,t))||i.enumerable});return a};var v=(a,e,s)=>(s=a!=null?p(m(a)):{},r(e||!a||!a.__esModule?o(s,\"default\",{value:a,enumerable:!0}):s,a)),k=a=>r(o({},\"__esModule\",{value:!0}),a);var c=g((D,l)=>{l.exports=_jsx_runtime});var N={};y(N,{default:()=>h,frontmatter:()=>f});var n=v(c()),f=void 0;function d(a){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components},{EpicVideo:s}=e;return s||x(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"useTransition\"}),`\n`,(0,n.jsx)(s,{url:\"https://www.epicreact.dev/workshops/react-suspense/usetransition\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Whenever we change the ship, our component suspends. But this is annoying to\nour users who are on reasonably fast internet connections because it means they\nsee a loading spinner every time they change the ship when it really would be a\nbetter experience to have a more subtle pending state when the ship changes.`}),`\n`,(0,n.jsxs)(e.p,{children:[`So what we want is to keep the old UI around while the new UI is being worked\non (and display it in a way that makes it look like it's loading). This is what\n`,(0,n.jsx)(e.code,{children:\"useTransition\"}),` is for! While React keeps the old UI around, it gives us a\n`,(0,n.jsx)(e.code,{children:\"isPending\"}),` state that we can use to show a loading spinner or something else\nwhile the new UI is loading:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"isPending\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"startTransition\"}),\"] \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useTransition\"}),\"()\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"handleSomeEvent\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"startTransition\"}),\"(() \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// This state change triggers a component to suspend, so we wrap it in a\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// `startTransition` call to keep the old UI around until the new UI is ready.\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setSomeState\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"newState\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t})\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Our designer just told us to use a \",(0,n.jsx)(e.code,{children:\"0.6\"}),\" \",(0,n.jsx)(e.code,{children:\"opacity\"}),` setting while the ship is\nchanging (for now). We can use the `,(0,n.jsx)(e.code,{children:\"useTransition\"}),\" hook to accomplish this.\"]}),`\n`,(0,n.jsx)(e.p,{children:`So wrap the state update in a transition and add opacity to the details so we\ncan give our users a better experience!`})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function x(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(N);})();\n;return Component;",[626],"https://www.epicreact.dev/workshops/react-suspense/usetransition",{"_9":597,"_598":628,"_600":629},"/app/02.02.problem/test/",[630],"transition.test.ts",{"_9":597,"_598":632},"/app/02.02.problem/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/02.dynamic/02.problem.transition?view=editor&title=useTransition+%28problem%29",{"_20":75,"_160":500,"_575":635,"_22":76,"_24":77,"_577":636,"_592":637,"_595":639,"_603":642,"_606":644,"_269":327,"_271":327,"_9":287,"_620":-5},"02.solution.transition","var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of f(t))!l.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(i=m(t,r))||i.enumerable});return e};var g=(e,t,n)=>(n=e!=null?d(x(e)):{},c(t||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(s({},\"__esModule\",{value:!0}),e);var a=w((k,u)=>{u.exports=_jsx_runtime});var E={};_(E,{default:()=>p,frontmatter:()=>b});var o=g(a()),b=void 0;function h(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||v(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"useTransition\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-suspense/usetransition/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Yeah, isn't that a much better UX? Love it. Thanks! But there's one other\nissue we're having that some of our users brought up now...`})]})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}function v(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(E);})();\n;return Component;",[638],"https://www.epicreact.dev/workshops/react-suspense/usetransition/solution",{"_9":597,"_598":640,"_600":641},"/app/02.02.solution/test/",[630],{"_9":597,"_598":643},"/app/02.02.solution/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/02.dynamic/02.solution.transition?view=editor&title=useTransition+%28solution%29",{"_271":270,"_268":646,"_287":658},{"_20":79,"_160":502,"_575":647,"_22":80,"_24":81,"_577":648,"_592":649,"_595":651,"_603":655,"_606":657,"_269":327,"_271":270,"_9":268,"_608":83},"03.problem.flash","var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var l in e)t(a,l,{get:e[l],enumerable:!0})},r=(a,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of b(e))!y.call(a,s)&&s!==l&&t(a,s,{get:()=>e[s],enumerable:!(o=u(e,s))||o.enumerable});return a};var v=(a,e,l)=>(l=a!=null?p(m(a)):{},r(e||!a||!a.__esModule?t(l,\"default\",{value:a,enumerable:!0}):l,a)),w=a=>r(t({},\"__esModule\",{value:!0}),a);var c=g((D,i)=>{i.exports=_jsx_runtime});var N={};f(N,{default:()=>h,frontmatter:()=>k});var n=v(c()),k=void 0;function d(a){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...a.components},{EpicVideo:l}=e;return l||x(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Pending Flash\"}),`\n`,(0,n.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-suspense/pending-flash\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} When the user's on a reasonably fast connection, getting the ship data\ndoesn't take very long and as a result the loading state doesn't show up for all\nthat long. This is great, except it results in a flash of the loading state\nwhile the ship takes ~50ms to load. It's jarring for the user and it would be\nbetter if we could avoid it.`}),`\n`,(0,n.jsx)(e.p,{children:`We thought about adding a CSS delay of 300ms on the opacity transition, but that\nwould just mean the flash of loading state happens for people for whom the data\nloading takes 350ms or so. Just moving the problem \\u{1F937}\\u200D\\u2642\\uFE0F`}),`\n`,(0,n.jsx)(e.p,{children:\"What we really need is something that can give us the following experience:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"If the loading takes less than 300ms, don't show a loading spinner at all.\"}),`\n`,(0,n.jsx)(e.li,{children:`If the loading takes longer than 300ms, show a loading spinner for at least\n350ms. Even if the loading is shorter than 300ms + 350ms.`}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`This way, if the user has a reasonably fast connection, they won't see a loading\nstate at all, and if they have a medium fast connection, they'll be guaranteed\nto not get a flash of loading state because the loading state will show up for\nat least 350ms.`}),`\n`,(0,n.jsxs)(e.p,{children:[`Luckily, there's a simple package that does exactly this:\n`,(0,n.jsx)(e.a,{href:\"https://npm.im/spin-delay\",children:(0,n.jsx)(e.code,{children:\"spin-delay\"})}),\". Here's an example:\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"useSpinDelay\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"spin-delay\"}),\"'\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"MyComponent\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"data\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"use\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"somePromise\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"isPending\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"startTransition\"}),\"] \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useTransition\"}),\"()\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// options are optional, and default to these values\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"8\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"showSpinner\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useSpinDelay\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"isPending\"}),\", { delay: \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"500\"}),\", minDuration: \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"200\"}),\" })\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"showSpinner\"}),\") {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Spinner\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// ...\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"So let's add this with a \",(0,n.jsx)(e.code,{children:\"delay\"}),\" of \",(0,n.jsx)(e.code,{children:\"300\"}),\" and a \",(0,n.jsx)(e.code,{children:\"minDuration\"}),\" of \",(0,n.jsx)(e.code,{children:\"350\"}),` to the\n`,(0,n.jsx)(e.code,{children:\"Ship\"}),\" component.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"To test this experience out, you can update the \",(0,n.jsx)(e.code,{children:\"getShip\"}),` call with a second\nargument which is a `,(0,n.jsx)(e.code,{children:\"delay\"}),` that will ensure the request takes at least that\namount of time (it's not super precise, but it should give you an idea).`]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function x(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(N);})();\n;return Component;",[650],"https://www.epicreact.dev/workshops/react-suspense/pending-flash",{"_9":597,"_598":652,"_600":653},"/app/02.03.problem/test/",[654],"spin-delay.test.ts",{"_9":597,"_598":656},"/app/02.03.problem/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/02.dynamic/03.problem.flash?view=editor&title=Pending+Flash+%28problem%29",{"_20":83,"_160":502,"_575":659,"_22":84,"_24":85,"_577":660,"_592":661,"_595":663,"_603":666,"_606":668,"_269":327,"_271":270,"_9":287,"_620":-5},"03.solution.flash","var Component=(()=>{var f=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),w=(e,n)=>{for(var t in n)s(e,t,{get:n[t],enumerable:!0})},a=(e,n,t,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of l(n))!x.call(e,r)&&r!==t&&s(e,r,{get:()=>n[r],enumerable:!(i=h(n,r))||i.enumerable});return e};var _=(e,n,t)=>(t=e!=null?f(m(e)):{},a(n||!e||!e.__esModule?s(t,\"default\",{value:e,enumerable:!0}):t,e)),j=e=>a(s({},\"__esModule\",{value:!0}),e);var d=g((F,c)=>{c.exports=_jsx_runtime});var E={};w(E,{default:()=>u,frontmatter:()=>v});var o=_(d()),v=void 0;function p(e){let n={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:t}=n;return t||y(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{children:\"Pending Flash\"}),`\n`,(0,o.jsx)(t,{url:\"https://www.epicreact.dev/workshops/react-suspense/pending-flash/solution\"}),`\n`,(0,o.jsx)(n.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great! You've managed to avoid a flash of loading state (for which our users\nare very grateful!)`})]})}function u(e={}){let{wrapper:n}=e.components||{};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function y(e,n){throw new Error(\"Expected \"+(n?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(E);})();\n;return Component;",[662],"https://www.epicreact.dev/workshops/react-suspense/pending-flash/solution",{"_9":597,"_598":664,"_600":665},"/app/02.03.solution/test/",[654],{"_9":597,"_598":667},"/app/02.03.solution/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/02.dynamic/03.solution.flash?view=editor&title=Pending+Flash+%28solution%29",[670,675,680],{"_20":63,"_160":498,"_575":590,"_22":64,"_24":65,"_577":591,"_592":671,"_595":672,"_603":674,"_606":607,"_269":327,"_271":272,"_9":268,"_608":67},[594],{"_9":597,"_598":599,"_600":673},[602],{"_9":597,"_598":605},{"_20":71,"_160":500,"_575":623,"_22":72,"_24":73,"_577":624,"_592":676,"_595":677,"_603":679,"_606":633,"_269":327,"_271":327,"_9":268,"_608":75},[626],{"_9":597,"_598":628,"_600":678},[630],{"_9":597,"_598":632},{"_20":79,"_160":502,"_575":647,"_22":80,"_24":81,"_577":648,"_592":681,"_595":682,"_603":684,"_606":657,"_269":327,"_271":270,"_9":268,"_608":83},[650],{"_9":597,"_598":652,"_600":683},[654],{"_9":597,"_598":656},[686,691,696],{"_20":67,"_160":498,"_575":610,"_22":68,"_24":69,"_577":611,"_592":687,"_595":688,"_603":690,"_606":619,"_269":327,"_271":272,"_9":287,"_620":-5},[613],{"_9":597,"_598":615,"_600":689},[602],{"_9":597,"_598":618},{"_20":75,"_160":500,"_575":635,"_22":76,"_24":77,"_577":636,"_592":692,"_595":693,"_603":695,"_606":644,"_269":327,"_271":327,"_9":287,"_620":-5},[638],{"_9":597,"_598":640,"_600":694},[630],{"_9":597,"_598":643},{"_20":83,"_160":502,"_575":659,"_22":84,"_24":85,"_577":660,"_592":697,"_595":698,"_603":700,"_606":668,"_269":327,"_271":270,"_9":287,"_620":-5},[662],{"_9":597,"_598":664,"_600":699},[654],{"_9":597,"_598":667},"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=Dynamic%20Promises","epicVideoInfosPromise",["P",704],"exerciseFinished",{"_707":708,"_24":709},"file","/myapp/workshop-content/exercises/02.dynamic/FINISHED.mdx","exercises/02.dynamic/FINISHED.mdx","prevStepLink",{"_712":713,"_714":715},"to","/exercise/02/03/solution","aria-label","Pending Flash (solution)","nextStepLink",{"_712":718,"_714":512},"/exercise/03","routes/_app+/exercise+/_layout","actionData","errors"]

02. Dynamic Promises/Elaboration