[{"_1":2,"_741":-5,"_742":-5},"loaderData",{"_3":4,"_460":461,"_626":627},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_166":167,"_169":170,"_171":16,"_172":173,"_230":175,"_231":177,"_178":179,"_232":233,"_254":255,"_279":-5,"_280":-7,"_281":282},"userId",{"_7":8,"_9":10},"id","aw22goiwqomreee1pcjy4hli","type","cookie.clientId","preferences","progress",[],"user","userHasAccess",false,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,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","repoUpdates",{"_168":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_174":175,"_176":177,"_178":179,"_185":186,"_203":204,"_206":207,"_208":209,"_210":211,"_214":215,"_220":221,"_224":225,"_226":227,"_228":229},"title","Advanced React APIs 🔥","subtitle","Learn the more advanced React APIs and different use cases to enable great user experiences.","instructor",{"_20":180,"_181":182,"_183":184},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","advanced-react-apis","discordChannelId","1285244676286189569","discordTags",[201,202],"1285246046498328627","1285245763428810815","onboardingVideo",[205],"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",{"_212":213},"view","editor","forms",{"_216":217,"_218":219},"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",{"_222":223},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_234":235,"_236":237,"_238":239,"_240":207,"_241":209,"_242":223,"_243":244,"_245":246,"_247":248,"_249":223,"_250":251,"_252":253},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_WORKSHOP_INSTANCE_ID","4e1570b81d1baf3d16bd3a08ece570cb","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","6.40.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","543f2d8cad9cac575698f3b9a9bdb16c4b095ea8e6eb5f8ac8e0fa1964d59249","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_256":257,"_258":259,"_260":261,"_262":263,"_264":263,"_265":266,"_273":274,"_275":276,"_277":225,"_278":223},"protocol","http:","hostname","advanced-apis.epicreact.dev","port","","origin","http://advanced-apis.epicreact.dev","domain","hints",{"_267":268,"_269":270,"_271":272},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/04/finished","session",{"_267":-5},"separator","online","toast","confettiId","presence",{"_283":284},"users",[285,303,311,320,327,335,343,351,359,367,374,383,390,398,405,412,420,427,434,441,448,452,457],{"_7":286,"_287":223,"_288":289,"_290":291,"_20":292,"_293":294},"e252bdbd-de16-43d1-a255-54dc12363e57","hasAccess","imageUrlSmall","https://cdn.discordapp.com/avatars/402498450563792906/8368f5911b47f0cd3d5911c7bcdd01af.png?size=64","imageUrlLarge","https://cdn.discordapp.com/avatars/402498450563792906/8368f5911b47f0cd3d5911c7bcdd01af.png?size=512","Fahad","location",{"_230":295,"_262":296,"_218":297},"MCP UI 🪟","http://localhost:5639",{"_9":298,"_299":300,"_301":302},"problem","exerciseNumber",3,"stepNumber",1,{"_7":304,"_287":223,"_288":305,"_290":306,"_20":307,"_293":308},"7e0e5e64-db3c-4e1a-93ab-4d02aee98a84","https://avatars.githubusercontent.com/u/22347704?v=4&size=64","https://avatars.githubusercontent.com/u/22347704?v=4&size=512","frankfullstack",{"_230":295,"_262":296,"_218":309},{"_9":298,"_299":300,"_301":310},2,{"_7":312,"_287":223,"_288":313,"_290":314,"_20":315,"_293":316},"297a4c4e-8f5e-428a-9a5b-5cb54ad37b78","https://avatars.githubusercontent.com/u/2852660?v=4&size=64","https://avatars.githubusercontent.com/u/2852660?v=4&size=512","Minh Nguyen",{"_230":317,"_262":296,"_218":318},"MCP Auth 🔐",{"_9":298,"_299":319,"_301":300},5,{"_7":321,"_287":223,"_288":322,"_290":323,"_20":324,"_293":325},"692eea5a-c75a-4f1f-8de9-b34b85e3d392","https://cdn.discordapp.com/avatars/316066013969907715/6183a2142ad6efe60e4f63c699c1ee5f.png?size=64","https://cdn.discordapp.com/avatars/316066013969907715/6183a2142ad6efe60e4f63c699c1ee5f.png?size=512","Wutthipong Bunyafakpol",{"_230":317,"_262":296,"_218":326},{"_299":302},{"_7":328,"_287":223,"_288":329,"_290":330,"_20":331,"_293":332},"2c407dc2-538b-4cd3-b766-6632ecefd8d7","https://www.gravatar.com/avatar/252497f174e864700d2c231db2178316?size=64&default=identicon","https://www.gravatar.com/avatar/252497f174e864700d2c231db2178316?size=512&default=identicon","Abdessattar Jaballah",{"_230":175,"_262":296,"_218":333},{"_299":334},6,{"_7":336,"_287":223,"_288":337,"_290":338,"_20":339,"_293":340},"1c10476e-9f69-4b04-8a87-d639f434ebc6","https://www.gravatar.com/avatar/7a43df198f62049947a7f92f6a6297f3?size=64&default=identicon","https://www.gravatar.com/avatar/7a43df198f62049947a7f92f6a6297f3?size=512&default=identicon","Mehmet Çalışkan",{"_230":341,"_262":296,"_218":342},"Web Authentication 🔐",{"_9":298,"_299":302,"_301":302},{"_7":344,"_287":223,"_288":345,"_290":346,"_20":347,"_293":348},"1ba0a5c1-ed9f-40bc-968b-c5a32fbc6a0b","https://cdn.discordapp.com/avatars/907352201511469096/a446641c21a308259f121724ccef166c.png?size=64","https://cdn.discordapp.com/avatars/907352201511469096/a446641c21a308259f121724ccef166c.png?size=512","Nicolás Mejía",{"_230":317,"_262":349,"_218":350},"http://localhost:5640",{"_9":298,"_299":300,"_301":302},{"_7":352,"_287":223,"_288":353,"_290":354,"_20":355,"_293":356},"16a4bbe7-a163-4240-933a-720e952c210e","https://www.gravatar.com/avatar/9a8329ced26e545382c01e8d24fb0b7d?size=64&default=identicon","https://www.gravatar.com/avatar/9a8329ced26e545382c01e8d24fb0b7d?size=512&default=identicon","Dimiter Radonov",{"_230":357,"_262":296,"_218":358},"React Hooks 🎣",{"_299":300},{"_7":360,"_287":223,"_288":361,"_290":362,"_20":363,"_293":364},"cd6712f4-70b0-46c4-97c1-0a8a0dd0afb5","https://cdn.discordapp.com/avatars/698343975836188692/3cb59ca8c5e940a949b018f97e912728.png?size=64","https://cdn.discordapp.com/avatars/698343975836188692/3cb59ca8c5e940a949b018f97e912728.png?size=512","Ruben",{"_230":365,"_262":296,"_218":366},"Advanced MCP Features 🐡",{"_9":298,"_299":319,"_301":310},{"_7":368,"_287":223,"_288":369,"_290":370,"_20":371,"_293":372},"653e10e4-f405-42d0-bfd1-6a89deb0a0a5","https://www.gravatar.com/avatar/3caf0eb19f46da6fa60348ef1f6d012b?size=64&default=identicon","https://www.gravatar.com/avatar/3caf0eb19f46da6fa60348ef1f6d012b?size=512&default=identicon","Marvin",{"_230":365,"_262":296,"_218":373},{"_9":298,"_299":300,"_301":302},{"_7":375,"_287":223,"_288":376,"_290":377,"_20":378,"_293":379},"c0598a97-02da-42a8-9138-c316ed10dd38","https://cdn.discordapp.com/avatars/520259965022109697/2d82acce05f0a2c5cbebaccf52da5a2f.png?size=64","https://cdn.discordapp.com/avatars/520259965022109697/2d82acce05f0a2c5cbebaccf52da5a2f.png?size=512","Andrea",{"_230":380,"_262":296,"_218":381},"MCP Fundamentals 🧱",{"_9":382,"_299":310,"_301":300},"solution",{"_7":384,"_287":223,"_288":385,"_290":386,"_20":387,"_293":388},"59923a5a-2d65-422e-88d5-e6acbbf5f758","https://avatars.githubusercontent.com/u/578035?v=4&size=64","https://avatars.githubusercontent.com/u/578035?v=4&size=512","Dong Chen",{"_230":295,"_262":296,"_218":389},{"_9":382,"_299":319,"_301":310},{"_7":391,"_287":223,"_288":392,"_290":393,"_20":394,"_293":395},"7d1c5155-1b77-471a-b04e-283978df268b","https://www.gravatar.com/avatar/1e165c546498e8e18abd2c9556922fc6?size=64&default=identicon","https://www.gravatar.com/avatar/1e165c546498e8e18abd2c9556922fc6?size=512&default=identicon","Rostyslav Bovonenko",{"_230":396,"_262":296,"_218":397},"Mocking Techniques in Vitest",{"_9":298,"_299":300,"_301":310},{"_7":399,"_287":223,"_288":400,"_290":401,"_20":402,"_293":403},"c900d5f6-5ba7-4aff-9d7b-12841037c9ab","https://www.gravatar.com/avatar/d5bde1625b163635c30b416a2aba6b95?size=64&default=identicon","https://www.gravatar.com/avatar/d5bde1625b163635c30b416a2aba6b95?size=512&default=identicon","MYKYTA IVANCHENKO",{"_230":404,"_262":296},"React Fundamentals ⚛",{"_7":406,"_287":223,"_288":407,"_290":408,"_20":409,"_293":410},"3cde2475-9485-4d77-8445-01e4aceb66e2","https://avatars.githubusercontent.com/u/38445592?v=4&size=64","https://avatars.githubusercontent.com/u/38445592?v=4&size=512","Brice",{"_230":380,"_262":296,"_218":411},{"_9":298,"_299":319,"_301":310},{"_7":413,"_287":223,"_288":414,"_290":415,"_20":416,"_293":417},"a7fd98bd-77b9-4e08-92df-1f7ac71c94da","https://cdn.discordapp.com/avatars/592944375382671370/b5c7fb365472b8a6a29f4ce219027ab4.png?size=64","https://cdn.discordapp.com/avatars/592944375382671370/b5c7fb365472b8a6a29f4ce219027ab4.png?size=512","shadab",{"_230":295,"_262":296,"_218":418},{"_9":298,"_299":419,"_301":310},4,{"_7":421,"_287":223,"_288":422,"_290":423,"_20":424,"_293":425},"ab5eeb0d-85c5-4786-8a07-158a35b9e859","https://www.gravatar.com/avatar/d5fa67817f0cf473fda211f5a3b057dd?size=64&default=identicon","https://www.gravatar.com/avatar/d5fa67817f0cf473fda211f5a3b057dd?size=512&default=identicon","Wojtek",{"_230":380,"_262":296,"_218":426},{"_9":298,"_299":300,"_301":419},{"_7":428,"_287":223,"_288":429,"_290":430,"_20":431,"_293":432},"9c0adb6b-428d-4de1-a667-1fd50c45ffc0","https://cdn.discordapp.com/avatars/1102814201120034856/c68235f228e71de66418cb86876248d9.png?size=64","https://cdn.discordapp.com/avatars/1102814201120034856/c68235f228e71de66418cb86876248d9.png?size=512","Rednar Rosique",{"_230":317,"_262":296,"_218":433},{"_299":302},{"_7":435,"_287":223,"_288":436,"_290":437,"_20":-5,"_293":438},"08cbe4d8-3ba0-427e-aaa0-394ea4e52401","https://www.gravatar.com/avatar/919d3cae840aec75489f804e4c13c41f?size=64&default=identicon","https://www.gravatar.com/avatar/919d3cae840aec75489f804e4c13c41f?size=512&default=identicon",{"_230":439,"_262":296,"_218":440},"Advanced React Patterns 🤯",{"_299":334},{"_7":442,"_287":223,"_288":443,"_290":444,"_20":-5,"_293":445},"b6907aae-5b97-43bf-8299-6dc49cce3a01","https://www.gravatar.com/avatar/6c198f4955a46f29281e55f6f1f01e54?size=64&default=identicon","https://www.gravatar.com/avatar/6c198f4955a46f29281e55f6f1f01e54?size=512&default=identicon",{"_230":404,"_262":296,"_218":446},{"_9":382,"_299":447,"_301":419},7,{"_7":449,"_293":450},"yi0i7meapmhsad6vmdwf8dps",{"_230":439,"_262":296,"_218":451},{"_9":298,"_299":334,"_301":310},{"_7":453,"_293":454},"iify6alynb3f7hz9g6f7dmxk",{"_230":455,"_262":296,"_218":456},"Full Stack Foundations 🔭",{"_299":300},{"_7":8,"_293":458},{"_230":175,"_262":263,"_218":459},{"_299":419,"_301":-5,"_9":-5},"routes/_app+/_layout",{"_230":175,"_462":463,"_622":623,"_625":16},"exercises",[464,508,519,536,553,564,575,586,598],{"_299":302,"_174":465,"_466":467,"_480":481,"_488":489},"Advanced State Management","solutions",[468,470,472,474,476,478],{"_301":302,"_174":469,"_20":27},"New state",{"_301":310,"_174":471,"_20":35},"Previous State",{"_301":300,"_174":473,"_20":43},"State Object",{"_301":419,"_174":475,"_20":51},"Action Function",{"_301":319,"_174":477,"_20":59},"Traditional Reducer",{"_301":334,"_174":479,"_20":67},"Real World","problems",[482,483,484,485,486,487],{"_301":302,"_174":469,"_20":21},{"_301":310,"_174":471,"_20":31},{"_301":300,"_174":473,"_20":39},{"_301":419,"_174":475,"_20":47},{"_301":319,"_174":477,"_20":55},{"_301":334,"_174":479,"_20":63},"steps",[490,493,496,499,502,505],{"_301":302,"_174":469,"_20":21,"_298":491,"_382":492},{"_20":21,"_174":469},{"_20":27,"_174":469},{"_301":310,"_174":471,"_20":31,"_298":494,"_382":495},{"_20":31,"_174":471},{"_20":35,"_174":471},{"_301":300,"_174":473,"_20":39,"_298":497,"_382":498},{"_20":39,"_174":473},{"_20":43,"_174":473},{"_301":419,"_174":475,"_20":47,"_298":500,"_382":501},{"_20":47,"_174":475},{"_20":51,"_174":475},{"_301":319,"_174":477,"_20":55,"_298":503,"_382":504},{"_20":55,"_174":477},{"_20":59,"_174":477},{"_301":334,"_174":479,"_20":63,"_298":506,"_382":507},{"_20":63,"_174":479},{"_20":67,"_174":479},{"_299":310,"_174":509,"_466":510,"_480":513,"_488":515},"State Optimization",[511],{"_301":302,"_174":512,"_20":75},"Optimize state updates",[514],{"_301":302,"_174":512,"_20":71},[516],{"_301":302,"_174":512,"_20":71,"_298":517,"_382":518},{"_20":71,"_174":512},{"_20":75,"_174":512},{"_299":300,"_174":520,"_466":521,"_480":526,"_488":529},"Custom Hooks",[522,524],{"_301":302,"_174":523,"_20":83},"Hook Function",{"_301":310,"_174":525,"_20":91},"useCallback",[527,528],{"_301":302,"_174":523,"_20":79},{"_301":310,"_174":525,"_20":87},[530,533],{"_301":302,"_174":523,"_20":79,"_298":531,"_382":532},{"_20":79,"_174":523},{"_20":83,"_174":523},{"_301":310,"_174":525,"_20":87,"_298":534,"_382":535},{"_20":87,"_174":525},{"_20":91,"_174":525},{"_299":419,"_174":537,"_466":538,"_480":543,"_488":546},"Shared Context",[539,541],{"_301":302,"_174":540,"_20":99},"Context Provider",{"_301":310,"_174":542,"_20":107},"Context Hook",[544,545],{"_301":302,"_174":540,"_20":95},{"_301":310,"_174":542,"_20":103},[547,550],{"_301":302,"_174":540,"_20":95,"_298":548,"_382":549},{"_20":95,"_174":540},{"_20":99,"_174":540},{"_301":310,"_174":542,"_20":103,"_298":551,"_382":552},{"_20":103,"_174":542},{"_20":107,"_174":542},{"_299":319,"_174":554,"_466":555,"_480":558,"_488":560},"Portals",[556],{"_301":302,"_174":557,"_20":115},"createPortal",[559],{"_301":302,"_174":557,"_20":111},[561],{"_301":302,"_174":557,"_20":111,"_298":562,"_382":563},{"_20":111,"_174":557},{"_20":115,"_174":557},{"_299":334,"_174":565,"_466":566,"_480":569,"_488":571},"Layout Computation",[567],{"_301":302,"_174":568,"_20":123},"useLayoutEffect",[570],{"_301":302,"_174":568,"_20":119},[572],{"_301":302,"_174":568,"_20":119,"_298":573,"_382":574},{"_20":119,"_174":568},{"_20":123,"_174":568},{"_299":447,"_174":576,"_466":577,"_480":580,"_488":582},"Imperative Handles",[578],{"_301":302,"_174":579,"_20":131},"useImperativeHandle",[581],{"_301":302,"_174":579,"_20":127},[583],{"_301":302,"_174":579,"_20":127,"_298":584,"_382":585},{"_20":127,"_174":579},{"_20":131,"_174":579},{"_299":587,"_174":588,"_466":589,"_480":592,"_488":594},8,"Focus Management",[590],{"_301":302,"_174":591,"_20":139},"flushSync",[593],{"_301":302,"_174":591,"_20":135},[595],{"_301":302,"_174":591,"_20":135,"_298":596,"_382":597},{"_20":135,"_174":591},{"_20":139,"_174":591},{"_299":599,"_174":600,"_466":601,"_480":608,"_488":612},9,"Sync External State",[602,604,606],{"_301":302,"_174":603,"_20":147},"useSyncExternalStore",{"_301":310,"_174":605,"_20":155},"Make Store Utility",{"_301":300,"_174":607,"_20":163},"Handling Server Rendering",[609,610,611],{"_301":302,"_174":603,"_20":143},{"_301":310,"_174":605,"_20":151},{"_301":300,"_174":607,"_20":159},[613,616,619],{"_301":302,"_174":603,"_20":143,"_298":614,"_382":615},{"_20":143,"_174":603},{"_20":147,"_174":603},{"_301":310,"_174":605,"_20":151,"_298":617,"_382":618},{"_20":151,"_174":605},{"_20":155,"_174":605},{"_301":300,"_174":607,"_20":159,"_298":620,"_382":621},{"_20":159,"_174":607},{"_20":163,"_174":607},"playground",{"_624":-5,"_299":-2,"_301":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_628":629,"_230":175,"_218":630,"_723":724,"_725":726,"_727":728,"_732":733,"_738":739},"articleId","workshop-advanced-react-apis-4-finished",{"_22":631,"_299":419,"_632":633,"_174":537,"_634":635,"_636":637,"_638":639,"_641":642,"_488":644,"_480":701,"_466":712},"/myapp/workshop-content/exercises/04.context","dirName","04.context","instructionsCode","var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var l in e)r(a,l,{get:e[l],enumerable:!0})},c=(a,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of u(e))!v.call(a,s)&&s!==l&&r(a,s,{get:()=>e[s],enumerable:!(o=p(e,s))||o.enumerable});return a};var N=(a,e,l)=>(l=a!=null?b(m(a)):{},c(e||!a||!a.__esModule?r(l,\"default\",{value:a,enumerable:!0}):l,a)),C=a=>c(r({},\"__esModule\",{value:!0}),a);var i=y((E,t)=>{t.exports=_jsx_runtime});var D={};k(D,{default:()=>h,frontmatter:()=>f});var n=N(i()),f=void 0;function d(a){let e={a:\"a\",code:\"code\",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:\"Shared Context\"}),`\n`,(0,n.jsx)(l,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-shared-context\"}),`\n`,(0,n.jsx)(e.p,{children:\"Let's say you have the following custom hook:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCount\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setCount\"}),\"] \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"increment\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" () => setCount((c) => c + 1)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",\"return\",\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" }\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"Then, you have two components, one to display the count and another to increment it:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"DisplayCount\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCount\"}),\"()\",`\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\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\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(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"IncrementCount\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCount\"}),\"()\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"button\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onClick\"}),(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:\"increment\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">Increment\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"}\",`\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:\"DisplayCount\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"IncrementCount\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[`If you tried that you'd find that clicking the increment button doesn't work.\nThat's because each component is creating its own instance of the state in the\n`,(0,n.jsx)(e.code,{children:\"useCount\"}),` hook, so they're not sharing the same state. In fact, even if you\ncall the hook multiple times in the same component, you'd still get different\ninstances of the state.`]}),`\n`,(0,n.jsx)(e.p,{children:`Often this is what you want. You want the isolation. But sometimes, you want to\nhave that state be shared between the components.`}),`\n`,(0,n.jsxs)(e.p,{children:[`Often you solve this problem by\n`,(0,n.jsx)(e.a,{href:\"https://react.dev/learn/sharing-state-between-components\",children:\"lifting state\"}),`, but\nsometimes that's not very practical because you're many layers away from the\ncomponents that need to share the state or perhaps there's a router involved and\nyou aren't the one rendering the components and don't have an easy way to pass\nprops down.`]}),`\n`,(0,n.jsx)(e.p,{children:`Another situation where you would use this is if you wanted to implicitly share\nstate between components so consumers of those components can use them without\nhaving to know about the state. This is a pattern known as \"Compound Components\"\nand we'll learn more about that in the Compound Components exercise of the\nAdvanced React Patterns workshop.`}),`\n`,(0,n.jsxs)(e.p,{children:[`In these cases, you can use\n`,(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/createContext\",children:\"context\"}),`. React router\nactually has a built-in feature that allows you to pass state into context and\naccess that value in child routes called\n`,(0,n.jsx)(e.a,{href:\"https://reactrouter.com/en/main/hooks/use-outlet-context\",children:(0,n.jsx)(e.code,{children:\"outletContext\"})}),`\nand in my apps this is what I use most of the time. However, sometimes I do\nstill reach for context.`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's how you would use context to share state between components:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"createContext\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"use\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountContextType\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"number\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"increment\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" () \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"void\"}),`\n`]}),(0,n.jsxs)(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(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"CountContext\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createContext\"}),\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountContextType\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"null\"}),\">(\",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\")\",`\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(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"CountProvider\"}),\"({ \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\" }\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ReactNode\"}),\" }) {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setCount\"}),\"] \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"increment\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" () \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCount\"}),\"((\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"value\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" }\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountContext\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(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:\"value\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCount\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"context\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"use\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"CountContext\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"!\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"context\"}),\") {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"throw\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Error\"}),\"(\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"useCount must be used within a CountProvider\"}),\"'\",\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"\t}\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"context\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"DisplayCount\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCount\"}),\"()\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"IncrementCount\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCount\"}),\"()\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"button\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onClick\"}),(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:\"increment\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">Increment\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",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\":\"35\",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\":\"36\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountProvider\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",children:[\"\t\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\":\"38\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"DisplayCount\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"39\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"IncrementCount\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",children:[\"\t\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"CountProvider\"}),` component is a context provider. It's a component that\nhandles the state and provides it to the components that need it. The `,(0,n.jsx)(e.code,{children:\"useCount\"}),`\nhook is a custom hook that uses the `,(0,n.jsx)(e.code,{children:\"use\"}),` hook to access the context. The\n`,(0,n.jsx)(e.code,{children:\"DisplayCount\"}),\" and \",(0,n.jsx)(e.code,{children:\"IncrementCount\"}),\" components are the consumers of the context.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Whenever the \",(0,n.jsx)(e.code,{children:\"value\"}),` prop of the context provider changes, all the components\nthat consume the context value will rerender to get those updates. And they will\nall be referencing the same state.`]}),`\n`,(0,n.jsxs)(e.p,{children:[`Providers can be nested and the closest provider to the consuming component will\nbe the one that provides the value. If there is no provider, the default value\nwill be used. In this case, the default value is `,(0,n.jsx)(e.code,{children:\"null\"}),` and we throw an error if\nthe hook is used without a provider. This is generally a good practice, but\nthere are use cases where you might want to provide a default value. You'll know\nwhen you need to do that, but most of the time you'll want to require a context\nprovider.`]}),`\n`,(0,n.jsx)(\"callout-warning\",{children:(0,n.jsxs)(e.p,{children:[\"If you work in a React app on \",(0,n.jsx)(e.code,{children:\"<= 18.2\"}),\", you'll use \",(0,n.jsx)(e.code,{children:\"useContext\"}),` instead of\nthe more versatile `,(0,n.jsx)(e.code,{children:\"use\"}),` hook. In the workshop we're using an experimental\nversion of React that has this feature.`]})})]})}function h(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 C(D);})();\n;return Component;","finishedCode","var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},a=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of l(t))!m.call(e,r)&&r!==o&&s(e,r,{get:()=>t[r],enumerable:!(c=x(t,r))||c.enumerable});return e};var _=(e,t,o)=>(o=e!=null?u(f(e)):{},a(t||!e||!e.__esModule?s(o,\"default\",{value:e,enumerable:!0}):o,e)),k=e=>a(s({},\"__esModule\",{value:!0}),e);var d=w((E,i)=>{i.exports=_jsx_runtime});var g={};j(g,{default:()=>h,frontmatter:()=>y});var n=_(d()),y=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||b(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"Shared Context\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-shared-context\"}),`\n`,(0,n.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great job! You now know how to properly use context to share state across\nparts of the application. This should serve you well.`})]})}function h(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}function b(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(g);})();\n;return Component;","instructionsEpicVideoEmbeds",[640],"https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-shared-context","finishedEpicVideoEmbeds",[643],"https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-shared-context",[645,678],{"_301":302,"_298":646,"_382":666},{"_20":95,"_174":540,"_632":647,"_22":96,"_24":97,"_634":648,"_649":650,"_652":653,"_660":661,"_663":664,"_299":419,"_301":302,"_9":298,"_665":99},"01.problem.provider","var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)a(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of f(e))!x.call(t,i)&&i!==o&&a(t,i,{get:()=>e[i],enumerable:!(r=w(e,i))||r.enumerable});return t};var k=(t,e,o)=>(o=t!=null?u(m(t)):{},c(e||!t||!t.__esModule?a(o,\"default\",{value:t,enumerable:!0}):o,t)),_=t=>c(a({},\"__esModule\",{value:!0}),t);var d=v((b,s)=>{s.exports=_jsx_runtime});var y={};g(y,{default:()=>p,frontmatter:()=>j});var n=k(d()),j=void 0;function h(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o,PrevDiffLink:r}=e;return o||l(\"EpicVideo\",!0),r||l(\"PrevDiffLink\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Context Provider\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/context-provider\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F9DD}\\u200D\\u2642\\uFE0F I was \",(0,n.jsx)(r,{children:\"refactoring things\"}),` a bit and decided we\nshouldn't need to pass the `,(0,n.jsx)(e.code,{children:\"query\"}),\" and \",(0,n.jsx)(e.code,{children:\"setSearchParams\"}),` as props. Instead I\njust wanted to call `,(0,n.jsx)(e.code,{children:\"useSearchParams\"}),` in each of the components that need them\n(there's only one URL afterall).`]}),`\n`,(0,n.jsxs)(e.p,{children:[`Well that didn't work. Turns out we now have multiple instances of the search\nparams state and multiple subscriptions to the `,(0,n.jsx)(e.code,{children:\"popstate\"}),` event. That's not\nwhat we want at all. It's busted right now. Can you fix this with context?`]}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} No worries Kellie. We can fix this.\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"So we want to create a context provider that will provide the \",(0,n.jsx)(e.code,{children:\"useSearchParams\"}),`\nhook to the rest of the app.`]}),`\n`,(0,n.jsxs)(e.p,{children:[`We're going to take this in steps though. First we'll create the context\nprovider, render it around the app, and then make a new `,(0,n.jsx)(e.code,{children:\"useSearchParams\"}),` hook\nthat will use the context value.`]}),`\n`,(0,n.jsx)(e.p,{children:\"Good luck! When you're finished, the app should be working again!\"})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}function l(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(y);})();\n;return Component;","epicVideoEmbeds",[651],"https://www.epicreact.dev/workshops/advanced-react-apis/context-provider","test",{"_9":654,"_655":656,"_657":658},"browser","pathname","/app/04.01.problem/test/","testFiles",[659],"filtering.test.ts","dev",{"_9":654,"_655":662},"/app/04.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/04.context/01.problem.provider?view=editor&title=Context+Provider+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":99,"_174":540,"_632":667,"_22":100,"_24":101,"_634":668,"_649":669,"_652":671,"_660":674,"_663":676,"_299":419,"_301":302,"_9":382,"_677":-5},"01.solution.provider","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),v=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},a=(e,t,o,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of f(t))!x.call(e,r)&&r!==o&&i(e,r,{get:()=>t[r],enumerable:!(s=u(t,r))||s.enumerable});return e};var _=(e,t,o)=>(o=e!=null?m(l(e)):{},a(t||!e||!e.__esModule?i(o,\"default\",{value:e,enumerable:!0}):o,e)),g=e=>a(i({},\"__esModule\",{value:!0}),e);var d=w((M,c)=>{c.exports=_jsx_runtime});var y={};v(y,{default:()=>h,frontmatter:()=>j});var n=_(d()),j=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"Context Provider\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/context-provider/solution\"}),`\n`,(0,n.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great! Now we've got a context provider so all the components can reference\nthe same state for our search params. Next let's improve this more by making\na hook for it and dealing with an issue with the default value.`})]})}function h(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}function k(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(y);})();\n;return Component;",[670],"https://www.epicreact.dev/workshops/advanced-react-apis/context-provider/solution",{"_9":654,"_655":672,"_657":673},"/app/04.01.solution/test/",[659],{"_9":654,"_655":675},"/app/04.01.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/04.context/01.solution.provider?view=editor&title=Context+Provider+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_301":310,"_298":679,"_382":690},{"_20":103,"_174":542,"_632":680,"_22":104,"_24":105,"_634":681,"_649":682,"_652":684,"_660":687,"_663":689,"_299":419,"_301":310,"_9":298,"_665":107},"02.problem.hook","var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},d=(n,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of w(e))!x.call(n,a)&&a!==o&&i(n,a,{get:()=>e[a],enumerable:!(r=f(e,a))||r.enumerable});return n};var y=(n,e,o)=>(o=n!=null?p(m(n)):{},d(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),k=n=>d(i({},\"__esModule\",{value:!0}),n);var h=g((_,c)=>{c.exports=_jsx_runtime});var b={};v(b,{default:()=>u,frontmatter:()=>j});var t=y(h()),j=void 0;function s(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:o,PrevDiffLink:r}=e;return o||l(\"EpicVideo\",!0),r||l(\"PrevDiffLink\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Context Hook\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/context-hook\"}),`\n`,(0,t.jsxs)(e.p,{children:[`\\u{1F9DD}\\u200D\\u2642\\uFE0F I was playing around with the app and I realized that we have a default value\nfor our context provider. So I thought maybe we\ncould `,(0,t.jsx)(r,{children:\"remove the context\"}),` provider. Unfortunately\nthat didn't work. Do you know why?`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Yeah, it's because even though the \",(0,t.jsx)(e.code,{children:\"searchParams\"}),` are shared, they're not\nupdated when calling `,(0,t.jsx)(e.code,{children:\"setSearchParams\"}),\". This is because the \",(0,t.jsx)(e.code,{children:\"searchParams\"}),`\nobject is no longer state. It's just a plain object. So when we call\n`,(0,t.jsx)(e.code,{children:\"setSearchParams\"}),`, nothing rerenders (and even if it did, it wouldn't have\nthe updated `,(0,t.jsx)(e.code,{children:\"searchParams\"}),\").\"]}),`\n`,(0,t.jsxs)(e.p,{children:[`So having a default in our context is pretty meaningless. So why don't we\ndefault it to `,(0,t.jsx)(e.code,{children:\"null\"}),\" and then in our \",(0,t.jsx)(e.code,{children:\"useSearchParams()\"}),` hook we can throw an\nerror if the context is `,(0,t.jsx)(e.code,{children:\"null\"}),\"? Go ahead and give it a try.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"When you're done, the app should be working again.\"})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(s,{...n})}):s(n)}function l(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(b);})();\n;return Component;",[683],"https://www.epicreact.dev/workshops/advanced-react-apis/context-hook",{"_9":654,"_655":685,"_657":686},"/app/04.02.problem/test/",[659],{"_9":654,"_655":688},"/app/04.02.problem/","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/04.context/02.problem.hook?view=editor&title=Context+Hook+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":107,"_174":542,"_632":691,"_22":108,"_24":109,"_634":692,"_649":693,"_652":695,"_660":698,"_663":700,"_299":419,"_301":310,"_9":382,"_677":-5},"02.solution.hook","var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!m.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(i=l(e,r))||i.enumerable});return t};var j=(t,e,n)=>(n=t!=null?h(x(t)):{},c(e||!t||!t.__esModule?s(n,\"default\",{value:t,enumerable:!0}):n,t)),y=t=>c(s({},\"__esModule\",{value:!0}),t);var d=w((E,a)=>{a.exports=_jsx_runtime});var v={};_(v,{default:()=>p,frontmatter:()=>g});var o=j(d()),g=void 0;function u(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||k(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Context Hook\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/context-hook/solution\"}),`\n`,(0,o.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great job!\"}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F989} There are definitely cases where a default value for context makes sense, but\noften it does not. You should normally follow the pattern we've done here when\nyou're using context.`})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(u,{...t})}):u(t)}function k(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(v);})();\n;return Component;",[694],"https://www.epicreact.dev/workshops/advanced-react-apis/context-hook/solution",{"_9":654,"_655":696,"_657":697},"/app/04.02.solution/test/",[659],{"_9":654,"_655":699},"/app/04.02.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/04.context/02.solution.hook?view=editor&title=Context+Hook+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[702,707],{"_20":95,"_174":540,"_632":647,"_22":96,"_24":97,"_634":648,"_649":703,"_652":704,"_660":706,"_663":664,"_299":419,"_301":302,"_9":298,"_665":99},[651],{"_9":654,"_655":656,"_657":705},[659],{"_9":654,"_655":662},{"_20":103,"_174":542,"_632":680,"_22":104,"_24":105,"_634":681,"_649":708,"_652":709,"_660":711,"_663":689,"_299":419,"_301":310,"_9":298,"_665":107},[683],{"_9":654,"_655":685,"_657":710},[659],{"_9":654,"_655":688},[713,718],{"_20":99,"_174":540,"_632":667,"_22":100,"_24":101,"_634":668,"_649":714,"_652":715,"_660":717,"_663":676,"_299":419,"_301":302,"_9":382,"_677":-5},[670],{"_9":654,"_655":672,"_657":716},[659],{"_9":654,"_655":675},{"_20":107,"_174":542,"_632":691,"_22":108,"_24":109,"_634":692,"_649":719,"_652":720,"_660":722,"_663":700,"_299":419,"_301":310,"_9":382,"_677":-5},[694],{"_9":654,"_655":696,"_657":721},[659],{"_9":654,"_655":699},"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=Shared%20Context","epicVideoInfosPromise",["P",726],"exerciseFinished",{"_729":730,"_24":731},"file","/myapp/workshop-content/exercises/04.context/FINISHED.mdx","exercises/04.context/FINISHED.mdx","prevStepLink",{"_734":735,"_736":737},"to","/exercise/04/02/solution","aria-label","Context Hook (solution)","nextStepLink",{"_734":740,"_736":554},"/exercise/05","actionData","errors"]

04. Shared Context/Elaboration