[{"_1":2,"_707":-5,"_708":-5},"loaderData",{"_3":4,"_414":415,"_557":558},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_158":159,"_161":162,"_163":16,"_164":165,"_222":167,"_223":169,"_170":171,"_224":225,"_246":247,"_271":-5,"_272":-5,"_273":274},"userId",{"_7":8,"_9":10},"id","i7e2wasvyq76t9a4kgudi2wy","type","cookie.randomId","preferences","progress",[],"user","userHasAccess",false,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.fetching/01.problem.throw","relativePath","exercises/01.fetching/01.problem.throw",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.fetching/01.solution.throw","exercises/01.fetching/01.solution.throw",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.fetching/02.problem.errors","exercises/01.fetching/02.problem.errors",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.fetching/02.solution.errors","exercises/01.fetching/02.solution.errors",{"_20":39,"_22":40,"_24":41},"01.03.problem","/myapp/workshop-content/exercises/01.fetching/03.problem.status","exercises/01.fetching/03.problem.status",{"_20":43,"_22":44,"_24":45},"01.03.solution","/myapp/workshop-content/exercises/01.fetching/03.solution.status","exercises/01.fetching/03.solution.status",{"_20":47,"_22":48,"_24":49},"01.04.problem","/myapp/workshop-content/exercises/01.fetching/04.problem.util","exercises/01.fetching/04.problem.util",{"_20":51,"_22":52,"_24":53},"01.04.solution","/myapp/workshop-content/exercises/01.fetching/04.solution.util","exercises/01.fetching/04.solution.util",{"_20":55,"_22":56,"_24":57},"01.05.problem","/myapp/workshop-content/exercises/01.fetching/05.problem.use","exercises/01.fetching/05.problem.use",{"_20":59,"_22":60,"_24":61},"01.05.solution","/myapp/workshop-content/exercises/01.fetching/05.solution.use","exercises/01.fetching/05.solution.use",{"_20":63,"_22":64,"_24":65},"02.01.problem","/myapp/workshop-content/exercises/02.dynamic/01.problem.cache","exercises/02.dynamic/01.problem.cache",{"_20":67,"_22":68,"_24":69},"02.01.solution","/myapp/workshop-content/exercises/02.dynamic/01.solution.cache","exercises/02.dynamic/01.solution.cache",{"_20":71,"_22":72,"_24":73},"02.02.problem","/myapp/workshop-content/exercises/02.dynamic/02.problem.transition","exercises/02.dynamic/02.problem.transition",{"_20":75,"_22":76,"_24":77},"02.02.solution","/myapp/workshop-content/exercises/02.dynamic/02.solution.transition","exercises/02.dynamic/02.solution.transition",{"_20":79,"_22":80,"_24":81},"02.03.problem","/myapp/workshop-content/exercises/02.dynamic/03.problem.flash","exercises/02.dynamic/03.problem.flash",{"_20":83,"_22":84,"_24":85},"02.03.solution","/myapp/workshop-content/exercises/02.dynamic/03.solution.flash","exercises/02.dynamic/03.solution.flash",{"_20":87,"_22":88,"_24":89},"03.01.problem","/myapp/workshop-content/exercises/03.optimistic/01.problem.optimistic","exercises/03.optimistic/01.problem.optimistic",{"_20":91,"_22":92,"_24":93},"03.01.solution","/myapp/workshop-content/exercises/03.optimistic/01.solution.optimistic","exercises/03.optimistic/01.solution.optimistic",{"_20":95,"_22":96,"_24":97},"03.02.problem","/myapp/workshop-content/exercises/03.optimistic/02.problem.form-status","exercises/03.optimistic/02.problem.form-status",{"_20":99,"_22":100,"_24":101},"03.02.solution","/myapp/workshop-content/exercises/03.optimistic/02.solution.form-status","exercises/03.optimistic/02.solution.form-status",{"_20":103,"_22":104,"_24":105},"03.03.problem","/myapp/workshop-content/exercises/03.optimistic/03.problem.message","exercises/03.optimistic/03.problem.message",{"_20":107,"_22":108,"_24":109},"03.03.solution","/myapp/workshop-content/exercises/03.optimistic/03.solution.message","exercises/03.optimistic/03.solution.message",{"_20":111,"_22":112,"_24":113},"04.01.problem","/myapp/workshop-content/exercises/04.image/01.problem.img","exercises/04.image/01.problem.img",{"_20":115,"_22":116,"_24":117},"04.01.solution","/myapp/workshop-content/exercises/04.image/01.solution.img","exercises/04.image/01.solution.img",{"_20":119,"_22":120,"_24":121},"04.02.problem","/myapp/workshop-content/exercises/04.image/02.problem.error","exercises/04.image/02.problem.error",{"_20":123,"_22":124,"_24":125},"04.02.solution","/myapp/workshop-content/exercises/04.image/02.solution.error","exercises/04.image/02.solution.error",{"_20":127,"_22":128,"_24":129},"04.03.problem","/myapp/workshop-content/exercises/04.image/03.problem.key","exercises/04.image/03.problem.key",{"_20":131,"_22":132,"_24":133},"04.03.solution","/myapp/workshop-content/exercises/04.image/03.solution.key","exercises/04.image/03.solution.key",{"_20":135,"_22":136,"_24":137},"05.01.problem","/myapp/workshop-content/exercises/05.responsive/01.problem.deferred","exercises/05.responsive/01.problem.deferred",{"_20":139,"_22":140,"_24":141},"05.01.solution","/myapp/workshop-content/exercises/05.responsive/01.solution.deferred","exercises/05.responsive/01.solution.deferred",{"_20":143,"_22":144,"_24":145},"06.01.problem","/myapp/workshop-content/exercises/06.optimization/01.problem.parallel","exercises/06.optimization/01.problem.parallel",{"_20":147,"_22":148,"_24":149},"06.01.solution","/myapp/workshop-content/exercises/06.optimization/01.solution.parallel","exercises/06.optimization/01.solution.parallel",{"_20":151,"_22":152,"_24":153},"06.02.problem","/myapp/workshop-content/exercises/06.optimization/02.problem.cache","exercises/06.optimization/02.problem.cache",{"_20":155,"_22":156,"_24":157},"06.02.solution","/myapp/workshop-content/exercises/06.optimization/02.solution.cache","exercises/06.optimization/02.solution.cache","repoUpdates",{"_160":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_166":167,"_168":169,"_170":171,"_177":178,"_195":196,"_198":199,"_200":201,"_202":203,"_206":207,"_212":213,"_216":217,"_218":219,"_220":221},"title","React Suspense 🔀","subtitle","Simplify your Async UI and improve your User Experience","instructor",{"_20":172,"_173":174,"_175":176},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-suspense","discordChannelId","1285244676286189569","discordTags",[193,194],"1285246046498328627","1285245867791745116","onboardingVideo",[197],"https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/react-suspense","githubRoot","https://github.com/epicweb-dev/react-suspense/tree/main","stackBlitzConfig",{"_204":205},"view","editor","forms",{"_208":209,"_210":211},"workshop","https://docs.google.com/forms/d/e/1FAIpQLSdRmj9p8-5zyoqRzxp3UpqSbC3aFkweXvvJIKes0a5s894gzg/viewform?hl=en&embedded=true&entry.2123647600={workshopTitle}","exercise","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234={workshopTitle}&entry.428900931={exerciseTitle}","testTab",{"_214":215},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_226":227,"_228":229,"_230":231,"_232":199,"_233":201,"_234":215,"_235":236,"_237":238,"_239":240,"_241":215,"_242":243,"_244":245},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_WORKSHOP_INSTANCE_ID","4e1570b81d1baf3d16bd3a08ece570cb","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","6.40.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","c8071aecbe8fbab47bafda13017613e227f52c30b4623738db42eba4496c9bac","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_248":249,"_250":251,"_252":253,"_254":255,"_256":255,"_257":258,"_265":266,"_267":268,"_269":217,"_270":215},"protocol","http:","hostname","suspense.epicreact.dev","port","","origin","http://suspense.epicreact.dev","domain","hints",{"_259":260,"_261":262,"_263":264},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/02/finished","session",{"_259":-5},"separator","online","toast","confettiId","presence",{"_275":276},"users",[277,292,303,311,320,328,335,343,352,360,367,372,377,384,389,392,395,402,407,410],{"_7":278,"_279":215,"_280":281,"_282":283,"_20":284,"_285":286},"a6ca4985-c5ef-419d-a3e0-e54ca5753a08","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/5c61e3dcb9648b7df6a7b148d1fa16d7?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/5c61e3dcb9648b7df6a7b148d1fa16d7?size=512&default=identicon","Damian Miskey","location",{"_222":287,"_254":288,"_210":289},"Advanced React APIs 🔥","http://localhost:5639",{"_290":291},"exerciseNumber",6,{"_7":293,"_279":215,"_280":294,"_282":295,"_20":296,"_285":297},"ad3251c9-2810-4e8f-be7e-f4740807dc35","https://www.gravatar.com/avatar/35dcfd1f36937f8b58c693625de734f4?size=64&default=identicon","https://www.gravatar.com/avatar/35dcfd1f36937f8b58c693625de734f4?size=512&default=identicon","accounts@lehnerchristian.com",{"_222":167,"_254":288,"_210":298},{"_9":299,"_290":300,"_301":302},"problem",3,"stepNumber",2,{"_7":304,"_279":215,"_280":305,"_282":306,"_20":307,"_285":308},"70078aa1-7b41-40f4-9930-79013303627b","https://avatars.githubusercontent.com/u/4356894?v=4&size=64","https://avatars.githubusercontent.com/u/4356894?v=4&size=512","Thor Anderson",{"_222":309,"_254":288,"_210":310},"MCP Fundamentals 🧱",{"_9":299,"_290":302,"_301":300},{"_7":312,"_279":215,"_280":313,"_282":314,"_20":315,"_285":316},"36043933-4133-44e0-8c8c-25475a9c60fd","https://cdn.discordapp.com/avatars/476968380579053610/d10824f630cf24b5c9d477b2ab21ca86.png?size=64","https://cdn.discordapp.com/avatars/476968380579053610/d10824f630cf24b5c9d477b2ab21ca86.png?size=512","Harshit Kr Vishwakarma",{"_222":317,"_254":288,"_210":318},"React Server Components 🤹",{"_9":299,"_290":319,"_301":319},1,{"_7":321,"_279":215,"_280":322,"_282":323,"_20":324,"_285":325},"afcb5fbb-9f5e-4dcc-a201-f6b2b7c22aaf","https://www.gravatar.com/avatar/3906494abe29e7418425dbce15264502?size=64&default=identicon","https://www.gravatar.com/avatar/3906494abe29e7418425dbce15264502?size=512&default=identicon","Yuri",{"_222":309,"_254":288,"_210":326},{"_9":299,"_290":327,"_301":319},4,{"_7":329,"_279":215,"_280":330,"_282":331,"_20":332,"_285":333},"e04924d8-83de-4512-91ac-909b70b0ed56","https://www.gravatar.com/avatar/c9efb061aa4edcb554784fa09e542f19?size=64&default=identicon","https://www.gravatar.com/avatar/c9efb061aa4edcb554784fa09e542f19?size=512&default=identicon","mehmet fırat kömürcü",{"_222":167,"_254":288,"_210":334},{"_290":291},{"_7":336,"_279":215,"_280":337,"_282":338,"_20":339,"_285":340},"2f077b38-c961-4789-944f-49aa7d197bd2","https://cdn.discordapp.com/avatars/707642396170780693/a46bb30e1cf14d9d2847a2997477eeb6.png?size=64","https://cdn.discordapp.com/avatars/707642396170780693/a46bb30e1cf14d9d2847a2997477eeb6.png?size=512","Bonvin Adrien",{"_222":287,"_254":288,"_210":341},{"_9":299,"_290":342,"_301":319},8,{"_7":344,"_279":215,"_280":345,"_282":346,"_20":347,"_285":348},"4859f3f2-5a2f-405c-b19a-6eef310e6055","https://cdn.discordapp.com/avatars/424731676401205279/53298583f0db52eea6d040f141793468.png?size=64","https://cdn.discordapp.com/avatars/424731676401205279/53298583f0db52eea6d040f141793468.png?size=512","JESUS RUIZ BARRETO",{"_222":349,"_254":288,"_210":350},"React Fundamentals ⚛",{"_9":351,"_290":319,"_301":319},"solution",{"_7":353,"_279":215,"_280":354,"_282":355,"_20":356,"_285":357},"c0598a97-02da-42a8-9138-c316ed10dd38","https://cdn.discordapp.com/avatars/520259965022109697/2d82acce05f0a2c5cbebaccf52da5a2f.png?size=64","https://cdn.discordapp.com/avatars/520259965022109697/2d82acce05f0a2c5cbebaccf52da5a2f.png?size=512","Andrea",{"_222":358,"_254":288,"_210":359},"Advanced MCP Features 🐡",{"_290":302},{"_7":361,"_279":215,"_280":362,"_282":363,"_20":364,"_285":365},"81798386-e015-496d-a364-3723089c7102","https://www.gravatar.com/avatar/9ec479331a20a8b0ba4754b1d46508e6?size=64&default=identicon","https://www.gravatar.com/avatar/9ec479331a20a8b0ba4754b1d46508e6?size=512&default=identicon","Marat Karakhanov",{"_222":349,"_254":288,"_210":366},{"_9":299,"_290":319,"_301":302},{"_7":368,"_285":369},"j3efouhhne7yto1o5t2olkvp",{"_222":370,"_254":288,"_210":371},"Professional Web Forms 📝",{"_290":327},{"_7":373,"_285":374},"ny10zapfnozlzkbhf7flios6",{"_222":375,"_254":376},"React Component Testing with Vitest","http://react-component-testing-with-vitest.epicweb.dev",{"_7":378,"_279":215,"_280":379,"_282":380,"_20":-5,"_285":381},"dfdb086f-7393-4276-8103-5599e51021be","https://www.gravatar.com/avatar/eb1602d411f5ce56c615ff3c8daf91b0?size=64&default=identicon","https://www.gravatar.com/avatar/eb1602d411f5ce56c615ff3c8daf91b0?size=512&default=identicon",{"_222":382,"_254":288,"_210":383},"Advanced React Patterns 🤯",{"_9":351,"_290":302,"_301":319},{"_7":385,"_285":386},"grloelcia4xut4ylshhx6bf7",{"_222":349,"_254":387,"_210":388},"http://fundamentals.epicreact.dev",{"_9":299,"_290":300,"_301":302},{"_7":390,"_285":391},"msq4d7pabjqghl6282w3beq5",{"_222":375,"_254":376},{"_7":393,"_285":394},"fws6oqdjpmtpz06d0bokdn3l",{"_222":375,"_254":376},{"_7":396,"_285":397},"c5fqi4jy793tr4o3mpsnyw8f",{"_222":398,"_254":399,"_210":400},"React Performance ⚡","http://performance.epicreact.dev",{"_290":401},7,{"_7":403,"_285":404},"oetpuwak1po99es42odr6vwa",{"_222":405,"_254":406},"React Hooks 🎣","http://127.0.0.1:5639",{"_7":408,"_285":409},"prmh0iy4tbj2nvq4e9476bqv",{"_222":375,"_254":376},{"_7":411,"_285":412},"kmnb82ptpmj9leffb763uc60",{"_222":167,"_254":255,"_210":413},{"_290":302,"_301":-5,"_9":-5},"routes/_app+/_layout",{"_222":167,"_416":417,"_553":554,"_556":16},"exercises",[418,457,480,502,525,536],{"_290":319,"_166":419,"_420":421,"_433":434,"_440":441},"Data fetching","solutions",[422,424,426,428,430],{"_301":319,"_166":423,"_20":27},"Throwing Promises",{"_301":302,"_166":425,"_20":35},"Error Handling",{"_301":300,"_166":427,"_20":43},"Formal Status",{"_301":327,"_166":429,"_20":51},"Utility",{"_301":431,"_166":432,"_20":59},5,"use React","problems",[435,436,437,438,439],{"_301":319,"_166":423,"_20":21},{"_301":302,"_166":425,"_20":31},{"_301":300,"_166":427,"_20":39},{"_301":327,"_166":429,"_20":47},{"_301":431,"_166":432,"_20":55},"steps",[442,445,448,451,454],{"_301":319,"_166":423,"_20":21,"_299":443,"_351":444},{"_20":21,"_166":423},{"_20":27,"_166":423},{"_301":302,"_166":425,"_20":31,"_299":446,"_351":447},{"_20":31,"_166":425},{"_20":35,"_166":425},{"_301":300,"_166":427,"_20":39,"_299":449,"_351":450},{"_20":39,"_166":427},{"_20":43,"_166":427},{"_301":327,"_166":429,"_20":47,"_299":452,"_351":453},{"_20":47,"_166":429},{"_20":51,"_166":429},{"_301":431,"_166":432,"_20":55,"_299":455,"_351":456},{"_20":55,"_166":432},{"_20":59,"_166":432},{"_290":302,"_166":458,"_420":459,"_433":466,"_440":470},"Dynamic Promises",[460,462,464],{"_301":319,"_166":461,"_20":67},"Promise Cache",{"_301":302,"_166":463,"_20":75},"useTransition",{"_301":300,"_166":465,"_20":83},"Pending Flash",[467,468,469],{"_301":319,"_166":461,"_20":63},{"_301":302,"_166":463,"_20":71},{"_301":300,"_166":465,"_20":79},[471,474,477],{"_301":319,"_166":461,"_20":63,"_299":472,"_351":473},{"_20":63,"_166":461},{"_20":67,"_166":461},{"_301":302,"_166":463,"_20":71,"_299":475,"_351":476},{"_20":71,"_166":463},{"_20":75,"_166":463},{"_301":300,"_166":465,"_20":79,"_299":478,"_351":479},{"_20":79,"_166":465},{"_20":83,"_166":465},{"_290":300,"_166":481,"_420":482,"_433":488,"_440":492},"Optimistic UI",[483,484,486],{"_301":319,"_166":481,"_20":91},{"_301":302,"_166":485,"_20":99},"Form Status",{"_301":300,"_166":487,"_20":107},"Multi-step Actions",[489,490,491],{"_301":319,"_166":481,"_20":87},{"_301":302,"_166":485,"_20":95},{"_301":300,"_166":487,"_20":103},[493,496,499],{"_301":319,"_166":481,"_20":87,"_299":494,"_351":495},{"_20":87,"_166":481},{"_20":91,"_166":481},{"_301":302,"_166":485,"_20":95,"_299":497,"_351":498},{"_20":95,"_166":485},{"_20":99,"_166":485},{"_301":300,"_166":487,"_20":103,"_299":500,"_351":501},{"_20":103,"_166":487},{"_20":107,"_166":487},{"_290":327,"_166":503,"_420":504,"_433":511,"_440":515},"Suspense img",[505,507,509],{"_301":319,"_166":506,"_20":115},"Img Component",{"_301":302,"_166":508,"_20":123},"Img Error Boundary",{"_301":300,"_166":510,"_20":131},"Key prop",[512,513,514],{"_301":319,"_166":506,"_20":111},{"_301":302,"_166":508,"_20":119},{"_301":300,"_166":510,"_20":127},[516,519,522],{"_301":319,"_166":506,"_20":111,"_299":517,"_351":518},{"_20":111,"_166":506},{"_20":115,"_166":506},{"_301":302,"_166":508,"_20":119,"_299":520,"_351":521},{"_20":119,"_166":508},{"_20":123,"_166":508},{"_301":300,"_166":510,"_20":127,"_299":523,"_351":524},{"_20":127,"_166":510},{"_20":131,"_166":510},{"_290":431,"_166":526,"_420":527,"_433":530,"_440":532},"Responsive",[528],{"_301":319,"_166":529,"_20":139},"useDeferredValue",[531],{"_301":319,"_166":529,"_20":135},[533],{"_301":319,"_166":529,"_20":135,"_299":534,"_351":535},{"_20":135,"_166":529},{"_20":139,"_166":529},{"_290":291,"_166":537,"_420":538,"_433":543,"_440":546},"Optimizations",[539,541],{"_301":319,"_166":540,"_20":147},"Parallel Loading",{"_301":302,"_166":542,"_20":155},"Server Cache",[544,545],{"_301":319,"_166":540,"_20":143},{"_301":302,"_166":542,"_20":151},[547,550],{"_301":319,"_166":540,"_20":143,"_299":548,"_351":549},{"_20":143,"_166":540},{"_20":147,"_166":540},{"_301":302,"_166":542,"_20":151,"_299":551,"_351":552},{"_20":151,"_166":542},{"_20":155,"_166":542},"playground",{"_555":-5,"_290":-2,"_301":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_559":560,"_222":167,"_210":561,"_689":690,"_691":692,"_693":694,"_698":699,"_704":705},"articleId","workshop-react-suspense-2-finished",{"_22":562,"_290":302,"_563":564,"_166":458,"_565":566,"_567":568,"_569":570,"_572":573,"_440":575,"_433":657,"_420":673},"/myapp/workshop-content/exercises/02.dynamic","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",[571],"https://www.epicreact.dev/workshops/react-suspense/intro-to-dynamic-promises","finishedEpicVideoEmbeds",[574],"https://www.epicreact.dev/workshops/react-suspense/dad-joke-break-dynamic-promises",[576,609,633],{"_301":319,"_299":577,"_351":597},{"_20":63,"_166":461,"_563":578,"_22":64,"_24":65,"_565":579,"_580":581,"_583":584,"_591":592,"_594":595,"_290":302,"_301":319,"_9":299,"_596":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 o in e)r(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!w.call(n,s)&&s!==o&&r(n,s,{get:()=>e[s],enumerable:!(i=f(e,s))||i.enumerable});return n};var v=(n,e,o)=>(o=n!=null?p(g(n)):{},c(e||!n||!n.__esModule?r(o,\"default\",{value:n,enumerable:!0}):o,n)),k=n=>c(r({},\"__esModule\",{value:!0}),n);var h=y((j,a)=>{a.exports=_jsx_runtime});var I={};b(I,{default:()=>u,frontmatter:()=>x});var t=v(h()),x=void 0;function d(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:o,PrevDiffLink:i}=e;return o||l(\"EpicVideo\",!0),i||l(\"PrevDiffLink\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Promise Cache\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-suspense/promise-cache\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u{1F9DD}\\u200D\\u2642\\uFE0F I've made a \",(0,t.jsx)(i,{children:\"couple of changes\"}),`. I moved the\n`,(0,t.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,t.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,t.jsx)(e.code,{children:\"getShip\"}),` function so every render\ntriggers a new fetch call.`]}),`\n`,(0,t.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,t.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,t.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,t.jsx)(\"callout-info\",{children:(0,t.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.`})}),`\n`,(0,t.jsx)(\"callout-success\",{children:(0,t.jsx)(e.p,{children:`The slightly inaccurate warning talked about in the video is no longer present\nin the latest version of React. Instead the requests will just continue for an\ninfinite loop! This step will fix the infinite requests.`})})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.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(I);})();\n;return Component;","epicVideoEmbeds",[582],"https://www.epicreact.dev/workshops/react-suspense/promise-cache","test",{"_9":585,"_586":587,"_588":589},"browser","pathname","/app/02.01.problem/test/","testFiles",[590],"cache.test.ts","dev",{"_9":585,"_586":593},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":67,"_166":461,"_563":598,"_22":68,"_24":69,"_565":599,"_580":600,"_583":602,"_591":605,"_594":607,"_290":302,"_301":319,"_9":351,"_608":-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;",[601],"https://www.epicreact.dev/workshops/react-suspense/promise-cache/solution",{"_9":585,"_586":603,"_588":604},"/app/02.01.solution/test/",[590],{"_9":585,"_586":606},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_301":302,"_299":610,"_351":622},{"_20":71,"_166":463,"_563":611,"_22":72,"_24":73,"_565":612,"_580":613,"_583":615,"_591":619,"_594":621,"_290":302,"_301":302,"_9":299,"_596":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;",[614],"https://www.epicreact.dev/workshops/react-suspense/usetransition",{"_9":585,"_586":616,"_588":617},"/app/02.02.problem/test/",[618],"transition.test.ts",{"_9":585,"_586":620},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":75,"_166":463,"_563":623,"_22":76,"_24":77,"_565":624,"_580":625,"_583":627,"_591":630,"_594":632,"_290":302,"_301":302,"_9":351,"_608":-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;",[626],"https://www.epicreact.dev/workshops/react-suspense/usetransition/solution",{"_9":585,"_586":628,"_588":629},"/app/02.02.solution/test/",[618],{"_9":585,"_586":631},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_301":300,"_299":634,"_351":646},{"_20":79,"_166":465,"_563":635,"_22":80,"_24":81,"_565":636,"_580":637,"_583":639,"_591":643,"_594":645,"_290":302,"_301":300,"_9":299,"_596":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;",[638],"https://www.epicreact.dev/workshops/react-suspense/pending-flash",{"_9":585,"_586":640,"_588":641},"/app/02.03.problem/test/",[642],"spin-delay.test.ts",{"_9":585,"_586":644},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":83,"_166":465,"_563":647,"_22":84,"_24":85,"_565":648,"_580":649,"_583":651,"_591":654,"_594":656,"_290":302,"_301":300,"_9":351,"_608":-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;",[650],"https://www.epicreact.dev/workshops/react-suspense/pending-flash/solution",{"_9":585,"_586":652,"_588":653},"/app/02.03.solution/test/",[642],{"_9":585,"_586":655},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[658,663,668],{"_20":63,"_166":461,"_563":578,"_22":64,"_24":65,"_565":579,"_580":659,"_583":660,"_591":662,"_594":595,"_290":302,"_301":319,"_9":299,"_596":67},[582],{"_9":585,"_586":587,"_588":661},[590],{"_9":585,"_586":593},{"_20":71,"_166":463,"_563":611,"_22":72,"_24":73,"_565":612,"_580":664,"_583":665,"_591":667,"_594":621,"_290":302,"_301":302,"_9":299,"_596":75},[614],{"_9":585,"_586":616,"_588":666},[618],{"_9":585,"_586":620},{"_20":79,"_166":465,"_563":635,"_22":80,"_24":81,"_565":636,"_580":669,"_583":670,"_591":672,"_594":645,"_290":302,"_301":300,"_9":299,"_596":83},[638],{"_9":585,"_586":640,"_588":671},[642],{"_9":585,"_586":644},[674,679,684],{"_20":67,"_166":461,"_563":598,"_22":68,"_24":69,"_565":599,"_580":675,"_583":676,"_591":678,"_594":607,"_290":302,"_301":319,"_9":351,"_608":-5},[601],{"_9":585,"_586":603,"_588":677},[590],{"_9":585,"_586":606},{"_20":75,"_166":463,"_563":623,"_22":76,"_24":77,"_565":624,"_580":680,"_583":681,"_591":683,"_594":632,"_290":302,"_301":302,"_9":351,"_608":-5},[626],{"_9":585,"_586":628,"_588":682},[618],{"_9":585,"_586":631},{"_20":83,"_166":465,"_563":647,"_22":84,"_24":85,"_565":648,"_580":685,"_583":686,"_591":688,"_594":656,"_290":302,"_301":300,"_9":351,"_608":-5},[650],{"_9":585,"_586":652,"_588":687},[642],{"_9":585,"_586":655},"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",692],"exerciseFinished",{"_695":696,"_24":697},"file","/myapp/workshop-content/exercises/02.dynamic/FINISHED.mdx","exercises/02.dynamic/FINISHED.mdx","prevStepLink",{"_700":701,"_702":703},"to","/exercise/02/03/solution","aria-label","Pending Flash (solution)","nextStepLink",{"_700":706,"_702":481},"/exercise/03","actionData","errors"]

02. Dynamic Promises/Elaboration