[{"_1":2,"_745":-5,"_746":-5},"loaderData",{"_3":4,"_468":469,"_596":597,"_744":-5},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_166":167,"_219":169,"_220":171,"_172":173,"_221":222,"_232":233,"_257":-5,"_258":-5,"_259":260},"userId",{"_7":8,"_9":10},"id","besris58j38dgaciw4c3g75p","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],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.use-reducer/01.problem.new-state","relativePath","exercises/01.use-reducer/01.problem.new-state",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.use-reducer/01.solution.new-state","exercises/01.use-reducer/01.solution.new-state",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.use-reducer/02.problem.previous-state","exercises/01.use-reducer/02.problem.previous-state",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.use-reducer/02.solution.previous-state","exercises/01.use-reducer/02.solution.previous-state",{"_20":39,"_22":40,"_24":41},"01.03.problem","/myapp/workshop-content/exercises/01.use-reducer/03.problem.object","exercises/01.use-reducer/03.problem.object",{"_20":43,"_22":44,"_24":45},"01.03.solution","/myapp/workshop-content/exercises/01.use-reducer/03.solution.object","exercises/01.use-reducer/03.solution.object",{"_20":47,"_22":48,"_24":49},"01.04.problem","/myapp/workshop-content/exercises/01.use-reducer/04.problem.function","exercises/01.use-reducer/04.problem.function",{"_20":51,"_22":52,"_24":53},"01.04.solution","/myapp/workshop-content/exercises/01.use-reducer/04.solution.function","exercises/01.use-reducer/04.solution.function",{"_20":55,"_22":56,"_24":57},"01.05.problem","/myapp/workshop-content/exercises/01.use-reducer/05.problem.traditional","exercises/01.use-reducer/05.problem.traditional",{"_20":59,"_22":60,"_24":61},"01.05.solution","/myapp/workshop-content/exercises/01.use-reducer/05.solution.traditional","exercises/01.use-reducer/05.solution.traditional",{"_20":63,"_22":64,"_24":65},"01.06.problem","/myapp/workshop-content/exercises/01.use-reducer/06.problem.tic-tac-toe","exercises/01.use-reducer/06.problem.tic-tac-toe",{"_20":67,"_22":68,"_24":69},"01.06.solution","/myapp/workshop-content/exercises/01.use-reducer/06.solution.tic-tac-toe","exercises/01.use-reducer/06.solution.tic-tac-toe",{"_20":71,"_22":72,"_24":73},"02.01.problem","/myapp/workshop-content/exercises/02.state-optimization/01.problem.optimize","exercises/02.state-optimization/01.problem.optimize",{"_20":75,"_22":76,"_24":77},"02.01.solution","/myapp/workshop-content/exercises/02.state-optimization/01.solution.optimize","exercises/02.state-optimization/01.solution.optimize",{"_20":79,"_22":80,"_24":81},"03.01.problem","/myapp/workshop-content/exercises/03.custom-hooks/01.problem.function","exercises/03.custom-hooks/01.problem.function",{"_20":83,"_22":84,"_24":85},"03.01.solution","/myapp/workshop-content/exercises/03.custom-hooks/01.solution.function","exercises/03.custom-hooks/01.solution.function",{"_20":87,"_22":88,"_24":89},"03.02.problem","/myapp/workshop-content/exercises/03.custom-hooks/02.problem.callback","exercises/03.custom-hooks/02.problem.callback",{"_20":91,"_22":92,"_24":93},"03.02.solution","/myapp/workshop-content/exercises/03.custom-hooks/02.solution.callback","exercises/03.custom-hooks/02.solution.callback",{"_20":95,"_22":96,"_24":97},"04.01.problem","/myapp/workshop-content/exercises/04.context/01.problem.provider","exercises/04.context/01.problem.provider",{"_20":99,"_22":100,"_24":101},"04.01.solution","/myapp/workshop-content/exercises/04.context/01.solution.provider","exercises/04.context/01.solution.provider",{"_20":103,"_22":104,"_24":105},"04.02.problem","/myapp/workshop-content/exercises/04.context/02.problem.hook","exercises/04.context/02.problem.hook",{"_20":107,"_22":108,"_24":109},"04.02.solution","/myapp/workshop-content/exercises/04.context/02.solution.hook","exercises/04.context/02.solution.hook",{"_20":111,"_22":112,"_24":113},"05.01.problem","/myapp/workshop-content/exercises/05.portals/01.problem.create","exercises/05.portals/01.problem.create",{"_20":115,"_22":116,"_24":117},"05.01.solution","/myapp/workshop-content/exercises/05.portals/01.solution.create","exercises/05.portals/01.solution.create",{"_20":119,"_22":120,"_24":121},"06.01.problem","/myapp/workshop-content/exercises/06.layout-computation/01.problem.layout-effect","exercises/06.layout-computation/01.problem.layout-effect",{"_20":123,"_22":124,"_24":125},"06.01.solution","/myapp/workshop-content/exercises/06.layout-computation/01.solution.layout-effect","exercises/06.layout-computation/01.solution.layout-effect",{"_20":127,"_22":128,"_24":129},"07.01.problem","/myapp/workshop-content/exercises/07.imperative-handle/01.problem.ref","exercises/07.imperative-handle/01.problem.ref",{"_20":131,"_22":132,"_24":133},"07.01.solution","/myapp/workshop-content/exercises/07.imperative-handle/01.solution.ref","exercises/07.imperative-handle/01.solution.ref",{"_20":135,"_22":136,"_24":137},"08.01.problem","/myapp/workshop-content/exercises/08.focus/01.problem.flush-sync","exercises/08.focus/01.problem.flush-sync",{"_20":139,"_22":140,"_24":141},"08.01.solution","/myapp/workshop-content/exercises/08.focus/01.solution.flush-sync","exercises/08.focus/01.solution.flush-sync",{"_20":143,"_22":144,"_24":145},"09.01.problem","/myapp/workshop-content/exercises/09.sync-external/01.problem.sub","exercises/09.sync-external/01.problem.sub",{"_20":147,"_22":148,"_24":149},"09.01.solution","/myapp/workshop-content/exercises/09.sync-external/01.solution.sub","exercises/09.sync-external/01.solution.sub",{"_20":151,"_22":152,"_24":153},"09.02.problem","/myapp/workshop-content/exercises/09.sync-external/02.problem.util","exercises/09.sync-external/02.problem.util",{"_20":155,"_22":156,"_24":157},"09.02.solution","/myapp/workshop-content/exercises/09.sync-external/02.solution.util","exercises/09.sync-external/02.solution.util",{"_20":159,"_22":160,"_24":161},"09.03.problem","/myapp/workshop-content/exercises/09.sync-external/03.problem.ssr","exercises/09.sync-external/03.problem.ssr",{"_20":163,"_22":164,"_24":165},"09.03.solution","/myapp/workshop-content/exercises/09.sync-external/03.solution.ssr","exercises/09.sync-external/03.solution.ssr","workshopConfig",{"_168":169,"_170":171,"_172":173,"_179":180,"_197":198,"_199":200,"_201":202,"_203":204,"_207":208,"_213":214,"_217":218},"title","Advanced React APIs 🔥","subtitle","Learn the more advanced React APIs and different use cases to enable great user experiences.","instructor",{"_20":174,"_175":176,"_177":178},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","advanced-react-apis","discordChannelId","1285244676286189569","discordTags",[195,196],"1285246046498328627","1285245763428810815","onboardingVideo","https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/advanced-react-apis","githubRoot","https://github.com/epicweb-dev/advanced-react-apis/tree/main","stackBlitzConfig",{"_205":206},"view","editor","forms",{"_209":210,"_211":212},"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",{"_215":216},"enabled",true,"initialRoute","/","workshopTitle","workshopSubtitle","ENV",{"_223":224,"_225":226,"_227":200,"_228":202,"_229":216,"_230":231},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","5.10.0","requestInfo",{"_234":235,"_236":237,"_238":239,"_240":241,"_242":241,"_243":244,"_251":252,"_253":254,"_255":218,"_256":216},"protocol","http:","hostname","advanced-apis.epicreact.dev","port","","origin","http://advanced-apis.epicreact.dev","domain","hints",{"_245":246,"_247":248,"_249":250},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/09/finished","session",{"_245":-5},"separator","online","toast","confettiId","presence",{"_261":262},"users",[263,278,291,299,309,318,327,335,342,348,355,363,371,378,386,393,400,408,413,417,423,428,435,441,446,451,455,460,464],{"_7":264,"_265":266,"_20":267,"_268":269},"4869b9db4401438b3d308e402791790f","avatarUrl","https://www.gravatar.com/avatar/4869b9db4401438b3d308e402791790f?size=288&default=identicon","Sebastian Rogers","location",{"_219":270,"_240":271,"_211":272},"Get Started with React 🏃‍➡️","http://localhost:5639",{"_9":273,"_274":275,"_276":277},"problem","exerciseNumber",2,"stepNumber",1,{"_7":279,"_280":216,"_281":282,"_283":284,"_20":285,"_268":286},"34dadeab-fb58-4310-8375-cfa4fb0a5015","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/b1b1b6b6751dd41ba6e084ecc56d2c40?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/b1b1b6b6751dd41ba6e084ecc56d2c40?size=512&default=identicon","Artem Zakharchenko",{"_219":287,"_240":271,"_211":288},"React Component Testing with Vitest",{"_9":273,"_274":289,"_276":290},3,4,{"_7":292,"_280":216,"_281":293,"_283":294,"_20":295,"_268":296},"7e14ce4c-edff-4110-8061-a6bbb77932ce","https://www.gravatar.com/avatar/af1304772c802d17c9ff8e33909e0d3d?size=64&default=identicon","https://www.gravatar.com/avatar/af1304772c802d17c9ff8e33909e0d3d?size=512&default=identicon","Clara Attermo",{"_219":169,"_240":271,"_211":297},{"_9":273,"_274":298,"_276":277},9,{"_7":300,"_280":216,"_281":301,"_283":302,"_20":303,"_268":304},"2ad3f9a0-d8e6-49c8-bf82-2b41199a1bbf","https://www.gravatar.com/avatar/3c77ed63b0adbee55a74923d76fbc818?size=64&default=identicon","https://www.gravatar.com/avatar/3c77ed63b0adbee55a74923d76fbc818?size=512&default=identicon","Tiago Benedetti",{"_219":305,"_240":306,"_211":307},"Data Modeling Deep Dive 💾","http://192.168.0.3:5639",{"_9":273,"_274":308,"_276":275},5,{"_7":310,"_280":216,"_281":311,"_283":312,"_20":313,"_268":314},"2c7597bd-5caf-4f5b-93c7-23d5e251227d","https://www.gravatar.com/avatar/50a196709d15ddc561f8994ad8717e46?size=64&default=identicon","https://www.gravatar.com/avatar/50a196709d15ddc561f8994ad8717e46?size=512&default=identicon","Michał Borowy",{"_219":315,"_240":271,"_211":316},"Web Authentication 🔐",{"_9":273,"_274":317,"_276":289},8,{"_7":319,"_280":216,"_281":320,"_283":321,"_20":322,"_268":323},"3f9a2aa2-15e6-42fd-be63-659ad88a4639","https://www.gravatar.com/avatar/42203d3c8a66391a6f1a4df5aed72027?size=64&default=identicon","https://www.gravatar.com/avatar/42203d3c8a66391a6f1a4df5aed72027?size=512&default=identicon","Devin Leggett",{"_219":324,"_240":271,"_211":325},"React Suspense 🔀",{"_9":326,"_274":289,"_276":275},"solution",{"_7":328,"_280":216,"_281":329,"_283":330,"_20":331,"_268":332},"bd681d7a-5d37-453f-97ff-28b768da6d22","https://www.gravatar.com/avatar/2520fa2313ab56da3291788c6e4b192b?size=64&default=identicon","https://www.gravatar.com/avatar/2520fa2313ab56da3291788c6e4b192b?size=512&default=identicon","Queen",{"_219":333,"_240":271,"_211":334},"React Fundamentals ⚛",{"_9":273,"_274":289,"_276":277},{"_7":336,"_280":216,"_281":337,"_283":338,"_20":339,"_268":340},"96b0ecea-9bce-4d5a-b780-7b9dfa05537b","https://avatars.githubusercontent.com/u/66702127?v=4&size=64","https://avatars.githubusercontent.com/u/66702127?v=4&size=512","Facundo Perez Montalvo",{"_219":315,"_240":271,"_211":341},{"_9":326,"_274":275,"_276":289},{"_7":343,"_280":216,"_281":344,"_283":345,"_20":346,"_268":347},"1652830b-a9c5-4d5d-9cd9-bddc54aa6bde","https://www.gravatar.com/avatar/2b6a29ef69cb0f0af54fb4c374947451?size=64&default=identicon","https://www.gravatar.com/avatar/2b6a29ef69cb0f0af54fb4c374947451?size=512&default=identicon","Peter Hollo",{"_219":270,"_240":271},{"_7":349,"_280":216,"_281":350,"_283":351,"_20":352,"_268":353},"ad3251c9-2810-4e8f-be7e-f4740807dc35","https://www.gravatar.com/avatar/35dcfd1f36937f8b58c693625de734f4?size=64&default=identicon","https://www.gravatar.com/avatar/35dcfd1f36937f8b58c693625de734f4?size=512&default=identicon","accounts@lehnerchristian.com",{"_219":169,"_240":271,"_211":354},{"_274":289},{"_7":356,"_280":216,"_281":357,"_283":358,"_20":359,"_268":360},"1f586881-38fa-4f6c-b307-0d080592cbb7","https://www.gravatar.com/avatar/dee9addb3cf37752bcb6f12001b69b99?size=64&default=identicon","https://www.gravatar.com/avatar/dee9addb3cf37752bcb6f12001b69b99?size=512&default=identicon","David C Hodge",{"_219":361,"_240":271,"_211":362},"Full Stack Foundations 🔭",{"_9":326,"_274":277,"_276":277},{"_7":364,"_280":216,"_281":365,"_283":366,"_20":367,"_268":368},"5bbd0583-ba79-4392-8ad1-42ad751b400f","https://avatars.githubusercontent.com/u/71827672?v=4&size=64","https://avatars.githubusercontent.com/u/71827672?v=4&size=512","Théo Pomies",{"_219":369,"_240":271,"_211":370},"React Server Components 🤹",{"_274":289},{"_7":372,"_280":216,"_281":373,"_283":374,"_20":375,"_268":376},"c50b5dcb-6b00-4fb1-8e78-755c08fd2705","https://www.gravatar.com/avatar/072166b5abf59b6afdd6503e2f3e50db?size=64&default=identicon","https://www.gravatar.com/avatar/072166b5abf59b6afdd6503e2f3e50db?size=512&default=identicon","Aleksandra Gałach",{"_219":169,"_240":271,"_211":377},{"_9":273,"_274":298,"_276":289},{"_7":379,"_280":216,"_281":380,"_283":381,"_20":382,"_268":383},"17877868-8bf1-40ba-836e-87130360baa6","https://cdn.discordapp.com/avatars/784743250593972225/28a61ca56369f3e0f3c489cbdec4c2bb.png?size=64","https://cdn.discordapp.com/avatars/784743250593972225/28a61ca56369f3e0f3c489cbdec4c2bb.png?size=512","Joern Ahrens",{"_219":384,"_240":271,"_211":385},"React Hooks 🎣",{"_274":277},{"_7":387,"_280":216,"_281":388,"_283":389,"_20":390,"_268":391},"3f393a7b-09a2-4fea-b1bc-545cbaa155c8","https://cdn.discordapp.com/avatars/721995350940057633/50e636dccaab973b19b83963b894642d.png?size=64","https://cdn.discordapp.com/avatars/721995350940057633/50e636dccaab973b19b83963b894642d.png?size=512","Dwi Pasca Nursanti",{"_219":333,"_240":271,"_211":392},{"_9":326,"_274":317,"_276":275},{"_7":394,"_280":216,"_281":395,"_283":396,"_20":397,"_268":398},"1661039c-8124-4145-8bcf-5bbfae2c9e1d","https://www.gravatar.com/avatar/3973bbe40ab3d36aabe4f59311fa4353?size=64&default=identicon","https://www.gravatar.com/avatar/3973bbe40ab3d36aabe4f59311fa4353?size=512&default=identicon","josep arrufat vicente",{"_219":369,"_240":399},"http://192.168.5.234:5639",{"_7":401,"_280":216,"_281":402,"_283":403,"_20":404,"_268":405},"9892b202-cd1e-4544-9801-7366d898d9f3","https://www.gravatar.com/avatar/814cc5a9b7ea75519b7294ac56a52bbd?size=64&default=identicon","https://www.gravatar.com/avatar/814cc5a9b7ea75519b7294ac56a52bbd?size=512&default=identicon","Borja Miralles",{"_219":333,"_240":271,"_211":406},{"_274":407},6,{"_7":409,"_268":410},"kqqsexqgu5fo9e4eustkhnsw",{"_219":411,"_240":271,"_211":412},"Professional Web Forms 📝",{"_9":273,"_274":290,"_276":275},{"_7":414,"_268":415},"ppzl9kt674pewy45rv841h4w",{"_219":333,"_240":271,"_211":416},{"_9":273,"_274":289,"_276":308},{"_7":418,"_268":419},"nv9z5tk2rbiz3v8cvvqi1tx5",{"_219":420,"_240":421,"_211":422},"📐 Pixel Perfect Tailwind","http://pixel-perfect-tailwind.epicweb.dev",{"_9":326,"_274":275,"_276":275},{"_7":424,"_268":425},"d6mungfh94xupyktvbg259po",{"_219":426,"_240":271,"_211":427},"React Performance ⚡",{"_9":273,"_274":277,"_276":277},{"_7":429,"_280":216,"_281":430,"_283":431,"_20":-5,"_268":432},"969b744a-88cd-4926-ba8e-4a0c4f0a5e9c","https://www.gravatar.com/avatar/ac614ad499e4dcdf61794e196f169c69?size=64&default=identicon","https://www.gravatar.com/avatar/ac614ad499e4dcdf61794e196f169c69?size=512&default=identicon",{"_219":169,"_240":271,"_211":433},{"_9":273,"_274":434,"_276":277},7,{"_7":436,"_280":16,"_281":437,"_283":438,"_20":-5,"_268":439},"78a47339-8998-455c-81fb-bd4208b0ad45","https://www.gravatar.com/avatar/fcd091c54247f0df49e2b40d3b1a1e98?size=64&default=identicon","https://www.gravatar.com/avatar/fcd091c54247f0df49e2b40d3b1a1e98?size=512&default=identicon",{"_219":169,"_240":271,"_211":440},{"_274":290},{"_7":442,"_268":443},"b0cmcgbkkqe283jtpxdqylgd",{"_219":333,"_240":444,"_211":445},"http://fundamentals.epicreact.dev",{"_274":308},{"_7":447,"_268":448},"mz3u3bfx96e0iqk3vb6tokrg",{"_219":270,"_240":449,"_211":450},"http://get-started.epicreact.dev",{"_9":273,"_274":290,"_276":277},{"_7":452,"_268":453},"usbgphy2gcuf7nuyogvdx1ul",{"_219":369,"_240":271,"_211":454},{"_9":273,"_274":290,"_276":308},{"_7":456,"_268":457},"o3ms6jpkccihc0mv0d6rtsdp",{"_219":411,"_240":458,"_211":459},"http://forms.epicweb.dev",{"_9":273,"_274":289,"_276":277},{"_7":461,"_268":462},"eyqezve2p2kh0699mphfx9i9",{"_219":411,"_240":271,"_211":463},{"_274":308},{"_7":465,"_268":466},"r80pl8dgwa2jn37k87f8ij0u",{"_219":169,"_240":241,"_211":467},{"_274":298,"_276":-5,"_9":-5},"routes/_app+/_layout",{"_219":169,"_470":471,"_592":593,"_595":16},"exercises",[472,504,513,526,539,548,557,566,575],{"_274":277,"_168":473,"_474":475,"_488":489,"_496":497},"Advanced State Management","solutions",[476,478,480,482,484,486],{"_276":277,"_168":477,"_20":27},"New state",{"_276":275,"_168":479,"_20":35},"Previous State",{"_276":289,"_168":481,"_20":43},"State Object",{"_276":290,"_168":483,"_20":51},"Action Function",{"_276":308,"_168":485,"_20":59},"Traditional Reducer",{"_276":407,"_168":487,"_20":67},"Real World","problems",[490,491,492,493,494,495],{"_276":277,"_168":477,"_20":21},{"_276":275,"_168":479,"_20":31},{"_276":289,"_168":481,"_20":39},{"_276":290,"_168":483,"_20":47},{"_276":308,"_168":485,"_20":55},{"_276":407,"_168":487,"_20":63},"steps",[498,499,500,501,502,503],{"_276":277,"_168":477,"_20":21},{"_276":275,"_168":479,"_20":31},{"_276":289,"_168":481,"_20":39},{"_276":290,"_168":483,"_20":47},{"_276":308,"_168":485,"_20":55},{"_276":407,"_168":487,"_20":63},{"_274":275,"_168":505,"_474":506,"_488":509,"_496":511},"State Optimization",[507],{"_276":277,"_168":508,"_20":75},"Optimize state updates",[510],{"_276":277,"_168":508,"_20":71},[512],{"_276":277,"_168":508,"_20":71},{"_274":289,"_168":514,"_474":515,"_488":520,"_496":523},"Custom Hooks",[516,518],{"_276":277,"_168":517,"_20":83},"Hook Function",{"_276":275,"_168":519,"_20":91},"useCallback",[521,522],{"_276":277,"_168":517,"_20":79},{"_276":275,"_168":519,"_20":87},[524,525],{"_276":277,"_168":517,"_20":79},{"_276":275,"_168":519,"_20":87},{"_274":290,"_168":527,"_474":528,"_488":533,"_496":536},"Shared Context",[529,531],{"_276":277,"_168":530,"_20":99},"Context Provider",{"_276":275,"_168":532,"_20":107},"Context Hook",[534,535],{"_276":277,"_168":530,"_20":95},{"_276":275,"_168":532,"_20":103},[537,538],{"_276":277,"_168":530,"_20":95},{"_276":275,"_168":532,"_20":103},{"_274":308,"_168":540,"_474":541,"_488":544,"_496":546},"Portals",[542],{"_276":277,"_168":543,"_20":115},"createPortal",[545],{"_276":277,"_168":543,"_20":111},[547],{"_276":277,"_168":543,"_20":111},{"_274":407,"_168":549,"_474":550,"_488":553,"_496":555},"Layout Computation",[551],{"_276":277,"_168":552,"_20":123},"useLayoutEffect",[554],{"_276":277,"_168":552,"_20":119},[556],{"_276":277,"_168":552,"_20":119},{"_274":434,"_168":558,"_474":559,"_488":562,"_496":564},"Imperative Handles",[560],{"_276":277,"_168":561,"_20":131},"useImperativeHandle",[563],{"_276":277,"_168":561,"_20":127},[565],{"_276":277,"_168":561,"_20":127},{"_274":317,"_168":567,"_474":568,"_488":571,"_496":573},"Focus Management",[569],{"_276":277,"_168":570,"_20":139},"flushSync",[572],{"_276":277,"_168":570,"_20":135},[574],{"_276":277,"_168":570,"_20":135},{"_274":298,"_168":576,"_474":577,"_488":584,"_496":588},"Sync External State",[578,580,582],{"_276":277,"_168":579,"_20":147},"useSyncExternalStore",{"_276":275,"_168":581,"_20":155},"Make Store Utility",{"_276":289,"_168":583,"_20":163},"Handling Server Rendering",[585,586,587],{"_276":277,"_168":579,"_20":143},{"_276":275,"_168":581,"_20":151},{"_276":289,"_168":583,"_20":159},[589,590,591],{"_276":277,"_168":579,"_20":143},{"_276":275,"_168":581,"_20":151},{"_276":289,"_168":583,"_20":159},"playground",{"_594":-5,"_274":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_598":599,"_219":169,"_211":600,"_725":726,"_727":728,"_729":730,"_734":735,"_740":741},"articleId","workshop-advanced-react-apis-9-finished",{"_274":298,"_601":602,"_168":576,"_603":604,"_605":606,"_607":608,"_610":611,"_496":613,"_488":693,"_474":709},"dirName","09.sync-external","instructionsCode","var Component=(()=>{var b=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var l in e)s(n,l,{get:e[l],enumerable:!0})},o=(n,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of v(e))!y.call(n,r)&&r!==l&&s(n,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return n};var g=(n,e,l)=>(l=n!=null?b(u(n)):{},o(e||!n||!n.__esModule?s(l,\"default\",{value:n,enumerable:!0}):l,n)),N=n=>o(s({},\"__esModule\",{value:!0}),n);var i=m((D,t)=>{t.exports=_jsx_runtime});var w={};k(w,{default:()=>h,frontmatter:()=>f});var a=g(i()),f=void 0;function d(n){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...n.components},{EpicVideo:l}=e;return l||E(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Sync External State\"}),`\n`,(0,a.jsx)(l,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-sync-external-state\"}),`\n`,(0,a.jsx)(e.p,{children:`Not everything we build on the web is built with React. There are libraries and\nplatform APIs that are external to React. Bringing those things into React's\ncomponent model and state management lifecycle is necessary for building\nfull-featured applications.`}),`\n`,(0,a.jsxs)(e.p,{children:[`The task is to synchronize the external world with the internal state of a\nReact component. To do this, we use the `,(0,a.jsx)(e.code,{children:\"useSyncExternalStore\"}),\" hook.\"]}),`\n`,(0,a.jsx)(e.p,{children:`Let's take the example of a component that displays your current location via\nthe geolocation API. The geolocation API is not a part of React, so we need to\nsynchronize the external state of the geolocation API with the internal state of\nour component.`}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"useSyncExternalStore\"}),\" } \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"LocationData\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" { \",(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:\"unavailable\"}),\"'\",\"; \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"geo\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"?:\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"never\"}),\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" { \",(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:\"available\"}),\"'\",\"; \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"geo\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"GeolocationPosition\"}),\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// this variable is our external store!\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"let\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"location\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"LocationData\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { status: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"unavailable\"}),\"'\",\" }\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"subscribeToGeolocation\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"callback\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" () \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"void\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"watchId\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"navigator\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"geolocation\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"watchPosition\"}),\"((\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"position\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"location\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { status: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"available\"}),\"'\",\", geo: \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"position\"}),\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"callback\"}),\"()\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t})\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" () \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"location\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { status: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"unavailable\"}),\"'\",\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"navigator\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"geolocation\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"clearWatch\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"watchId\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getGeolocationSnapshot\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"location\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"MyLocation\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"25\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"location\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useSyncExternalStore\"}),\"(\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"26\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"subscribeToGeolocation\"}),\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"27\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"getGeolocationSnapshot\"}),\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"28\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"location\"}),\".\",(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:\"unavailable\"}),\"'\",\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",children:[\"\t\t\t\t\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Your location is unavailable\"}),\"'\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",children:[\"\t\t\t) \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",children:[\"\t\t\t\t<>\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",children:[\"\t\t\t\t\tYour location is \",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"location\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"geo\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"coords\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"latitude\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"toFixed\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"2\"}),\")\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",children:[\"\t\t\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"\\xB0, \"}),\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",children:[\"\t\t\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"location\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"geo\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"coords\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"longitude\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"toFixed\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"2\"}),\")\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",children:[\"\t\t\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"\\xB0\"}),\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",children:[\"\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",children:[\"\t\t\t)\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:\"Here's the basic API:\"}),`\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:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"snapshot\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useSyncExternalStore\"}),\"(\",`\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:\"subscribe\"}),\",\",`\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:\"getSnapshot\"}),\",\",`\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:\"getServerSnapshot\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// optional\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\")\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.ul,{children:[`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"subscribe\"}),` is a function that takes a callback and returns a cleanup function.\nThe callback is called whenever the external store changes to let React know\nit should call `,(0,a.jsx)(e.code,{children:\"getSnapshot\"}),\" to get the new value.\"]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"getSnapshot\"}),` is a function that returns the current value of the external\nstore.`]}),`\n`,(0,a.jsxs)(e.li,{children:[(0,a.jsx)(e.code,{children:\"getServerSnapshot\"}),` is an optional function that returns the current value of\nthe external store from the server. This is useful for server-side rendering\nand rehydration. If you don't provide this function, then React will render\nthe nearest `,(0,a.jsx)(e.code,{children:\"Suspense\"}),\" boundary \",(0,a.jsx)(e.code,{children:\"fallback\"}),` on the server and then when the\nclient hydrates, it will call `,(0,a.jsx)(e.code,{children:\"getSnapshot\"}),\" to get the current value.\"]}),`\n`]}),`\n`,(0,a.jsx)(\"callout-success\",{class:\"aside\",children:(0,a.jsxs)(e.p,{children:[\"To learn more about server rendering React, check \",(0,a.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/server\",children:`the\ndocs`}),\".\"]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"The \",(0,a.jsx)(e.code,{children:\"Suspense\"}),` Component is something we'll get to in a future workshop. For\nnow, think of it as a way to declaratively handle loading states in React\n(because that's what it is and that's all you need to know for now).`]}),`\n`,(0,a.jsxs)(e.p,{children:[\"Learn more about \",(0,a.jsx)(e.code,{children:\"useSyncExternalStore\"}),` in the\n`,(0,a.jsx)(e.a,{href:\"https://react.dev/reference/react/useSyncExternalStore\",children:\"API documentation\"}),\".\"]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function E(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return N(w);})();\n;return Component;","finishedCode","var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)a(e,n,{get:t[n],enumerable:!0})},i=(e,t,n,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of u(t))!m.call(e,r)&&r!==n&&a(e,r,{get:()=>t[r],enumerable:!(c=l(t,r))||c.enumerable});return e};var g=(e,t,n)=>(n=e!=null?h(f(e)):{},i(t||!e||!e.__esModule?a(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>i(a({},\"__esModule\",{value:!0}),e);var d=w((M,s)=>{s.exports=_jsx_runtime});var E={};_(E,{default:()=>x,frontmatter:()=>k});var o=g(d()),k=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||y(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Sync External State\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-sync-external-state\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work! You now know how to integrate React with external bits of\nchanging state. Well done!`})]})}function x(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function y(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(E);})();\n;return Component;","instructionsEpicVideoEmbeds",[609],"https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-sync-external-state","finishedEpicVideoEmbeds",[612],"https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-sync-external-state",[614,647,670],{"_276":277,"_273":615,"_326":635},{"_20":143,"_168":579,"_601":616,"_22":144,"_24":145,"_603":617,"_618":619,"_621":622,"_629":630,"_632":633,"_274":298,"_276":277,"_9":273,"_634":147},"01.problem.sub","var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),b=(o,e)=>{for(var t in e)a(o,t,{get:e[t],enumerable:!0})},i=(o,e,t,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!w.call(o,r)&&r!==t&&a(o,r,{get:()=>e[r],enumerable:!(s=p(e,r))||s.enumerable});return o};var g=(o,e,t)=>(t=o!=null?u(y(o)):{},i(e||!o||!o.__esModule?a(t,\"default\",{value:o,enumerable:!0}):t,o)),v=o=>i(a({},\"__esModule\",{value:!0}),o);var c=f((q,l)=>{l.exports=_jsx_runtime});var k={};b(k,{default:()=>h,frontmatter:()=>x});var n=g(c()),x=void 0;function d(o){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...o.components},{EpicVideo:t}=e;return t||S(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"useSyncExternalStore\"}),`\n`,(0,n.jsx)(t,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/usesyncexternalstore\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F989} When you have a design that needs to be responsive, you use\n`,(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries\",children:\"media queries\"}),`\nto change the layout of the page based on the size of the screen. Media queries\ncan tell you a lot more than just the width of the page and sometimes you need\nto know whether a media query matches even outside of a CSS context.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"The browser supports a JavaScript API called \",(0,n.jsx)(e.code,{children:\"matchMedia\"}),` that allows you to\nquery the current state of a media query:`]}),`\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:\"prefersDarkModeQuery\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"window\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"matchMedia\"}),\"(\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"(prefers-color-scheme: dark)\"}),\"'\",\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"console\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"log\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"prefersDarkModeQuery\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"matches\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// true if the user prefers dark mode\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Thanks for that Olivia. So yes, our users want a component that displays\nwhether they're on a narrow screen. We're going to build this into a more\ngeneric hook that will allow us to determine any media query's match and also\nkeep the state in sync with the media query. And you're going to need to use\n`,(0,n.jsx)(e.code,{children:\"useSyncExternalStore\"}),\" to do it.\"]}),`\n`,(0,n.jsx)(e.p,{children:`Go ahead and follow the emoji instructions. You'll know you got it right when\nyou resize your screen and the text changes.`}),`\n`,(0,n.jsx)(\"callout-info\",{class:\"aside\",children:(0,n.jsxs)(e.p,{children:[`\\u{1F989} If we really were just trying to display some different text based on the\nscreen size, we could use CSS media queries and not have to write any\nJavaScript at all. But sometimes we need to know the state of a media query in\nJavaScript for more complex interactions, so we're going to use a simple\nexample to demonstrate how to do this to handle those cases and we'll be using\n`,(0,n.jsx)(e.code,{children:\"useSyncExternalStore\"}),\" for that.\"]})})]})}function h(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}function S(o,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+o+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return v(k);})();\n;return Component;","epicVideoEmbeds",[620],"https://www.epicreact.dev/workshops/advanced-react-apis/usesyncexternalstore","test",{"_9":623,"_624":625,"_626":627},"browser","pathname","/app/09.01.problem/test/","testFiles",[628],"sync-media-query.test.ts","dev",{"_9":623,"_624":631},"/app/09.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/09.sync-external/01.problem.sub?view=editor&title=useSyncExternalStore+%28problem%29","solutionName",{"_20":147,"_168":579,"_601":636,"_22":148,"_24":149,"_603":637,"_618":638,"_621":640,"_629":643,"_632":645,"_274":298,"_276":277,"_9":326,"_646":-5},"01.solution.sub","var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),_=(e,n)=>{for(var t in n)s(e,t,{get:n[t],enumerable:!0})},i=(e,n,t,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let o of w(n))!m.call(e,o)&&o!==t&&s(e,o,{get:()=>n[o],enumerable:!(c=l(n,o))||c.enumerable});return e};var j=(e,n,t)=>(t=e!=null?h(x(e)):{},i(n||!e||!e.__esModule?s(t,\"default\",{value:e,enumerable:!0}):t,e)),y=e=>i(s({},\"__esModule\",{value:!0}),e);var d=f((v,a)=>{a.exports=_jsx_runtime});var k={};_(k,{default:()=>u,frontmatter:()=>E});var r=j(d()),E=void 0;function p(e){let n={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:t}=n;return t||g(\"EpicVideo\",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h1,{children:\"useSyncExternalStore\"}),`\n`,(0,r.jsx)(t,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/usesyncexternalstore/solution\"}),`\n`,(0,r.jsx)(n.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great work! Our users will now know whether they're on a narrow screen \\u{1F921}\"})]})}function u(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}function g(e,n){throw new Error(\"Expected \"+(n?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(k);})();\n;return Component;",[639],"https://www.epicreact.dev/workshops/advanced-react-apis/usesyncexternalstore/solution",{"_9":623,"_624":641,"_626":642},"/app/09.01.solution/test/",[628],{"_9":623,"_624":644},"/app/09.01.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/09.sync-external/01.solution.sub?view=editor&title=useSyncExternalStore+%28solution%29","problemName",{"_276":275,"_273":648,"_326":659},{"_20":151,"_168":581,"_601":649,"_22":152,"_24":153,"_603":650,"_618":651,"_621":653,"_629":656,"_632":658,"_274":298,"_276":275,"_9":273,"_634":155},"02.problem.util","var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=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})},c=(a,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of b(e))!y.call(a,l)&&l!==r&&s(a,l,{get:()=>e[l],enumerable:!(o=u(e,l))||o.enumerable});return a};var f=(a,e,r)=>(r=a!=null?h(m(a)):{},c(e||!a||!a.__esModule?s(r,\"default\",{value:a,enumerable:!0}):r,a)),x=a=>c(s({},\"__esModule\",{value:!0}),a);var i=v((D,t)=>{t.exports=_jsx_runtime});var g={};k(g,{default:()=>p,frontmatter:()=>w});var n=f(i()),w=void 0;function d(a){let e={code:\"code\",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:\"Make Store Utility\"}),`\n`,(0,n.jsx)(r,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/make-store-utility\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} We want to make this utility generally useful so we can use it for any media\nquery. So please stick most of our logic in a `,(0,n.jsx)(e.code,{children:\"makeMediaQueryStore\"}),` function\nand have that return a custom hook people can use to keep track of the current\nmedia query's matching state.`]}),`\n`,(0,n.jsx)(e.p,{children:\"It'll be something 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:\"export\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"makeMediaQueryStore\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"mediaQuery\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\") {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// ...\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"useNarrowMediaQuery\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"makeMediaQueryStore\"}),\"(\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"(max-width: 600px)\"}),\"'\",\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(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\":\"8\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"isNarrow\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useNarrowMediaQuery\"}),\"()\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// ...\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"}\",`\n`]})]})})]})}function p(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 x(g);})();\n;return Component;",[652],"https://www.epicreact.dev/workshops/advanced-react-apis/make-store-utility",{"_9":623,"_624":654,"_626":655},"/app/09.02.problem/test/",[628],{"_9":623,"_624":657},"/app/09.02.problem/","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/09.sync-external/02.problem.util?view=editor&title=Make+Store+Utility+%28problem%29",{"_20":155,"_168":581,"_601":660,"_22":156,"_24":157,"_603":661,"_618":662,"_621":664,"_629":667,"_632":669,"_274":298,"_276":275,"_9":326,"_646":-5},"02.solution.util","var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),y=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},a=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of l(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=m(t,r))||s.enumerable});return e};var _=(e,t,n)=>(n=e!=null?h(f(e)):{},a(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>a(i({},\"__esModule\",{value:!0}),e);var d=w((v,c)=>{c.exports=_jsx_runtime});var g={};y(g,{default:()=>p,frontmatter:()=>b});var o=_(d()),b=void 0;function u(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:\"Make Store Utility\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/make-store-utility/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great! With that we now have a reusable utility and can use this to subscribe\nto any media query!`})]})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(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(g);})();\n;return Component;",[663],"https://www.epicreact.dev/workshops/advanced-react-apis/make-store-utility/solution",{"_9":623,"_624":665,"_626":666},"/app/09.02.solution/test/",[628],{"_9":623,"_624":668},"/app/09.02.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/09.sync-external/02.solution.util?view=editor&title=Make+Store+Utility+%28solution%29",{"_276":289,"_273":671,"_326":682},{"_20":159,"_168":583,"_601":672,"_22":160,"_24":161,"_603":673,"_618":674,"_621":676,"_629":679,"_632":681,"_274":298,"_276":289,"_9":273,"_634":163},"03.problem.ssr","var Component=(()=>{var b=Object.create;var s=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var a in e)s(n,a,{get:e[a],enumerable:!0})},c=(n,e,a,l)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of y(e))!m.call(n,o)&&o!==a&&s(n,o,{get:()=>e[o],enumerable:!(l=v(e,o))||l.enumerable});return n};var w=(n,e,a)=>(a=n!=null?b(u(n)):{},c(e||!n||!n.__esModule?s(a,\"default\",{value:n,enumerable:!0}):a,n)),k=n=>c(s({},\"__esModule\",{value:!0}),n);var i=g((x,t)=>{t.exports=_jsx_runtime});var N={};f(N,{default:()=>p,frontmatter:()=>E});var r=w(i()),E=void 0;function d(n){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...n.components},{EpicVideo:a,PrevDiffLink:l}=e;return a||h(\"EpicVideo\",!0),l||h(\"PrevDiffLink\",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h1,{children:\"Handling Server Rendering\"}),`\n`,(0,r.jsx)(a,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/handling-server-rendering\"}),`\n`,(0,r.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} We don't currently do any server rendering, but in the future we may want to\nand this requires some special handling with `,(0,r.jsx)(e.code,{children:\"useSyncExternalStore\"}),\".\"]}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u{1F9DD}\\u200D\\u2642\\uFE0F \",(0,r.jsx)(l,{children:\"I've simulated a server rendering environment\"}),` by\nadding some code to the bottom of our file. First, we render the `,(0,r.jsx)(e.code,{children:\"\"}),` to a\nstring, then we set that to the `,(0,r.jsx)(e.code,{children:\"innerHTML\"}),\" of our \",(0,r.jsx)(e.code,{children:\"rootEl\"}),`. Then we call\n`,(0,r.jsx)(e.code,{children:\"hydrateRoot\"}),\" to rehydrate our application.\"]}),`\n`,(0,r.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,r.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"rootEl\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"document\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createElement\"}),\"(\",\"'\",(0,r.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"div\"}),\"'\",\")\",`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"document\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"body\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"append\"}),\"(\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"rootEl\"}),\")\",`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,r.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// simulate server rendering\"}),`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"rootEl\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"innerHTML\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" (\",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\"(\",\"'\",(0,r.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react-dom/server\"}),\"'\",\")).\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"renderToString\"}),\"(<\",(0,r.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"App\"}),\" />)\",`\n`]}),(0,r.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:`\n`}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[(0,r.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// simulate taking a while for the JS to load...\"}),`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"await\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Promise\"}),\"((\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"resolve\"}),\") \",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setTimeout\"}),\"(\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"resolve\"}),\", \",(0,r.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1000\"}),\"))\",`\n`]}),(0,r.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:`\n`}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"ReactDOM\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"hydrateRoot\"}),\"(\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"rootEl\"}),\", <\",(0,r.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"App\"}),\" />)\",`\n`]})]})}),`\n`,(0,r.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} This is a bit of a hack, but it's a good way to simulate server rendering\nand ensure that our application works in a server rendering situation.`}),`\n`,(0,r.jsxs)(e.p,{children:[`Because the server won't know whether a media query matches, we can't use the\n`,(0,r.jsx)(e.code,{children:\"getServerSnapshot()\"}),\" argument of \",(0,r.jsx)(e.code,{children:\"useSyncExternalStore\"}),`. Instead, we'll leave\nthat argument off, and wrap our `,(0,r.jsx)(e.code,{children:\"\"}),` in a\n`,(0,r.jsx)(e.a,{href:\"https://react.dev/reference/react/Suspense\",children:(0,r.jsx)(e.code,{children:\"\"})}),` component with a\nfallback of `,(0,r.jsx)(e.code,{children:'\"\"'}),\" (we won't show anything until the client hydrates).\"]}),`\n`,(0,r.jsxs)(e.p,{children:[`With this, you'll notice there's an error in the console. Nothing's technically\nwrong, but React logs this in this situation (I honestly personally disagree\nthat they should do this, but \\u{1F937}\\u200D\\u2642\\uFE0F). So as extra credit, you can add an\n`,(0,r.jsx)(e.code,{children:\"onRecoverableError\"}),\" function to the \",(0,r.jsx)(e.code,{children:\"hydrateRoot\"}),` call and if the given error\nincludes the string `,(0,r.jsx)(e.code,{children:\"'Missing getServerSnapshot'\"}),` then you can return,\notherwise, log the error.`]}),`\n`,(0,r.jsx)(e.p,{children:\"Good luck!\"}),`\n`,(0,r.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"hydrateRoot\"}),\" } \",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,r.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react-dom/client\"}),\"'\",`\n`]}),(0,r.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:`\n`}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,r.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"root\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"hydrateRoot\"}),\"(\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"document\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getElementById\"}),\"(\",\"'\",(0,r.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"root\"}),\"'\",\"), <\",(0,r.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"App\"}),\" />, {\",`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onRecoverableError\"}),\": (\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\", \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"errorInfo\"}),\") \",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"console\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"error\"}),\"(\",\"'\",(0,r.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Caught error\"}),\"'\",\", \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\", \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"cause\"}),\", \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"errorInfo\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"componentStack\"}),\")\",`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t},\",`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"})\",`\n`]})]})})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(d,{...n})}):d(n)}function h(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(N);})();\n;return Component;",[675],"https://www.epicreact.dev/workshops/advanced-react-apis/handling-server-rendering",{"_9":623,"_624":677,"_626":678},"/app/09.03.problem/test/",[628],{"_9":623,"_624":680},"/app/09.03.problem/","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/09.sync-external/03.problem.ssr?view=editor&title=Handling+Server+Rendering+%28problem%29",{"_20":163,"_168":583,"_601":683,"_22":164,"_24":165,"_603":684,"_618":685,"_621":687,"_629":690,"_632":692,"_274":298,"_276":289,"_9":326,"_646":-5},"03.solution.ssr","var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var r in e)i(n,r,{get:e[r],enumerable:!0})},s=(n,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of f(e))!m.call(n,o)&&o!==r&&i(n,o,{get:()=>e[o],enumerable:!(c=u(e,o))||c.enumerable});return n};var k=(n,e,r)=>(r=n!=null?l(w(n)):{},s(e||!n||!n.__esModule?i(r,\"default\",{value:n,enumerable:!0}):r,n)),_=n=>s(i({},\"__esModule\",{value:!0}),n);var a=g((E,d)=>{d.exports=_jsx_runtime});var y={};x(y,{default:()=>p,frontmatter:()=>j});var t=k(a()),j=void 0;function h(n){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:r}=e;return r||v(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Handling Server Rendering\"}),`\n`,(0,t.jsx)(r,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/handling-server-rendering/solution\"}),`\n`,(0,t.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work! You now know how to properly handle server rendering of something\nwe don't know until the client-render when it comes to an external store like\nthis.`}),`\n`,(0,t.jsxs)(e.p,{children:[`\\u{1F989} There are more things you can do for different cases (like the user's\nlight/dark mode preference) to offer a better user experience. Check out\n`,(0,t.jsx)(e.a,{href:\"https://www.npmjs.com/package/@epic-web/client-hints\",children:(0,t.jsx)(e.code,{children:\"@epic-web/client-hints\"})}),`\nto see how you can handle this even better if you're interested.`]})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(h,{...n})}):h(n)}function v(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(y);})();\n;return Component;",[686],"https://www.epicreact.dev/workshops/advanced-react-apis/handling-server-rendering/solution",{"_9":623,"_624":688,"_626":689},"/app/09.03.solution/test/",[628],{"_9":623,"_624":691},"/app/09.03.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/09.sync-external/03.solution.ssr?view=editor&title=Handling+Server+Rendering+%28solution%29",[694,699,704],{"_20":143,"_168":579,"_601":616,"_22":144,"_24":145,"_603":617,"_618":695,"_621":696,"_629":698,"_632":633,"_274":298,"_276":277,"_9":273,"_634":147},[620],{"_9":623,"_624":625,"_626":697},[628],{"_9":623,"_624":631},{"_20":151,"_168":581,"_601":649,"_22":152,"_24":153,"_603":650,"_618":700,"_621":701,"_629":703,"_632":658,"_274":298,"_276":275,"_9":273,"_634":155},[652],{"_9":623,"_624":654,"_626":702},[628],{"_9":623,"_624":657},{"_20":159,"_168":583,"_601":672,"_22":160,"_24":161,"_603":673,"_618":705,"_621":706,"_629":708,"_632":681,"_274":298,"_276":289,"_9":273,"_634":163},[675],{"_9":623,"_624":677,"_626":707},[628],{"_9":623,"_624":680},[710,715,720],{"_20":147,"_168":579,"_601":636,"_22":148,"_24":149,"_603":637,"_618":711,"_621":712,"_629":714,"_632":645,"_274":298,"_276":277,"_9":326,"_646":-5},[639],{"_9":623,"_624":641,"_626":713},[628],{"_9":623,"_624":644},{"_20":155,"_168":581,"_601":660,"_22":156,"_24":157,"_603":661,"_618":716,"_621":717,"_629":719,"_632":669,"_274":298,"_276":275,"_9":326,"_646":-5},[663],{"_9":623,"_624":665,"_626":718},[628],{"_9":623,"_624":668},{"_20":163,"_168":583,"_601":683,"_22":164,"_24":165,"_603":684,"_618":721,"_621":722,"_629":724,"_632":692,"_274":298,"_276":289,"_9":326,"_646":-5},[686],{"_9":623,"_624":688,"_626":723},[628],{"_9":623,"_624":691},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=Advanced%20React%20APIs%20%F0%9F%94%A5&entry.428900931=Sync%20External%20State","epicVideoInfosPromise",["P",728],"exerciseFinished",{"_731":732,"_24":733},"file","/myapp/workshop-content/exercises/09.sync-external/FINISHED.mdx","exercises/09.sync-external/FINISHED.mdx","prevStepLink",{"_736":737,"_738":739},"to","/exercise/09/03/solution","aria-label","Handling Server Rendering (solution)","nextStepLink",{"_736":742,"_738":743},"/finished","Finished! 🎉","routes/_app+/exercise+/_layout","actionData","errors"]

09. Sync External State/Elaboration