[{"_1":2,"_696":-5,"_697":-5},"loaderData",{"_3":4,"_404":405,"_567":568},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_178":179,"_181":182,"_183":16,"_184":185,"_242":187,"_243":189,"_190":191,"_244":245,"_266":267,"_291":-5,"_292":-5,"_293":294},"userId",{"_7":8,"_9":10},"id","3a03a724-7c61-4812-b19e-fadb42807efa","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,158,162,166,170,174],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.elements/01.problem.reuse","relativePath","exercises/01.elements/01.problem.reuse",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.elements/01.solution.reuse","exercises/01.elements/01.solution.reuse",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.elements/02.problem.props","exercises/01.elements/02.problem.props",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.elements/02.solution.props","exercises/01.elements/02.solution.props",{"_20":39,"_22":40,"_24":41},"01.03.problem","/myapp/workshop-content/exercises/01.elements/03.problem.context","exercises/01.elements/03.problem.context",{"_20":43,"_22":44,"_24":45},"01.03.solution","/myapp/workshop-content/exercises/01.elements/03.solution.context","exercises/01.elements/03.solution.context",{"_20":47,"_22":48,"_24":49},"01.04.problem","/myapp/workshop-content/exercises/01.elements/04.problem.use-memo","exercises/01.elements/04.problem.use-memo",{"_20":51,"_22":52,"_24":53},"01.04.solution","/myapp/workshop-content/exercises/01.elements/04.solution.use-memo","exercises/01.elements/04.solution.use-memo",{"_20":55,"_22":56,"_24":57},"01.05.problem","/myapp/workshop-content/exercises/01.elements/05.problem.memo","exercises/01.elements/05.problem.memo",{"_20":59,"_22":60,"_24":61},"01.05.solution","/myapp/workshop-content/exercises/01.elements/05.solution.memo","exercises/01.elements/05.solution.memo",{"_20":63,"_22":64,"_24":65},"02.01.problem","/myapp/workshop-content/exercises/02.context/01.problem.memo-context","exercises/02.context/01.problem.memo-context",{"_20":67,"_22":68,"_24":69},"02.01.solution","/myapp/workshop-content/exercises/02.context/01.solution.memo-context","exercises/02.context/01.solution.memo-context",{"_20":71,"_22":72,"_24":73},"02.02.problem","/myapp/workshop-content/exercises/02.context/02.problem.provider-component","exercises/02.context/02.problem.provider-component",{"_20":75,"_22":76,"_24":77},"02.02.solution","/myapp/workshop-content/exercises/02.context/02.solution.provider-component","exercises/02.context/02.solution.provider-component",{"_20":79,"_22":80,"_24":81},"02.03.problem","/myapp/workshop-content/exercises/02.context/03.problem.split-context","exercises/02.context/03.problem.split-context",{"_20":83,"_22":84,"_24":85},"02.03.solution","/myapp/workshop-content/exercises/02.context/03.solution.split-context","exercises/02.context/03.solution.split-context",{"_20":87,"_22":88,"_24":89},"03.01.problem","/myapp/workshop-content/exercises/03.concurrent-rendering/01.problem.deferred","exercises/03.concurrent-rendering/01.problem.deferred",{"_20":91,"_22":92,"_24":93},"03.01.solution","/myapp/workshop-content/exercises/03.concurrent-rendering/01.solution.deferred","exercises/03.concurrent-rendering/01.solution.deferred",{"_20":95,"_22":96,"_24":97},"04.01.problem","/myapp/workshop-content/exercises/04.code-splitting/01.problem.lazy","exercises/04.code-splitting/01.problem.lazy",{"_20":99,"_22":100,"_24":101},"04.01.solution","/myapp/workshop-content/exercises/04.code-splitting/01.solution.lazy","exercises/04.code-splitting/01.solution.lazy",{"_20":103,"_22":104,"_24":105},"04.02.problem","/myapp/workshop-content/exercises/04.code-splitting/02.problem.eager","exercises/04.code-splitting/02.problem.eager",{"_20":107,"_22":108,"_24":109},"04.02.solution","/myapp/workshop-content/exercises/04.code-splitting/02.solution.eager","exercises/04.code-splitting/02.solution.eager",{"_20":111,"_22":112,"_24":113},"04.03.problem","/myapp/workshop-content/exercises/04.code-splitting/03.problem.transition","exercises/04.code-splitting/03.problem.transition",{"_20":115,"_22":116,"_24":117},"04.03.solution","/myapp/workshop-content/exercises/04.code-splitting/03.solution.transition","exercises/04.code-splitting/03.solution.transition",{"_20":119,"_22":120,"_24":121},"05.01.problem","/myapp/workshop-content/exercises/05.calculations/01.problem.use-memo","exercises/05.calculations/01.problem.use-memo",{"_20":123,"_22":124,"_24":125},"05.01.solution","/myapp/workshop-content/exercises/05.calculations/01.solution.use-memo","exercises/05.calculations/01.solution.use-memo",{"_20":127,"_22":128,"_24":129},"05.02.problem","/myapp/workshop-content/exercises/05.calculations/02.problem.worker","exercises/05.calculations/02.problem.worker",{"_20":131,"_22":132,"_24":133},"05.02.solution","/myapp/workshop-content/exercises/05.calculations/02.solution.worker","exercises/05.calculations/02.solution.worker",{"_20":135,"_22":136,"_24":137},"05.03.problem","/myapp/workshop-content/exercises/05.calculations/03.problem.async","exercises/05.calculations/03.problem.async",{"_20":139,"_22":140,"_24":141},"05.03.solution","/myapp/workshop-content/exercises/05.calculations/03.solution.async","exercises/05.calculations/03.solution.async",{"_20":143,"_22":144,"_24":145},"06.01.problem","/myapp/workshop-content/exercises/06.rerenders/01.problem.memo","exercises/06.rerenders/01.problem.memo",{"_20":147,"_22":148,"_24":149},"06.01.solution","/myapp/workshop-content/exercises/06.rerenders/01.solution.memo","exercises/06.rerenders/01.solution.memo",{"_20":151,"_22":152,"_24":153},"06.02.problem","/myapp/workshop-content/exercises/06.rerenders/02.problem.comparator","exercises/06.rerenders/02.problem.comparator",{"_20":155,"_22":156,"_24":157},"06.02.solution","/myapp/workshop-content/exercises/06.rerenders/02.solution.comparator","exercises/06.rerenders/02.solution.comparator",{"_20":159,"_22":160,"_24":161},"06.03.problem","/myapp/workshop-content/exercises/06.rerenders/03.problem.primitives","exercises/06.rerenders/03.problem.primitives",{"_20":163,"_22":164,"_24":165},"06.03.solution","/myapp/workshop-content/exercises/06.rerenders/03.solution.primitives","exercises/06.rerenders/03.solution.primitives",{"_20":167,"_22":168,"_24":169},"07.01.problem","/myapp/workshop-content/exercises/07.windowing/01.problem.virtualizer","exercises/07.windowing/01.problem.virtualizer",{"_20":171,"_22":172,"_24":173},"07.01.solution","/myapp/workshop-content/exercises/07.windowing/01.solution.virtualizer","exercises/07.windowing/01.solution.virtualizer",{"_20":175,"_22":176,"_24":177},"example.unnecessary-rerenders","/myapp/workshop-content/examples/unnecessary-rerenders","examples/unnecessary-rerenders","repoUpdates",{"_180":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_186":187,"_188":189,"_190":191,"_197":198,"_215":216,"_218":219,"_220":221,"_222":223,"_226":227,"_232":233,"_236":237,"_238":239,"_240":241},"title","React Performance ⚡","subtitle","React is fast, until it isn't. Let's make your React app fast.","instructor",{"_20":192,"_193":194,"_195":196},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-performance","discordChannelId","1285244676286189569","discordTags",[213,214],"1285246046498328627","1285245910070071437","onboardingVideo",[217],"https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/react-performance","githubRoot","https://github.com/epicweb-dev/react-performance/tree/main","stackBlitzConfig",{"_224":225},"view","editor","forms",{"_228":229,"_230":231},"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",{"_234":235},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_246":247,"_248":249,"_250":251,"_252":219,"_253":221,"_254":235,"_255":256,"_257":258,"_259":260,"_261":235,"_262":263,"_264":265},"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.43.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","ca703e22ed0e09294766869d264a7d1d33917885afe13b9f3eb384b4a89a7476","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_268":269,"_270":271,"_272":273,"_274":275,"_276":275,"_277":278,"_285":286,"_287":288,"_289":237,"_290":235},"protocol","http:","hostname","performance.epicreact.dev","port","","origin","http://performance.epicreact.dev","domain","hints",{"_279":280,"_281":282,"_283":284},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/04/finished","session",{"_279":-5},"separator","online","toast","confettiId","presence",{"_295":296},"users",[297,311,320,331,339,347,355,363,370,377,380,383,386,390,395,400],{"_7":298,"_299":235,"_300":301,"_302":303,"_20":304,"_305":306},"5dcceac3-781b-419b-86d0-1189f5acd260","hasAccess","imageUrlSmall","https://avatars.githubusercontent.com/u/16737095?v=4&size=64","imageUrlLarge","https://avatars.githubusercontent.com/u/16737095?v=4&size=512","David Barbosa Maia","location",{"_242":187,"_274":307,"_230":308},"http://localhost:5639",{"_309":310},"exerciseNumber",4,{"_7":312,"_299":235,"_300":313,"_302":314,"_20":315,"_305":316},"160375fa-432c-4683-b7af-3ba9ea6117ab","https://avatars.githubusercontent.com/u/30752178?v=4&size=64","https://avatars.githubusercontent.com/u/30752178?v=4&size=512","Dmitriy",{"_242":317,"_274":307,"_230":318},"Advanced React APIs 🔥",{"_309":319},1,{"_7":321,"_299":235,"_300":322,"_302":323,"_20":324,"_305":325},"aaecfbe2-af21-4053-99be-1300f74a1e37","https://www.gravatar.com/avatar/7edbb85c5d8ccfae2b796c692c31c84e?size=64&default=identicon","https://www.gravatar.com/avatar/7edbb85c5d8ccfae2b796c692c31c84e?size=512&default=identicon","Felipe ",{"_242":326,"_274":307,"_230":327},"Advanced MCP Features 🐡",{"_9":328,"_309":310,"_329":330},"problem","stepNumber",2,{"_7":332,"_299":235,"_300":333,"_302":334,"_20":335,"_305":336},"aee9ae30-9589-485b-9f2c-3c632a67807c","https://www.gravatar.com/avatar/8217e0dbab875168e858d0cfa0f9b44f?size=64&default=identicon","https://www.gravatar.com/avatar/8217e0dbab875168e858d0cfa0f9b44f?size=512&default=identicon","Coinmerce B.V.",{"_242":317,"_274":307,"_230":337},{"_9":328,"_309":338,"_329":319},7,{"_7":340,"_299":235,"_300":341,"_302":342,"_20":343,"_305":344},"acc3b60e-7382-41d5-8b39-74c3563d139f","https://www.gravatar.com/avatar/2cd7cef990d28f9d3243311abc4aa4c7?size=64&default=identicon","https://www.gravatar.com/avatar/2cd7cef990d28f9d3243311abc4aa4c7?size=512&default=identicon","Clarice Ponzo Brasil",{"_242":345,"_274":307,"_230":346},"React Fundamentals ⚛",{"_9":328,"_309":310,"_329":330},{"_7":348,"_299":235,"_300":349,"_302":350,"_20":351,"_305":352},"3b78cd18-0a95-4ede-ab9f-544b8bc2eeab","https://avatars.githubusercontent.com/u/1063328?v=4&size=64","https://avatars.githubusercontent.com/u/1063328?v=4&size=512","Adiel oz",{"_242":345,"_274":307,"_230":353},{"_9":328,"_309":354,"_329":319},3,{"_7":356,"_299":235,"_300":357,"_302":358,"_20":359,"_305":360},"7cb3e849-8650-47f5-8eaa-4337d117b0dd","https://www.gravatar.com/avatar/236ccda05bb27a91aab2284f0e2d845e?size=64&default=identicon","https://www.gravatar.com/avatar/236ccda05bb27a91aab2284f0e2d845e?size=512&default=identicon","Igor Ribeiro Solly",{"_242":345,"_274":307,"_230":361},{"_309":362},5,{"_7":364,"_299":235,"_300":365,"_302":366,"_20":367,"_305":368},"50ec27b2-4a1f-4f24-bc81-b8b210f1b900","https://cdn.discordapp.com/avatars/489357654142222336/9f3e4b9c1fc24941df6f291c76e4befc.png?size=64","https://cdn.discordapp.com/avatars/489357654142222336/9f3e4b9c1fc24941df6f291c76e4befc.png?size=512","Vishal",{"_242":369,"_274":307},"MCP Fundamentals 🧱",{"_7":371,"_299":235,"_300":372,"_302":373,"_20":-5,"_305":374},"9d0f5bbf-d4f4-4ffc-bd11-08c17dfa5dc0","https://www.gravatar.com/avatar/ffa4bab98492ebbeb8426522b2b377b6?size=64&default=identicon","https://www.gravatar.com/avatar/ffa4bab98492ebbeb8426522b2b377b6?size=512&default=identicon",{"_242":375,"_274":307,"_230":376},"React Hooks 🎣",{"_9":328,"_309":330,"_329":319},{"_7":378,"_305":379},"486b9698-adcd-4bfd-aa81-e74d207cc7c6",{"_242":369,"_274":307},{"_7":381,"_305":382},"iv3rxfd9oeqoo2mfxzubbwow",{"_242":369,"_274":307},{"_7":384,"_305":385},"4fa49e45-dcba-4bf2-8626-944fae8c2b13",{"_242":345,"_274":307},{"_7":387,"_305":388},"2040321f-09f0-4ac2-9fb8-b3d26568693b",{"_242":369,"_274":307,"_230":389},{"_309":319},{"_7":391,"_305":392},"pdfe63ozb1ux914g0v1yq8ur",{"_242":393,"_274":394},"Advanced Vitest Patterns","http://advanced-vitest-patterns.epicweb.dev",{"_7":396,"_305":397},"2ac5295f-4408-49e9-9291-c2b9087f7fa5",{"_242":375,"_274":398,"_230":399},"http://hooks.epicreact.dev",{"_309":330},{"_7":401,"_305":402},"0a6f9c06-0919-4690-8ddc-187ba1de9b9a",{"_242":187,"_274":275,"_230":403},{"_309":310,"_329":-5,"_9":-5},"routes/_app+/_layout",{"_242":187,"_406":407,"_563":564,"_566":16},"exercises",[408,447,470,481,504,527,552],{"_309":319,"_186":409,"_410":411,"_422":423,"_429":430},"Element Optimization","solutions",[412,414,416,418,420],{"_329":319,"_186":413,"_20":27},"Reusing Elements",{"_329":330,"_186":415,"_20":35},"Element Props",{"_329":354,"_186":417,"_20":43},"Context",{"_329":310,"_186":419,"_20":51},"Memoize Elements",{"_329":362,"_186":421,"_20":59},"Memoize Components","problems",[424,425,426,427,428],{"_329":319,"_186":413,"_20":21},{"_329":330,"_186":415,"_20":31},{"_329":354,"_186":417,"_20":39},{"_329":310,"_186":419,"_20":47},{"_329":362,"_186":421,"_20":55},"steps",[431,435,438,441,444],{"_329":319,"_186":413,"_20":21,"_328":432,"_433":434},{"_20":21,"_186":413},"solution",{"_20":27,"_186":413},{"_329":330,"_186":415,"_20":31,"_328":436,"_433":437},{"_20":31,"_186":415},{"_20":35,"_186":415},{"_329":354,"_186":417,"_20":39,"_328":439,"_433":440},{"_20":39,"_186":417},{"_20":43,"_186":417},{"_329":310,"_186":419,"_20":47,"_328":442,"_433":443},{"_20":47,"_186":419},{"_20":51,"_186":419},{"_329":362,"_186":421,"_20":55,"_328":445,"_433":446},{"_20":55,"_186":421},{"_20":59,"_186":421},{"_309":330,"_186":448,"_410":449,"_422":456,"_429":460},"Optimize Context",[450,452,454],{"_329":319,"_186":451,"_20":67},"Memoize Context",{"_329":330,"_186":453,"_20":75},"Provider Component",{"_329":354,"_186":455,"_20":83},"Split Context",[457,458,459],{"_329":319,"_186":451,"_20":63},{"_329":330,"_186":453,"_20":71},{"_329":354,"_186":455,"_20":79},[461,464,467],{"_329":319,"_186":451,"_20":63,"_328":462,"_433":463},{"_20":63,"_186":451},{"_20":67,"_186":451},{"_329":330,"_186":453,"_20":71,"_328":465,"_433":466},{"_20":71,"_186":453},{"_20":75,"_186":453},{"_329":354,"_186":455,"_20":79,"_328":468,"_433":469},{"_20":79,"_186":455},{"_20":83,"_186":455},{"_309":354,"_186":471,"_410":472,"_422":475,"_429":477},"Concurrent Rendering",[473],{"_329":319,"_186":474,"_20":91},"useDeferredValue + memo",[476],{"_329":319,"_186":474,"_20":87},[478],{"_329":319,"_186":474,"_20":87,"_328":479,"_433":480},{"_20":87,"_186":474},{"_20":91,"_186":474},{"_309":310,"_186":482,"_410":483,"_422":490,"_429":494},"Code Splitting",[484,486,488],{"_329":319,"_186":485,"_20":99},"lazy",{"_329":330,"_186":487,"_20":107},"Eager Loading",{"_329":354,"_186":489,"_20":115},"Transitions",[491,492,493],{"_329":319,"_186":485,"_20":95},{"_329":330,"_186":487,"_20":103},{"_329":354,"_186":489,"_20":111},[495,498,501],{"_329":319,"_186":485,"_20":95,"_328":496,"_433":497},{"_20":95,"_186":485},{"_20":99,"_186":485},{"_329":330,"_186":487,"_20":103,"_328":499,"_433":500},{"_20":103,"_186":487},{"_20":107,"_186":487},{"_329":354,"_186":489,"_20":111,"_328":502,"_433":503},{"_20":111,"_186":489},{"_20":115,"_186":489},{"_309":362,"_186":505,"_410":506,"_422":513,"_429":517},"Expensive Calculations",[507,509,511],{"_329":319,"_186":508,"_20":123},"useMemo",{"_329":330,"_186":510,"_20":131},"Web Worker",{"_329":354,"_186":512,"_20":139},"Async Results",[514,515,516],{"_329":319,"_186":508,"_20":119},{"_329":330,"_186":510,"_20":127},{"_329":354,"_186":512,"_20":135},[518,521,524],{"_329":319,"_186":508,"_20":119,"_328":519,"_433":520},{"_20":119,"_186":508},{"_20":123,"_186":508},{"_329":330,"_186":510,"_20":127,"_328":522,"_433":523},{"_20":127,"_186":510},{"_20":131,"_186":510},{"_329":354,"_186":512,"_20":135,"_328":525,"_433":526},{"_20":135,"_186":512},{"_20":139,"_186":512},{"_309":528,"_186":529,"_410":530,"_422":537,"_429":542},6,"Optimize Rendering",[531,533,535],{"_329":319,"_186":532,"_20":147},"Component Memoization",{"_329":330,"_186":534,"_20":155},"Custom Comparator",{"_329":354,"_186":536,"_20":163},"Primitive Values",[538,539,540],{"_329":319,"_186":532,"_20":143},{"_329":330,"_186":534,"_20":151},{"_329":354,"_186":541,"_20":159},"Primitives",[543,546,549],{"_329":319,"_186":532,"_20":143,"_328":544,"_433":545},{"_20":143,"_186":532},{"_20":147,"_186":532},{"_329":330,"_186":534,"_20":151,"_328":547,"_433":548},{"_20":151,"_186":534},{"_20":155,"_186":534},{"_329":354,"_186":541,"_20":159,"_328":550,"_433":551},{"_20":159,"_186":541},{"_20":163,"_186":536},{"_309":338,"_186":553,"_410":554,"_422":557,"_429":559},"Windowing",[555],{"_329":319,"_186":556,"_20":171},"Virtualizer",[558],{"_329":319,"_186":556,"_20":167},[560],{"_329":319,"_186":556,"_20":167,"_328":561,"_433":562},{"_20":167,"_186":556},{"_20":171,"_186":556},"playground",{"_565":-5,"_309":-2,"_329":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_569":570,"_242":187,"_230":571,"_678":679,"_680":681,"_682":683,"_687":688,"_693":694},"articleId","workshop-react-performance-4-finished",{"_22":572,"_309":310,"_573":574,"_186":482,"_575":576,"_577":578,"_579":580,"_582":583,"_429":585,"_422":652,"_410":665},"/myapp/workshop-content/exercises/04.code-splitting","dirName","04.code-splitting","instructionsCode","var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var l in e)s(a,l,{get:e[l],enumerable:!0})},c=(a,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!y.call(a,r)&&r!==l&&s(a,r,{get:()=>e[r],enumerable:!(o=b(e,r))||o.enumerable});return a};var f=(a,e,l)=>(l=a!=null?h(u(a)):{},c(e||!a||!a.__esModule?s(l,\"default\",{value:a,enumerable:!0}):l,a)),g=a=>c(s({},\"__esModule\",{value:!0}),a);var i=v((S,t)=>{t.exports=_jsx_runtime});var x={};k(x,{default:()=>p,frontmatter:()=>N});var n=f(i()),N=void 0;function d(a){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",em:\"em\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components},{EpicVideo:l}=e;return l||w(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Code Splitting\"}),`\n`,(0,n.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-performance/intro-to-code-splitting\"}),`\n`,(0,n.jsx)(e.p,{children:`Code splitting acts on the principle that loading less code will speed up your\napp. Say for example that we're building a complex dashboard application that\nincludes the venerable d3 library for graphing data. Your users start\ncomplaining because it takes too long to load the login screen.`}),`\n`,(0,n.jsxs)(e.p,{children:[`So, considering that performance problems can be resolved by less code, how can we\nsolve this one? Well, do we really `,(0,n.jsx)(e.em,{children:\"need\"}),` to have that code for the chart when\nthe user loads the login screen? Nope! We could load that on-demand.`]}),`\n`,(0,n.jsx)(e.p,{children:`Luckily for us, there's a built-in way to do this with JavaScript standards.\nIt's called a dynamic import and the syntax looks like this:`}),`\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(--base0B)\"},children:\"/some-module.js\"}),\"'\",\").\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"then\"}),\"(\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"module\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// do stuff with the module's exports\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t},\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\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:\"// there was some error loading the module...\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t},\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\")\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.blockquote,{children:[`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F4DC} Learn more about dynamic imports in the browser in\n`,(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/super-simple-start-to-es-modules-in-the-browser\",children:\"Super Simple Start to ESModules in the browser\"})]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[`To take this further, React has built-in support for loading modules as React\ncomponents. The module must have a React component as the default export, and\nyou have to use the `,(0,n.jsx)(e.code,{children:\"\"}),` component to render a fallback value while\nthe user waits for the module to be loaded.`]}),`\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(--base03)\"},children:\"// smiley-face.tsx\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"export\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"SmileyFace\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\\u{1F603}\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// app.tsx\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"lazy\"}),\", \",(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\":\"8\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"SmileyFace\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"lazy\"}),\"(() \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\"(\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"./smiley-face.tsx\"}),\"'\",\"))\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",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\":\"12\",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\":\"13\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",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...\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"SmileyFace\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F989} One great way to analyze your app to determine the need/benefit of code\nsplitting for a certain feature/page/interaction, is to use\n`,(0,n.jsx)(e.a,{href:\"https://developer.chrome.com/docs/devtools/coverage\",children:'the \"Coverage\" feature of the developer tools'}),\".\"]})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function w(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(x);})();\n;return Component;","finishedCode","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var j=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),w=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},a=(e,t,n,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of f(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(c=h(t,r))||c.enumerable});return e};var _=(e,t,n)=>(n=e!=null?u(m(e)):{},a(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),g=e=>a(i({},\"__esModule\",{value:!0}),e);var s=j((E,p)=>{p.exports=_jsx_runtime});var b={};w(b,{default:()=>l,frontmatter:()=>y});var o=_(s()),y=void 0;function d(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:\"Code Splitting\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-performance/dad-joke-break-code-splitting\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great job! You've successfully added code splitting for a part of the app\nthat is particularly \"heavy.\" This will help reduce the initial load time of\nyour app and improve the user experience.`})]})}function l(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(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 g(b);})();\n;return Component;","instructionsEpicVideoEmbeds",[581],"https://www.epicreact.dev/workshops/react-performance/intro-to-code-splitting","finishedEpicVideoEmbeds",[584],"https://www.epicreact.dev/workshops/react-performance/dad-joke-break-code-splitting",[586,614,633],{"_329":319,"_328":587,"_433":604},{"_20":95,"_186":485,"_573":588,"_22":96,"_24":97,"_575":589,"_590":591,"_593":594,"_597":598,"_601":602,"_309":310,"_329":319,"_9":328,"_603":99},"01.problem.lazy","var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var b=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),g=(o,e)=>{for(var n in e)a(o,n,{get:e[n],enumerable:!0})},s=(o,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!w.call(o,r)&&r!==n&&a(o,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return o};var y=(o,e,n)=>(n=o!=null?p(m(o)):{},s(e||!o||!o.__esModule?a(n,\"default\",{value:o,enumerable:!0}):n,o)),k=o=>s(a({},\"__esModule\",{value:!0}),o);var l=b((C,h)=>{h.exports=_jsx_runtime});var j={};g(j,{default:()=>d,frontmatter:()=>v});var t=y(l()),v=void 0;function c(o){let e={a:\"a\",h1:\"h1\",p:\"p\",...o.components},{EpicVideo:n}=e;return n||x(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"lazy\"}),`\n`,(0,t.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-performance/lazy\"}),`\n`,(0,t.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Our app has a neat Globe component that shows the user where they are on the\nglobe. Cool right? It's super duper fun.`}),`\n`,(0,t.jsx)(e.p,{children:`But one day users started complaining the app is taking too long to load. We're\nusing several sizeable libraries to have the really cool globe, but users only\nneed to load it if they click the \"show globe\" button and loading it ahead of\ntime makes the app load slower.`}),`\n`,(0,t.jsx)(e.p,{children:`So your job as a performance professional is to load the code on-demand so the\nuser doesn't have to wait to see the checkbox.`}),`\n`,(0,t.jsx)(e.p,{children:`For this one, you'll need to open the solution in isolation and open the Chrome\nDevTools Network tab to watch the JavaScript chunks load when you click \"show\nglobe.\" Your objective is to have the network load those same chunks so they're\nnot in the bundle to begin with.`}),`\n`,(0,t.jsx)(e.p,{children:`\\u{1F4B0} Here's a quick tip: In the Network tab, there's a dropdown for artificially\nthrottling your network speed. It defaults to \"Online\" but you can change it to\n\"Fast 3G\", \"Slow 3G\", etc.`}),`\n`,(0,t.jsxs)(e.p,{children:[`Also, spend a bit of time playing with\n`,(0,t.jsx)(e.a,{href:\"https://developer.chrome.com/docs/devtools/coverage\",children:\"the coverage feature of the dev tools\"}),\".\"]})]})}function d(o={}){let{wrapper:e}=o.components||{};return e?(0,t.jsx)(e,{...o,children:(0,t.jsx)(c,{...o})}):c(o)}function x(o,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+o+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(j);})();\n;return Component;","epicVideoEmbeds",[592],"https://www.epicreact.dev/workshops/react-performance/lazy","test",{"_9":595,"_595":596},"script","playwright test --config=./tests/playwright.config.js","dev",{"_9":595,"_599":600,"_236":237},"portNumber",6031,"stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/04.code-splitting/01.problem.lazy?view=both&title=lazy+%28problem%29","solutionName",{"_20":99,"_186":485,"_573":605,"_22":100,"_24":101,"_575":606,"_590":607,"_593":609,"_597":610,"_601":612,"_309":310,"_329":319,"_9":433,"_613":-5},"01.solution.lazy","var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),y=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(n,r)&&r!==o&&i(n,r,{get:()=>e[r],enumerable:!(a=l(e,r))||a.enumerable});return n};var v=(n,e,o)=>(o=n!=null?p(f(n)):{},c(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),x=n=>c(i({},\"__esModule\",{value:!0}),n);var s=w((B,d)=>{d.exports=_jsx_runtime});var j={};y(j,{default:()=>u,frontmatter:()=>_});var t=v(s()),_=void 0;function h(n){let e={code:\"code\",h1:\"h1\",p:\"p\",strong:\"strong\",...n.components},{EpicVideo:o}=e;return o||b(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"lazy\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-performance/lazy/solution\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Great! That makes our initial page load \",(0,t.jsx)(e.strong,{children:\"much\"}),` lighter than before. Based\non my count in the development environment, we've gone from 2.0 MB JavaScript\ndownloaded to 1.4 MB. That's a 30% reduction in the amount of JavaScript we're\nsending to the client. That's a big win!`]}),`\n`,(0,t.jsxs)(e.p,{children:[`If you're curious, you could try running the production version of this app\n(`,(0,t.jsx)(e.code,{children:\"npm run build\"}),\" and \",(0,t.jsx)(e.code,{children:\"npm run preview\"}),` in the playground directory) and you'll\nfind we go from 376 KB to 189 KB. That's over a 50% reduction! Huge!`]}),`\n`,(0,t.jsx)(e.p,{children:`Of course, once you show the globe we have to load the rest of it, but there are\nthings you can do to optimize even that so the user's waiting less. Let's try\nthat next.`})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.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 x(j);})();\n;return Component;",[608],"https://www.epicreact.dev/workshops/react-performance/lazy/solution",{"_9":595,"_595":596},{"_9":595,"_599":611,"_236":237},7031,"https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/04.code-splitting/01.solution.lazy?view=both&title=lazy+%28solution%29","problemName",{"_329":330,"_328":615,"_433":624},{"_20":103,"_186":487,"_573":616,"_22":104,"_24":105,"_575":617,"_590":618,"_593":620,"_597":621,"_601":623,"_309":310,"_329":330,"_9":328,"_603":107},"02.problem.eager","var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(t,r)&&r!==n&&a(t,r,{get:()=>e[r],enumerable:!(i=u(e,r))||i.enumerable});return t};var y=(t,e,n)=>(n=t!=null?p(f(t)):{},c(e||!t||!t.__esModule?a(n,\"default\",{value:t,enumerable:!0}):n,t)),b=t=>c(a({},\"__esModule\",{value:!0}),t);var h=w((E,d)=>{d.exports=_jsx_runtime});var _={};x(_,{default:()=>l,frontmatter:()=>k});var o=y(h()),k=void 0;function s(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||v(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Eager Loading\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-performance/eager-loading\"}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} So it's great that the users can get the app loaded faster, but it's annoying\nwhen 99% of the time the reason the users are using the app is so they can\ninteract with our globe. We don't want to have to make them wait first to load\nthe app and then again to load the globe. Wouldn't it be cool if we could have\nglobe start loading as soon as the user hovers over the checkbox? So if they\n`,(0,o.jsx)(e.code,{children:\"pointerOver\"}),\" or \",(0,o.jsx)(e.code,{children:\"focus\"}),\" the \",(0,o.jsx)(e.code,{children:\"\"}),` for the checkbox, we should kick off a\ndynamic import for the globe module.`]}),`\n`,(0,o.jsx)(e.p,{children:\"See if you can make that work.\"}),`\n`,(0,o.jsx)(\"callout-success\",{children:(0,o.jsxs)(e.p,{children:[\"Tip: It doesn't matter how many times you call \",(0,o.jsx)(e.code,{children:\"import('./path-to-module')\"}),`,\nvite will only actually load the module once.`]})})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(s,{...t})}):s(t)}function v(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(_);})();\n;return Component;",[619],"https://www.epicreact.dev/workshops/react-performance/eager-loading",{"_9":595,"_595":596},{"_9":595,"_599":622,"_236":237},6032,"https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/04.code-splitting/02.problem.eager?view=both&title=Eager+Loading+%28problem%29",{"_20":107,"_186":487,"_573":625,"_22":108,"_24":109,"_575":626,"_590":627,"_593":629,"_597":630,"_601":632,"_309":310,"_329":330,"_9":433,"_613":-5},"02.solution.eager","var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!f.call(t,r)&&r!==n&&i(t,r,{get:()=>e[r],enumerable:!(a=u(e,r))||a.enumerable});return t};var y=(t,e,n)=>(n=t!=null?l(w(t)):{},s(e||!t||!t.__esModule?i(n,\"default\",{value:t,enumerable:!0}):n,t)),_=t=>s(i({},\"__esModule\",{value:!0}),t);var d=g((M,c)=>{c.exports=_jsx_runtime});var b={};x(b,{default:()=>p,frontmatter:()=>j});var o=y(d()),j=void 0;function h(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||E(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Eager Loading\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-performance/eager-loading/solution\"}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great. Now we're loading it a bit sooner. In general, this is a helpful\npractice to reduce the amount of time between when the user indicates they want\nto see something and when they actually see it.`}),`\n`,(0,o.jsx)(e.p,{children:\"The key is knowing when to load things eagerly.\"})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(h,{...t})}):h(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 _(b);})();\n;return Component;",[628],"https://www.epicreact.dev/workshops/react-performance/eager-loading/solution",{"_9":595,"_595":596},{"_9":595,"_599":631,"_236":237},7032,"https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/04.code-splitting/02.solution.eager?view=both&title=Eager+Loading+%28solution%29",{"_329":354,"_328":634,"_433":643},{"_20":111,"_186":489,"_573":635,"_22":112,"_24":113,"_575":636,"_590":637,"_593":639,"_597":640,"_601":642,"_309":310,"_329":354,"_9":328,"_603":115},"03.problem.transition","var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var o in e)a(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!m.call(t,i)&&i!==o&&a(t,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return t};var g=(t,e,o)=>(o=t!=null?p(w(t)):{},s(e||!t||!t.__esModule?a(o,\"default\",{value:t,enumerable:!0}):o,t)),x=t=>s(a({},\"__esModule\",{value:!0}),t);var c=y((T,d)=>{d.exports=_jsx_runtime});var _={};b(_,{default:()=>h,frontmatter:()=>k});var n=g(c()),k=void 0;function l(t){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||v(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Transitions\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-performance/transitions\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} By default, when a component suspends (like our \",(0,n.jsx)(e.code,{children:\"lazy\"}),` component is while\nwe're lazy-loading some code), React will render the fallback of our suspense\nboundary immediately. Go ahead and try it now. Hover over the checkbox for long\nenough for the code to load and then check it. You'll notice even though the\ncode is ready to go, it still shows our fallback UI.`]}),`\n`,(0,n.jsx)(e.p,{children:`The reason this happens is React wants to help us avoid a flash of loading\nstate because it doesn't know whether our content will be ready immediately or\nnot. So React shows the fallback immediately, then when it sees the content is\nalready ready, it will actually wait a little bit before switching from the\nfallback to the real content. This is a good default, but it's definitely not\nthe best user experience for our situation.`}),`\n`,(0,n.jsxs)(e.p,{children:[\"So instead, we can wrap our state update \",(0,n.jsx)(e.code,{children:\"setShowGlobe\"}),` in a transition so React\ndoesn't go to the suspense fallback and instead we can show a pending UI if we\nso decide.`]}),`\n`,(0,n.jsxs)(e.p,{children:[`This is similar to what we've done in the past, so if you'd like you can add\n`,(0,n.jsx)(e.code,{children:\"useSpinDelay\"}),\" from \",(0,n.jsx)(e.a,{href:\"https://npm.im/spin-delay\",children:(0,n.jsx)(e.code,{children:\"spin-delay\"})}),` to prevent pushing\nthe flash of loading state to later if the globe's code isn't quite ready yet.`]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/useTransition\",children:[\"\\u{1F4DC} \",(0,n.jsx)(e.code,{children:\"useTransition\"})]})})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}function v(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(_);})();\n;return Component;",[638],"https://www.epicreact.dev/workshops/react-performance/transitions",{"_9":595,"_595":596},{"_9":595,"_599":641,"_236":237},6033,"https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/04.code-splitting/03.problem.transition?view=both&title=Transitions+%28problem%29",{"_20":115,"_186":489,"_573":644,"_22":116,"_24":117,"_575":645,"_590":646,"_593":648,"_597":649,"_601":651,"_309":310,"_329":354,"_9":433,"_613":-5},"03.solution.transition","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=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)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 h(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=u(t,r))||s.enumerable});return e};var g=(e,t,n)=>(n=e!=null?m(l(e)):{},c(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(i({},\"__esModule\",{value:!0}),e);var p=w((y,a)=>{a.exports=_jsx_runtime});var k={};_(k,{default:()=>f,frontmatter:()=>E});var o=g(p()),E=void 0;function d(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||M(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Transitions\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-performance/transitions/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} React gives us lots of options to control the user experience we're after\nwhile also optimizing things for performance. Great work on this one!`})]})}function f(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}function M(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(k);})();\n;return Component;",[647],"https://www.epicreact.dev/workshops/react-performance/transitions/solution",{"_9":595,"_595":596},{"_9":595,"_599":650,"_236":237},7033,"https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/04.code-splitting/03.solution.transition?view=both&title=Transitions+%28solution%29",[653,657,661],{"_20":95,"_186":485,"_573":588,"_22":96,"_24":97,"_575":589,"_590":654,"_593":655,"_597":656,"_601":602,"_309":310,"_329":319,"_9":328,"_603":99},[592],{"_9":595,"_595":596},{"_9":595,"_599":600,"_236":237},{"_20":103,"_186":487,"_573":616,"_22":104,"_24":105,"_575":617,"_590":658,"_593":659,"_597":660,"_601":623,"_309":310,"_329":330,"_9":328,"_603":107},[619],{"_9":595,"_595":596},{"_9":595,"_599":622,"_236":237},{"_20":111,"_186":489,"_573":635,"_22":112,"_24":113,"_575":636,"_590":662,"_593":663,"_597":664,"_601":642,"_309":310,"_329":354,"_9":328,"_603":115},[638],{"_9":595,"_595":596},{"_9":595,"_599":641,"_236":237},[666,670,674],{"_20":99,"_186":485,"_573":605,"_22":100,"_24":101,"_575":606,"_590":667,"_593":668,"_597":669,"_601":612,"_309":310,"_329":319,"_9":433,"_613":-5},[608],{"_9":595,"_595":596},{"_9":595,"_599":611,"_236":237},{"_20":107,"_186":487,"_573":625,"_22":108,"_24":109,"_575":626,"_590":671,"_593":672,"_597":673,"_601":632,"_309":310,"_329":330,"_9":433,"_613":-5},[628],{"_9":595,"_595":596},{"_9":595,"_599":631,"_236":237},{"_20":115,"_186":489,"_573":644,"_22":116,"_24":117,"_575":645,"_590":675,"_593":676,"_597":677,"_601":651,"_309":310,"_329":354,"_9":433,"_613":-5},[647],{"_9":595,"_595":596},{"_9":595,"_599":650,"_236":237},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=React%20Performance%20%E2%9A%A1&entry.428900931=Code%20Splitting","epicVideoInfosPromise",["P",681],"exerciseFinished",{"_684":685,"_24":686},"file","/myapp/workshop-content/exercises/04.code-splitting/FINISHED.mdx","exercises/04.code-splitting/FINISHED.mdx","prevStepLink",{"_689":690,"_691":692},"to","/exercise/04/03/solution","aria-label","Transitions (solution)","nextStepLink",{"_689":695,"_691":505},"/exercise/05","actionData","errors"]

04. Code Splitting/Elaboration