[{"_1":2,"_696":-5,"_697":-5},"loaderData",{"_3":4,"_332":333,"_478":479},"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":-7,"_273":274},"userId",{"_7":8,"_9":10},"id","62bcc422-3546-4542-a066-f28b5eeb26ec","type","cookie.clientId","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.45.7","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","1253db50dd732338b503f1c142a533cc41298eff73a76f64981a84bf5e9ef730","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","epicweb-dev-react-suspense.fly.dev","port","","origin","http://epicweb-dev-react-suspense.fly.dev","domain","hints",{"_259":260,"_261":262,"_263":264},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/01/finished","session",{"_259":-5},"separator","online","toast","confettiId","presence",{"_275":276},"users",[277,292,300,305,310,318,322,329],{"_7":278,"_279":215,"_280":281,"_282":283,"_20":284,"_285":286},"6b6f4e34-3c1b-4fb9-8321-0e94be92663d","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/39eccbb7ddf27c95c8a84966c96d5ff6?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/39eccbb7ddf27c95c8a84966c96d5ff6?size=512&default=identicon","Kevin Zurawel","location",{"_222":287,"_254":288,"_210":289},"React Fundamentals ⚛","http://localhost:5639",{"_290":291},"exerciseNumber",6,{"_7":293,"_279":215,"_280":294,"_282":295,"_20":-5,"_285":296},"3a422602-b1c6-45ae-8923-8b262fcff922","https://www.gravatar.com/avatar/80f238939f099d271be0b2032a0d9ea0?size=64&default=identicon","https://www.gravatar.com/avatar/80f238939f099d271be0b2032a0d9ea0?size=512&default=identicon",{"_222":297,"_254":288,"_210":298},"Advanced React Patterns 🤯",{"_290":299},1,{"_7":301,"_285":302},"pdfe63ozb1ux914g0v1yq8ur",{"_222":303,"_254":304},"Advanced Vitest Patterns","http://advanced-vitest-patterns.epicweb.dev",{"_7":306,"_285":307},"5552a817-4f20-46fa-8b49-a91b01345585",{"_222":308,"_254":309},"React Server Components 🤹","http://server-components.epicreact.dev",{"_7":311,"_285":312},"28775d70-1817-4e74-a0d3-e90ea3f18774",{"_222":313,"_254":314,"_210":315},"Advanced React APIs 🔥","http://advanced-apis.epicreact.dev",{"_9":316,"_290":299,"_317":299},"problem","stepNumber",{"_7":319,"_285":320},"e6a20318-9b6e-4bcf-8e94-8d5e7ff74813",{"_222":308,"_254":309,"_210":321},{"_290":299},{"_7":323,"_285":324},"a6ecab95-bb74-4e57-9ab3-cec7dd45af8f",{"_222":325,"_254":326,"_210":327},"React Component Testing with Vitest","http://react-component-testing-with-vitest.epicweb.dev",{"_9":316,"_290":328,"_317":299},5,{"_7":8,"_285":330},{"_222":167,"_254":255,"_210":331},{"_290":299,"_317":-5,"_9":-5},"routes/_app+/_layout",{"_222":167,"_334":335,"_474":475,"_477":16},"exercises",[336,378,401,423,446,457],{"_290":299,"_166":337,"_338":339,"_353":354,"_360":361},"Data fetching","solutions",[340,342,345,348,351],{"_317":299,"_166":341,"_20":27},"Throwing Promises",{"_317":343,"_166":344,"_20":35},2,"Error Handling",{"_317":346,"_166":347,"_20":43},3,"Formal Status",{"_317":349,"_166":350,"_20":51},4,"Utility",{"_317":328,"_166":352,"_20":59},"use React","problems",[355,356,357,358,359],{"_317":299,"_166":341,"_20":21},{"_317":343,"_166":344,"_20":31},{"_317":346,"_166":347,"_20":39},{"_317":349,"_166":350,"_20":47},{"_317":328,"_166":352,"_20":55},"steps",[362,366,369,372,375],{"_317":299,"_166":341,"_20":21,"_316":363,"_364":365},{"_20":21,"_166":341},"solution",{"_20":27,"_166":341},{"_317":343,"_166":344,"_20":31,"_316":367,"_364":368},{"_20":31,"_166":344},{"_20":35,"_166":344},{"_317":346,"_166":347,"_20":39,"_316":370,"_364":371},{"_20":39,"_166":347},{"_20":43,"_166":347},{"_317":349,"_166":350,"_20":47,"_316":373,"_364":374},{"_20":47,"_166":350},{"_20":51,"_166":350},{"_317":328,"_166":352,"_20":55,"_316":376,"_364":377},{"_20":55,"_166":352},{"_20":59,"_166":352},{"_290":343,"_166":379,"_338":380,"_353":387,"_360":391},"Dynamic Promises",[381,383,385],{"_317":299,"_166":382,"_20":67},"Promise Cache",{"_317":343,"_166":384,"_20":75},"useTransition",{"_317":346,"_166":386,"_20":83},"Pending Flash",[388,389,390],{"_317":299,"_166":382,"_20":63},{"_317":343,"_166":384,"_20":71},{"_317":346,"_166":386,"_20":79},[392,395,398],{"_317":299,"_166":382,"_20":63,"_316":393,"_364":394},{"_20":63,"_166":382},{"_20":67,"_166":382},{"_317":343,"_166":384,"_20":71,"_316":396,"_364":397},{"_20":71,"_166":384},{"_20":75,"_166":384},{"_317":346,"_166":386,"_20":79,"_316":399,"_364":400},{"_20":79,"_166":386},{"_20":83,"_166":386},{"_290":346,"_166":402,"_338":403,"_353":409,"_360":413},"Optimistic UI",[404,405,407],{"_317":299,"_166":402,"_20":91},{"_317":343,"_166":406,"_20":99},"Form Status",{"_317":346,"_166":408,"_20":107},"Multi-step Actions",[410,411,412],{"_317":299,"_166":402,"_20":87},{"_317":343,"_166":406,"_20":95},{"_317":346,"_166":408,"_20":103},[414,417,420],{"_317":299,"_166":402,"_20":87,"_316":415,"_364":416},{"_20":87,"_166":402},{"_20":91,"_166":402},{"_317":343,"_166":406,"_20":95,"_316":418,"_364":419},{"_20":95,"_166":406},{"_20":99,"_166":406},{"_317":346,"_166":408,"_20":103,"_316":421,"_364":422},{"_20":103,"_166":408},{"_20":107,"_166":408},{"_290":349,"_166":424,"_338":425,"_353":432,"_360":436},"Suspense img",[426,428,430],{"_317":299,"_166":427,"_20":115},"Img Component",{"_317":343,"_166":429,"_20":123},"Img Error Boundary",{"_317":346,"_166":431,"_20":131},"Key prop",[433,434,435],{"_317":299,"_166":427,"_20":111},{"_317":343,"_166":429,"_20":119},{"_317":346,"_166":431,"_20":127},[437,440,443],{"_317":299,"_166":427,"_20":111,"_316":438,"_364":439},{"_20":111,"_166":427},{"_20":115,"_166":427},{"_317":343,"_166":429,"_20":119,"_316":441,"_364":442},{"_20":119,"_166":429},{"_20":123,"_166":429},{"_317":346,"_166":431,"_20":127,"_316":444,"_364":445},{"_20":127,"_166":431},{"_20":131,"_166":431},{"_290":328,"_166":447,"_338":448,"_353":451,"_360":453},"Responsive",[449],{"_317":299,"_166":450,"_20":139},"useDeferredValue",[452],{"_317":299,"_166":450,"_20":135},[454],{"_317":299,"_166":450,"_20":135,"_316":455,"_364":456},{"_20":135,"_166":450},{"_20":139,"_166":450},{"_290":291,"_166":458,"_338":459,"_353":464,"_360":467},"Optimizations",[460,462],{"_317":299,"_166":461,"_20":147},"Parallel Loading",{"_317":343,"_166":463,"_20":155},"Server Cache",[465,466],{"_317":299,"_166":461,"_20":143},{"_317":343,"_166":463,"_20":151},[468,471],{"_317":299,"_166":461,"_20":143,"_316":469,"_364":470},{"_20":143,"_166":461},{"_20":147,"_166":461},{"_317":343,"_166":463,"_20":151,"_316":472,"_364":473},{"_20":151,"_166":463},{"_20":155,"_166":463},"playground",{"_476":-5,"_290":-2,"_317":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_480":481,"_222":167,"_210":482,"_678":679,"_680":681,"_682":683,"_687":688,"_693":694},"articleId","workshop-react-suspense-1-finished",{"_22":483,"_290":299,"_484":485,"_166":337,"_486":487,"_488":489,"_490":491,"_493":494,"_360":496,"_353":626,"_338":652},"/myapp/workshop-content/exercises/01.fetching","dirName","01.fetching","instructionsCode","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var r in e)s(a,r,{get:e[r],enumerable:!0})},t=(a,e,r,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!y.call(a,o)&&o!==r&&s(a,o,{get:()=>e[o],enumerable:!(l=b(e,o))||l.enumerable});return a};var g=(a,e,r)=>(r=a!=null?p(m(a)):{},t(e||!a||!a.__esModule?s(r,\"default\",{value:a,enumerable:!0}):r,a)),f=a=>t(s({},\"__esModule\",{value:!0}),a);var i=v((D,c)=>{c.exports=_jsx_runtime});var E={};k(E,{default:()=>h,frontmatter:()=>w});var n=g(i()),w=void 0;function d(a){let e={code:\"code\",em:\"em\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components},{EpicVideo:r}=e;return r||N(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Data fetching\"}),`\n`,(0,n.jsx)(r,{url:\"https://www.epicreact.dev/workshops/react-suspense/intro-to-data-fetching\"}),`\n`,(0,n.jsxs)(e.p,{children:[`Most applications require some level of data fetching from a server. The code\nrequired to perform this data fetching can be as simple as a `,(0,n.jsx)(e.code,{children:\"fetch\"}),\" request:\"]}),`\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:\"response\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fetch\"}),\"(\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"https://api.example.com/data\"}),\"'\",\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(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(--base0E)\"},children:\"await\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"response\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"json\"}),\"()\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:`That's simple enough, but no matter how fast your server is, you need to think\nabout what the user's looking at while they wait. You don't get to control the\nuser's network connection. For a similar reason you also need to think about\nwhat happens if the request fails. You can't control the user's connection\nrelability either.`}),`\n`,(0,n.jsxs)(e.p,{children:[`React has a nice way to manage both of these declaratively in components using\n`,(0,n.jsx)(e.code,{children:\"Suspense\"}),\" and \",(0,n.jsx)(e.code,{children:\"ErrorBoundary\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[`The biggest trick is how to trigger these two things to happen when rendering\nthe UI. This is where the `,(0,n.jsx)(e.code,{children:\"use\"}),\" hook comes in:\"]}),`\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(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"PhoneDetails\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"details\"}),\" \",(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:\"phoneDetailsPromise\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// now you have the details\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"What's important for you to understand here is that the \",(0,n.jsx)(e.code,{children:\"use\"}),` hook is passed a\npromise. It's not where you `,(0,n.jsx)(e.em,{children:\"create\"}),` a promise. You need to have triggered the\n`,(0,n.jsx)(e.code,{children:\"fetch\"}),\" request somewhere else and then pass it along to the \",(0,n.jsx)(e.code,{children:\"use\"}),` hook.\nOtherwise every time your component renders you'll trigger the `,(0,n.jsx)(e.code,{children:\"fetch\"}),` request\nagain. However, there are ways around this which we'll explore later on.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The real trick though is how the heck does \",(0,n.jsx)(e.code,{children:\"use\"}),` turn a promise into a resolved\nvalue without using `,(0,n.jsx)(e.code,{children:\"await\"}),`!? We need to make sure the code does not continue if\nthe `,(0,n.jsx)(e.code,{children:\"use\"}),\" hook can't return the resolved \",(0,n.jsx)(e.code,{children:\"details\"}),`. So how does it manage to do\nthis? The answer is actually simpler than you might think.`]}),`\n`,(0,n.jsxs)(e.p,{children:[`Let me ask you some JavaScript trivia... How do you synchronously stop a\nfunction from running to completion? You `,(0,n.jsx)(e.code,{children:\"throw\"}),` something! So that's exactly\nwhat the `,(0,n.jsx)(e.code,{children:\"use\"}),\" hook does. It adds a \",(0,n.jsx)(e.code,{children:\".then\"}),` onto the promise so it can store the\nresolved value, and then it throws the promise. When the promise resolves, React\nwill re-render your component and this time the `,(0,n.jsx)(e.code,{children:\"use\"}),` hook will have the\nresolved value to return!`]}),`\n`,(0,n.jsxs)(e.p,{children:[`This is kind of hilarious, but it works great. The implementation details of the\n`,(0,n.jsx)(e.code,{children:\"use\"}),` hook are a bit more complex and they definitely can change, but we'll\nimplement a simplified version of it in this exercise.`]}),`\n`,(0,n.jsxs)(e.p,{children:[`To complete the declarative circle, when the promise is thrown, React will\n\"suspend\" the component which means it will look up the tree of parent\ncomponents for a `,(0,n.jsx)(e.code,{children:\"Suspense\"}),\" component and render its boundary:\"]}),`\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(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"Suspense\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\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:\"App\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Suspense\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fallback\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">loading phone details\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"PhoneDetails\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\",`\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.jsx)(e.p,{children:`This works similar to Error Boundaries in that the suspense boundary can handle\nany thrown promises in its children or grandchildren. Also they can be nested so\nyou have a great amount of control over the loading state of your application.`}),`\n`,(0,n.jsxs)(e.p,{children:[\"If the promise rejects, then your \",(0,n.jsx)(e.code,{children:\"ErrorBoundary\"}),` will be triggered and you can\nrender an error message to the user:`]}),`\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(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"Suspense\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"ErrorBoundary\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react-error-boundary\"}),\"'\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"App\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ErrorBoundary\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fallback\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">Oh no, something bad happened\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Suspense\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fallback\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">loading phone details\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"PhoneDetails\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this exercise, we're going to build a simplified \",(0,n.jsx)(e.code,{children:\"use\"}),\" hook from scratch.\"]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function N(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return f(E);})();\n;return Component;","finishedCode","var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),w=(e,n)=>{for(var t in n)a(e,t,{get:n[t],enumerable:!0})},c=(e,n,t,i)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of m(n))!g.call(e,r)&&r!==t&&a(e,r,{get:()=>n[r],enumerable:!(i=l(n,r))||i.enumerable});return e};var _=(e,n,t)=>(t=e!=null?h(u(e)):{},c(n||!e||!e.__esModule?a(t,\"default\",{value:e,enumerable:!0}):t,e)),j=e=>c(a({},\"__esModule\",{value:!0}),e);var d=x((M,s)=>{s.exports=_jsx_runtime});var v={};w(v,{default:()=>f,frontmatter:()=>y});var o=_(d()),y=void 0;function p(e){let n={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:t}=n;return t||k(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{children:\"Data fetching\"}),`\n`,(0,o.jsx)(t,{url:\"https://www.epicreact.dev/workshops/react-suspense/dad-joke-break-data-fetching\"}),`\n`,(0,o.jsx)(n.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Hooray! Now we have a nice declarative loading/error state for loading data\nor really managing any async thing. Good work.`})]})}function f(e={}){let{wrapper:n}=e.components||{};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function k(e,n){throw new Error(\"Expected \"+(n?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(v);})();\n;return Component;","instructionsEpicVideoEmbeds",[492],"https://www.epicreact.dev/workshops/react-suspense/intro-to-data-fetching","finishedEpicVideoEmbeds",[495],"https://www.epicreact.dev/workshops/react-suspense/dad-joke-break-data-fetching",[497,530,554,578,602],{"_317":299,"_316":498,"_364":518},{"_20":21,"_166":341,"_484":499,"_22":23,"_24":25,"_486":500,"_501":502,"_504":505,"_512":513,"_515":516,"_290":299,"_317":299,"_9":316,"_517":27},"01.problem.throw","var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var i in e)s(t,i,{get:e[i],enumerable:!0})},a=(t,e,i,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of w(e))!g.call(t,r)&&r!==i&&s(t,r,{get:()=>e[r],enumerable:!(o=f(e,r))||o.enumerable});return t};var x=(t,e,i)=>(i=t!=null?u(m(t)):{},a(e||!t||!t.__esModule?s(i,\"default\",{value:t,enumerable:!0}):i,t)),y=t=>a(s({},\"__esModule\",{value:!0}),t);var c=b((T,h)=>{h.exports=_jsx_runtime});var j={};v(j,{default:()=>p,frontmatter:()=>_});var n=x(c()),_=void 0;function d(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:i,InlineFile:o}=e;return i||l(\"EpicVideo\",!0),o||l(\"InlineFile\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Throwing Promises\"}),`\n`,(0,n.jsx)(i,{url:\"https://www.epicreact.dev/workshops/react-suspense/throwing-promises\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Right now the app is \"working.\" This app displays information about space\nships from a fictional sci-fi universe. The app is using a `,(0,n.jsx)(e.code,{children:\"fetch\"}),` request to\nget the data in the `,(0,n.jsx)(o,{file:\"utils.tsx\"}),` file. That fetch request\ngets routed (by the workshop app) through `,(0,n.jsx)(o,{file:\"api.server.ts\"}),`\nwhich retrieves the data from `,(0,n.jsx)(e.code,{children:\"./shared/ship-api-utils.server.ts\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The problem is that while the \",(0,n.jsx)(e.code,{children:\"fetch\"}),` request is ongoing, the user is just\nstaring at a blank white screen. Now we could for sure improve the HTML document\nfile a bit to have a loading state in HTML until the ship data shows up, but we\nwant to be able to manage transitions like this as the user navigates around as\nwell. Componentize all the things!`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"So for this first step, you're going to need to remove the \",(0,n.jsx)(e.code,{children:\"await\"}),` on the\n`,(0,n.jsx)(e.code,{children:\"getShip\"}),\" call and then if the \",(0,n.jsx)(e.code,{children:\"ship\"}),` data hasn't loaded yet, you'll throw the\n`,(0,n.jsx)(e.code,{children:\"shipPromise\"}),\". You can also wrap the \",(0,n.jsx)(e.code,{children:\"\"}),\" in a \",(0,n.jsx)(e.code,{children:\"\"}),`\nboundary and render the `,(0,n.jsx)(e.code,{children:\"\"}),` component so we have a nicer loading\nstate.`]}),`\n`,(0,n.jsx)(e.p,{children:\"Give that a whirl!\"})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}function l(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(j);})();\n;return Component;","epicVideoEmbeds",[503],"https://www.epicreact.dev/workshops/react-suspense/throwing-promises","test",{"_9":506,"_507":508,"_509":510},"browser","pathname","/app/01.01.problem/test/","testFiles",[511],"suspense.test.ts","dev",{"_9":506,"_507":514},"/app/01.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/01.fetching/01.problem.throw?view=editor&title=Throwing+Promises+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":27,"_166":341,"_484":519,"_22":28,"_24":29,"_486":520,"_501":521,"_504":523,"_512":526,"_515":528,"_290":299,"_317":299,"_9":364,"_529":-5},"01.solution.throw","var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),_=(o,e)=>{for(var t in e)s(o,t,{get:e[t],enumerable:!0})},c=(o,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!w.call(o,r)&&r!==t&&s(o,r,{get:()=>e[r],enumerable:!(i=l(e,r))||i.enumerable});return o};var g=(o,e,t)=>(t=o!=null?u(f(o)):{},c(e||!o||!o.__esModule?s(t,\"default\",{value:o,enumerable:!0}):t,o)),j=o=>c(s({},\"__esModule\",{value:!0}),o);var d=x((k,p)=>{p.exports=_jsx_runtime});var E={};_(E,{default:()=>h,frontmatter:()=>y});var n=g(d()),y=void 0;function a(o){let e={code:\"code\",h1:\"h1\",p:\"p\",...o.components},{EpicVideo:t}=e;return t||b(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Throwing Promises\"}),`\n`,(0,n.jsx)(t,{url:\"https://www.epicreact.dev/workshops/react-suspense/throwing-promises/solution\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Great job! You've successfully thrown the promise, thereby suspending the\n`,(0,n.jsx)(e.code,{children:\"ShipDetails\"}),` component so React can render the suspense fallback while we wait\nfor the ship to load. We're on our way!`]})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(a,{...o})}):a(o)}function b(o,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+o+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(E);})();\n;return Component;",[522],"https://www.epicreact.dev/workshops/react-suspense/throwing-promises/solution",{"_9":506,"_507":524,"_509":525},"/app/01.01.solution/test/",[511],{"_9":506,"_507":527},"/app/01.01.solution/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/01.fetching/01.solution.throw?view=editor&title=Throwing+Promises+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_317":343,"_316":531,"_364":543},{"_20":31,"_166":344,"_484":532,"_22":32,"_24":33,"_486":533,"_501":534,"_504":536,"_512":540,"_515":542,"_290":299,"_317":343,"_9":316,"_517":35},"02.problem.errors","var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var r in e)c(n,r,{get:e[r],enumerable:!0})},i=(n,e,r,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of f(e))!x.call(n,t)&&t!==r&&c(n,t,{get:()=>e[t],enumerable:!(a=u(e,t))||a.enumerable});return n};var y=(n,e,r)=>(r=n!=null?p(m(n)):{},i(e||!n||!n.__esModule?c(r,\"default\",{value:n,enumerable:!0}):r,n)),_=n=>i(c({},\"__esModule\",{value:!0}),n);var s=g((M,d)=>{d.exports=_jsx_runtime});var j={};w(j,{default:()=>l,frontmatter:()=>E});var o=y(s()),E=void 0;function h(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:r}=e;return r||b(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Error Handling\"}),`\n`,(0,o.jsx)(r,{url:\"https://www.epicreact.dev/workshops/react-suspense/error-handling\"}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} If the user has a bad network connection or something we want to handle that\nerror case gracefully. Please wrap the `,(0,o.jsx)(e.code,{children:\"ShipDetails\"}),\" in an \",(0,o.jsx)(e.code,{children:\"ErrorBoundary\"}),` from\n`,(0,o.jsx)(e.code,{children:\"react-error-boundary\"}),\".\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"You can test this out by changing the \",(0,o.jsx)(e.code,{children:\"shipName\"}),` to a ship that doesn't exist.\nWe also have a good fallback for you to use that \\u{1F9DD}\\u200D\\u2642\\uFE0F Kellie made called\n`,(0,o.jsx)(e.code,{children:\"ShipError\"}),\". Good luck!\"]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(h,{...n})}):h(n)}function b(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(j);})();\n;return Component;",[535],"https://www.epicreact.dev/workshops/react-suspense/error-handling",{"_9":506,"_507":537,"_509":538},"/app/01.02.problem/test/",[539],"error.test.ts",{"_9":506,"_507":541},"/app/01.02.problem/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/01.fetching/02.problem.errors?view=editor&title=Error+Handling+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":35,"_166":344,"_484":544,"_22":36,"_24":37,"_486":545,"_501":546,"_504":548,"_512":551,"_515":553,"_290":299,"_317":343,"_9":364,"_529":-5},"02.solution.errors","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{for(var t in n)i(e,t,{get:n[t],enumerable:!0})},a=(e,n,t,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of f(n))!w.call(e,o)&&o!==t&&i(e,o,{get:()=>n[o],enumerable:!(s=h(n,o))||s.enumerable});return e};var _=(e,n,t)=>(t=e!=null?u(m(e)):{},a(n||!e||!e.__esModule?i(t,\"default\",{value:e,enumerable:!0}):t,e)),j=e=>a(i({},\"__esModule\",{value:!0}),e);var d=x((k,c)=>{c.exports=_jsx_runtime});var v={};g(v,{default:()=>p,frontmatter:()=>y});var r=_(d()),y=void 0;function l(e){let n={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:t}=n;return t||E(\"EpicVideo\",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{children:\"Error Handling\"}),`\n`,(0,r.jsx)(t,{url:\"https://www.epicreact.dev/workshops/react-suspense/error-handling/solution\"}),`\n`,(0,r.jsx)(n.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work! Now we have a nice way to declaratively and gracefully handle\nerrors when our data loading has issues.`})]})}function p(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}function E(e,n){throw new Error(\"Expected \"+(n?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(v);})();\n;return Component;",[547],"https://www.epicreact.dev/workshops/react-suspense/error-handling/solution",{"_9":506,"_507":549,"_509":550},"/app/01.02.solution/test/",[539],{"_9":506,"_507":552},"/app/01.02.solution/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/01.fetching/02.solution.errors?view=editor&title=Error+Handling+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_317":346,"_316":555,"_364":567},{"_20":39,"_166":347,"_484":556,"_22":40,"_24":41,"_486":557,"_501":558,"_504":560,"_512":564,"_515":566,"_290":299,"_317":346,"_9":316,"_517":43},"03.problem.status","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!b.call(t,i)&&i!==o&&r(t,i,{get:()=>e[i],enumerable:!(s=u(e,i))||s.enumerable});return t};var x=(t,e,o)=>(o=t!=null?p(f(t)):{},a(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),_=t=>a(r({},\"__esModule\",{value:!0}),t);var d=w((M,l)=>{l.exports=_jsx_runtime});var y={};g(y,{default:()=>h,frontmatter:()=>j});var n=x(d()),j=void 0;function c(t){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",ul:\"ul\",...t.components},{EpicVideo:o}=e;return o||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Formal Status\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-suspense/formal-status\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Let's clean up things a little bit with what we've built so far by making the\nstatus of our promise a little more formal.`}),`\n`,(0,n.jsx)(e.p,{children:\"What we have now is:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:\"if there's an error, throw it\"}),`\n`,(0,n.jsx)(e.li,{children:\"if there's no ship, throw the promise\"}),`\n`,(0,n.jsx)(e.li,{children:\"render the ship\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"But that's not exactly clear.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"So instead, let's add a \",(0,n.jsx)(e.code,{children:\"status\"}),` variable that can be\n`,(0,n.jsx)(e.code,{children:\"'pending' | 'fulfilled' | 'rejected'\"}),\" (start it out with \",(0,n.jsx)(e.code,{children:\"'pending'\"}),\").\"]}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F4DC} To learn more about why this is important, read\n`,(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/make-impossible-states-impossible\",children:\"Make Impossible States Impossible\"}),`\nand\n`,(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/stop-using-isloading-booleans\",children:\"Stop using isLoading booleans\"})]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(c,{...t})}):c(t)}function k(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(y);})();\n;return Component;",[559],"https://www.epicreact.dev/workshops/react-suspense/formal-status",{"_9":506,"_507":561,"_509":562},"/app/01.03.problem/test/",[563],"status.test.ts",{"_9":506,"_507":565},"/app/01.03.problem/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/01.fetching/03.problem.status?view=editor&title=Formal+Status+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":43,"_166":347,"_484":568,"_22":44,"_24":45,"_486":569,"_501":570,"_504":572,"_512":575,"_515":577,"_290":299,"_317":346,"_9":364,"_529":-5},"03.solution.status","var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=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})},a=(e,t,n,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of m(t))!x.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(i=f(t,r))||i.enumerable});return e};var j=(e,t,n)=>(n=e!=null?h(l(e)):{},a(t||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),b=e=>a(s({},\"__esModule\",{value:!0}),e);var p=w((F,c)=>{c.exports=_jsx_runtime});var M={};_(M,{default:()=>u,frontmatter:()=>g});var o=j(p()),g=void 0;function d(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||E(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Formal Status\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-suspense/formal-status/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great. That feels much better defined than what we had before. That prepares\nus well for the next step.`})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}function E(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(M);})();\n;return Component;",[571],"https://www.epicreact.dev/workshops/react-suspense/formal-status/solution",{"_9":506,"_507":573,"_509":574},"/app/01.03.solution/test/",[563],{"_9":506,"_507":576},"/app/01.03.solution/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/01.fetching/03.solution.status?view=editor&title=Formal+Status+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_317":349,"_316":579,"_364":591},{"_20":47,"_166":350,"_484":580,"_22":48,"_24":49,"_486":581,"_501":582,"_504":584,"_512":588,"_515":590,"_290":299,"_317":349,"_9":316,"_517":51},"04.problem.util","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var l in e)s(n,l,{get:e[l],enumerable:!0})},c=(n,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!m.call(n,r)&&r!==l&&s(n,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return n};var k=(n,e,l)=>(l=n!=null?p(y(n)):{},c(e||!n||!n.__esModule?s(l,\"default\",{value:n,enumerable:!0}):l,n)),w=n=>c(s({},\"__esModule\",{value:!0}),n);var i=v((V,t)=>{t.exports=_jsx_runtime});var x={};f(x,{default:()=>h,frontmatter:()=>E});var a=k(i()),E=void 0;function d(n){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...n.components},{EpicVideo:l}=e;return l||A(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Utility\"}),`\n`,(0,a.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-suspense/utility\"}),`\n`,(0,a.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} With what you've built so far, we want you to make a reusable utility for\nthis use case. We want you to call it `,(0,a.jsx)(e.code,{children:\"use\"}),` and it should take a promise and\nreturn the `,(0,a.jsx)(e.code,{children:\"Value\"}),\" from the promise.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[`The only way we can do this is by tracking some values which we'll monkey-patch\nonto the `,(0,a.jsx)(e.code,{children:\"promise\"}),` itself. So Kellie's added a special type for you to use to\nmake TypeScript happier with the hackery we plan to perform for this simplified\nversion of `,(0,a.jsx)(e.code,{children:\"use\"}),\".\"]}),`\n`,(0,a.jsx)(e.p,{children:\"\\u{1F9DD}\\u200D\\u2642\\uFE0F Here's a good start for you:\"}),`\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:\"type\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"UsePromise\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Value\"}),\"> \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Promise\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Value\"}),\"> \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"&\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"status\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"pending\"}),\"'\",\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"fulfilled\"}),\"'\",\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"rejected\"}),\"'\",`\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:\"value\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Value\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"reason\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"unknown\"}),`\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(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"use\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Value\"}),\">(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"promise\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Promise\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Value\"}),\">)\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Value\"}),\" {\",`\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:\"usePromise\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"promise\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"as\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"UsePromise\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Value\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// throw stuff, .then stuff, and return Value!\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[`That should get you a good start. When you're done, you should be able to remove\na bunch of our code and replace it with a `,(0,a.jsx)(e.code,{children:\"use\"}),\" call. Good luck!\"]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function A(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(x);})();\n;return Component;",[583],"https://www.epicreact.dev/workshops/react-suspense/utility",{"_9":506,"_507":585,"_509":586},"/app/01.04.problem/test/",[587],"util.test.ts",{"_9":506,"_507":589},"/app/01.04.problem/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/01.fetching/04.problem.util?view=editor&title=Utility+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":51,"_166":350,"_484":592,"_22":52,"_24":53,"_486":593,"_501":594,"_504":596,"_512":599,"_515":601,"_290":299,"_317":349,"_9":364,"_529":-5},"04.solution.util","var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var _=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),g=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of m(t))!f.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=l(t,r))||s.enumerable});return e};var j=(e,t,n)=>(n=e!=null?h(x(e)):{},c(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),w=e=>c(i({},\"__esModule\",{value:!0}),e);var u=_((k,a)=>{a.exports=_jsx_runtime});var E={};g(E,{default:()=>p,frontmatter:()=>y});var o=j(u()),y=void 0;function d(e){let t={h1:\"h1\",p:\"p\",strong:\"strong\",...e.components},{EpicVideo:n}=t;return n||b(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Utility\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-suspense/utility/solution\"}),`\n`,(0,o.jsxs)(t.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Great job on that. Isn't it nice that React actually has this built-in? Let's\n`,(0,o.jsx)(t.strong,{children:\"use\"}),\" that next \\u{1F609}\"]})]})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(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 w(E);})();\n;return Component;",[595],"https://www.epicreact.dev/workshops/react-suspense/utility/solution",{"_9":506,"_507":597,"_509":598},"/app/01.04.solution/test/",[587],{"_9":506,"_507":600},"/app/01.04.solution/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/01.fetching/04.solution.util?view=editor&title=Utility+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_317":328,"_316":603,"_364":615},{"_20":55,"_166":352,"_484":604,"_22":56,"_24":57,"_486":605,"_501":606,"_504":608,"_512":612,"_515":614,"_290":299,"_317":328,"_9":316,"_517":59},"05.problem.use","var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},s=(t,e,r,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!x.call(t,o)&&o!==r&&c(t,o,{get:()=>e[o],enumerable:!(i=l(e,o))||i.enumerable});return t};var j=(t,e,r)=>(r=t!=null?h(m(t)):{},s(e||!t||!t.__esModule?c(r,\"default\",{value:t,enumerable:!0}):r,t)),g=t=>s(c({},\"__esModule\",{value:!0}),t);var a=w((b,d)=>{d.exports=_jsx_runtime});var M={};_(M,{default:()=>p,frontmatter:()=>y});var n=j(a()),y=void 0;function u(t){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:r}=e;return r||E(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"use React\"}),`\n`,(0,n.jsx)(r,{url:\"https://www.epicreact.dev/workshops/react-suspense/use-react\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Ok, let's use React's built-in \",(0,n.jsx)(e.code,{children:\"use\"}),` function instead of our utility. Delete\nall the code in there and replace it with\n`,(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/use\",children:(0,n.jsx)(e.code,{children:\"use\"})}),\" from React.\"]})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}function E(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(M);})();\n;return Component;",[607],"https://www.epicreact.dev/workshops/react-suspense/use-react",{"_9":506,"_507":609,"_509":610},"/app/01.05.problem/test/",[611],"use.test.ts",{"_9":506,"_507":613},"/app/01.05.problem/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/01.fetching/05.problem.use?view=editor&title=use+React+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":59,"_166":352,"_484":616,"_22":60,"_24":61,"_486":617,"_501":618,"_504":620,"_512":623,"_515":625,"_290":299,"_317":328,"_9":364,"_529":-5},"05.solution.use","var Component=(()=>{var f=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,h=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})},i=(e,t,n,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of m(t))!h.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(c=l(t,r))||c.enumerable});return e};var j=(e,t,n)=>(n=e!=null?f(x(e)):{},i(t||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),g=e=>i(s({},\"__esModule\",{value:!0}),e);var d=w((k,a)=>{a.exports=_jsx_runtime});var M={};_(M,{default:()=>u,frontmatter:()=>y});var o=j(d()),y=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||E(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"use React\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-suspense/use-react/solution\"}),`\n`,(0,o.jsx)(t.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great job! It always feels nice to delete code.\"})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function E(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(M);})();\n;return Component;",[619],"https://www.epicreact.dev/workshops/react-suspense/use-react/solution",{"_9":506,"_507":621,"_509":622},"/app/01.05.solution/test/",[611],{"_9":506,"_507":624},"/app/01.05.solution/","https://stackblitz.com/github/epicweb-dev/react-suspense/tree/main/exercises/01.fetching/05.solution.use?view=editor&title=use+React+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[627,632,637,642,647],{"_20":21,"_166":341,"_484":499,"_22":23,"_24":25,"_486":500,"_501":628,"_504":629,"_512":631,"_515":516,"_290":299,"_317":299,"_9":316,"_517":27},[503],{"_9":506,"_507":508,"_509":630},[511],{"_9":506,"_507":514},{"_20":31,"_166":344,"_484":532,"_22":32,"_24":33,"_486":533,"_501":633,"_504":634,"_512":636,"_515":542,"_290":299,"_317":343,"_9":316,"_517":35},[535],{"_9":506,"_507":537,"_509":635},[539],{"_9":506,"_507":541},{"_20":39,"_166":347,"_484":556,"_22":40,"_24":41,"_486":557,"_501":638,"_504":639,"_512":641,"_515":566,"_290":299,"_317":346,"_9":316,"_517":43},[559],{"_9":506,"_507":561,"_509":640},[563],{"_9":506,"_507":565},{"_20":47,"_166":350,"_484":580,"_22":48,"_24":49,"_486":581,"_501":643,"_504":644,"_512":646,"_515":590,"_290":299,"_317":349,"_9":316,"_517":51},[583],{"_9":506,"_507":585,"_509":645},[587],{"_9":506,"_507":589},{"_20":55,"_166":352,"_484":604,"_22":56,"_24":57,"_486":605,"_501":648,"_504":649,"_512":651,"_515":614,"_290":299,"_317":328,"_9":316,"_517":59},[607],{"_9":506,"_507":609,"_509":650},[611],{"_9":506,"_507":613},[653,658,663,668,673],{"_20":27,"_166":341,"_484":519,"_22":28,"_24":29,"_486":520,"_501":654,"_504":655,"_512":657,"_515":528,"_290":299,"_317":299,"_9":364,"_529":-5},[522],{"_9":506,"_507":524,"_509":656},[511],{"_9":506,"_507":527},{"_20":35,"_166":344,"_484":544,"_22":36,"_24":37,"_486":545,"_501":659,"_504":660,"_512":662,"_515":553,"_290":299,"_317":343,"_9":364,"_529":-5},[547],{"_9":506,"_507":549,"_509":661},[539],{"_9":506,"_507":552},{"_20":43,"_166":347,"_484":568,"_22":44,"_24":45,"_486":569,"_501":664,"_504":665,"_512":667,"_515":577,"_290":299,"_317":346,"_9":364,"_529":-5},[571],{"_9":506,"_507":573,"_509":666},[563],{"_9":506,"_507":576},{"_20":51,"_166":350,"_484":592,"_22":52,"_24":53,"_486":593,"_501":669,"_504":670,"_512":672,"_515":601,"_290":299,"_317":349,"_9":364,"_529":-5},[595],{"_9":506,"_507":597,"_509":671},[587],{"_9":506,"_507":600},{"_20":59,"_166":352,"_484":616,"_22":60,"_24":61,"_486":617,"_501":674,"_504":675,"_512":677,"_515":625,"_290":299,"_317":328,"_9":364,"_529":-5},[619],{"_9":506,"_507":621,"_509":676},[611],{"_9":506,"_507":624},"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=Data%20fetching","epicVideoInfosPromise",["P",681],"exerciseFinished",{"_684":685,"_24":686},"file","/myapp/workshop-content/exercises/01.fetching/FINISHED.mdx","exercises/01.fetching/FINISHED.mdx","prevStepLink",{"_689":690,"_691":692},"to","/exercise/01/05/solution","aria-label","use React (solution)","nextStepLink",{"_689":695,"_691":379},"/exercise/02","actionData","errors"]

01. Data fetching/Elaboration