[{"_1":2,"_665":-5,"_666":-5},"loaderData",{"_3":4,"_455":456,"_583":584,"_664":-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","pum6dn1pk9uomootjv0muoqr","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.9.5","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/05/finished","session",{"_245":-5},"separator","online","toast","confettiId","presence",{"_261":262},"users",[263,278,287,297,305,313,322,331,340,346,355,362,369,377,384,391,399,405,411,416,423,429,435,441,445,451],{"_7":264,"_265":266,"_20":267,"_268":269},"f7bc55be219a433bc816de5628b4a9b5","avatarUrl","https://cdn.discordapp.com/avatars/1316820405436284989/4cf322d2bea8732605e60f8a6c7b20fb?size=512","Esquinte 🌌 🚀","location",{"_219":270,"_240":271,"_211":272},"📐 Pixel Perfect Tailwind","http://localhost:5639",{"_9":273,"_274":275,"_276":277},"problem","exerciseNumber",7,"stepNumber",1,{"_7":279,"_265":280,"_20":281,"_268":282},"34dc72f9d89284baa010236a86ce4c49","https://www.gravatar.com/avatar/34dc72f9d89284baa010236a86ce4c49?size=288&default=identicon","Moritz Mücke",{"_219":283,"_240":271,"_211":284},"React Fundamentals ⚛",{"_9":285,"_274":286,"_276":286},"solution",2,{"_7":288,"_289":216,"_290":291,"_292":293,"_20":294,"_268":295},"8243a41f-ca7f-4c93-b056-8228ddf0af22","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/21924eaf75fe2e374ac8f23322546fd2?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/21924eaf75fe2e374ac8f23322546fd2?size=512&default=identicon","Mr A Khan",{"_219":283,"_240":271,"_211":296},{"_274":277},{"_7":298,"_289":216,"_290":299,"_292":300,"_20":301,"_268":302},"6397ef42-144c-4ee7-92a4-c2827ac63ff0","https://www.gravatar.com/avatar/4b65688dd4354d5c7b027165e2d65b80?size=64&default=identicon","https://www.gravatar.com/avatar/4b65688dd4354d5c7b027165e2d65b80?size=512&default=identicon","Andrei Sinchenko",{"_219":169,"_240":271,"_211":303},{"_274":304},8,{"_7":306,"_289":216,"_290":307,"_292":308,"_20":309,"_268":310},"cb82a375-6ea2-4926-a7b3-7d4ab6c8ef6e","https://cdn.discordapp.com/avatars/695412791301111868/ac5f3699497f875b867ae2d7611936c0.png?size=64","https://cdn.discordapp.com/avatars/695412791301111868/ac5f3699497f875b867ae2d7611936c0.png?size=512","AbdElRahman KahlOut",{"_219":283,"_240":271,"_211":311},{"_9":273,"_274":312,"_276":286},4,{"_7":314,"_289":216,"_290":315,"_292":316,"_20":317,"_268":318},"0f34f49e-6bab-4439-966f-13441092a56f","https://www.gravatar.com/avatar/ed58b0fe0a808208fb3c972f6fa21810?size=64&default=identicon","https://www.gravatar.com/avatar/ed58b0fe0a808208fb3c972f6fa21810?size=512&default=identicon","Bret Wilson",{"_219":283,"_240":319,"_211":320},"http://192.168.1.221:5639",{"_274":321},9,{"_7":323,"_289":216,"_290":324,"_292":325,"_20":326,"_268":327},"f9f8be7e-cb9f-4b21-9085-1d65fe630481","https://www.gravatar.com/avatar/4d9c4f233b1a59117cdde9db8c05c666?size=64&default=identicon","https://www.gravatar.com/avatar/4d9c4f233b1a59117cdde9db8c05c666?size=512&default=identicon","Orhan Özkerçin",{"_219":328,"_240":271,"_211":329},"Full Stack Foundations 🔭",{"_274":330},3,{"_7":332,"_289":216,"_290":333,"_292":334,"_20":335,"_268":336},"bf119bc5-6f13-430c-bb22-c6e6969493f1","https://www.gravatar.com/avatar/17125a385daeaf989cd4f166969a7adf?size=64&default=identicon","https://www.gravatar.com/avatar/17125a385daeaf989cd4f166969a7adf?size=512&default=identicon","Majo",{"_219":337,"_240":271,"_211":338},"React Performance ⚡",{"_274":339},6,{"_7":341,"_289":216,"_290":342,"_292":343,"_20":344,"_268":345},"aea06e37-1282-4ba6-97eb-635bd3139724","https://www.gravatar.com/avatar/292ea6bebe341a4a91c25d093a392aa0?size=64&default=identicon","https://www.gravatar.com/avatar/292ea6bebe341a4a91c25d093a392aa0?size=512&default=identicon","Dominik Jurkowski",{"_219":283,"_240":271},{"_7":347,"_289":216,"_290":348,"_292":349,"_20":350,"_268":351},"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":352,"_240":353,"_211":354},"React Suspense 🔀","http://192.168.5.234:5639",{"_9":285,"_274":339,"_276":277},{"_7":356,"_289":216,"_290":357,"_292":358,"_20":359,"_268":360},"15837a67-5bc7-4128-b17b-d81678ee897e","https://www.gravatar.com/avatar/9cc69f7970a625abf97b56c9fa39e368?size=64&default=identicon","https://www.gravatar.com/avatar/9cc69f7970a625abf97b56c9fa39e368?size=512&default=identicon","Cris Curelaru",{"_219":337,"_240":271,"_211":361},{"_9":285,"_274":330,"_276":277},{"_7":363,"_289":216,"_290":364,"_292":365,"_20":366,"_268":367},"ae5df5f4-2699-4d2d-a850-1ffd91ed5fd4","https://www.gravatar.com/avatar/398001d0a2b1a5e35b30ed6394379b8f?size=64&default=identicon","https://www.gravatar.com/avatar/398001d0a2b1a5e35b30ed6394379b8f?size=512&default=identicon","Chengjie Huang",{"_219":337,"_240":271,"_211":368},{"_274":339},{"_7":370,"_289":216,"_290":371,"_292":372,"_20":373,"_268":374},"db5beb1b-94fe-4b14-99d5-79619a534b62","https://www.gravatar.com/avatar/618f5090fd921625eb8d1becb1a61208?size=64&default=identicon","https://www.gravatar.com/avatar/618f5090fd921625eb8d1becb1a61208?size=512&default=identicon","Dmytro Portenko",{"_219":375,"_240":271,"_211":376},"Data Modeling Deep Dive 💾",{"_274":330},{"_7":378,"_289":216,"_290":379,"_292":380,"_20":381,"_268":382},"a50b42ba-0139-476f-bb96-8ec8fb521af4","https://www.gravatar.com/avatar/ca7bd1f279dac444a203e27a09993394?size=64&default=identicon","https://www.gravatar.com/avatar/ca7bd1f279dac444a203e27a09993394?size=512&default=identicon","Zack Hitchcock",{"_219":283,"_240":271,"_211":383},{"_274":312},{"_7":385,"_289":216,"_290":386,"_292":387,"_20":388,"_268":389},"6103beee-2a3d-4262-8b55-b84a0d164bd6","https://www.gravatar.com/avatar/7c8e0d3f56bfe3448223781b241eb832?size=64&default=identicon","https://www.gravatar.com/avatar/7c8e0d3f56bfe3448223781b241eb832?size=512&default=identicon","Cian O’Gralaigh",{"_219":337,"_240":271,"_211":390},{"_274":286},{"_7":392,"_289":216,"_290":393,"_292":394,"_20":395,"_268":396},"08b8105f-3d21-4382-9d0e-517326a3b5bd","https://www.gravatar.com/avatar/15a34aefd6e4f2e99e5075e2a719adbd?size=64&default=identicon","https://www.gravatar.com/avatar/15a34aefd6e4f2e99e5075e2a719adbd?size=512&default=identicon","Kathleen",{"_219":283,"_240":271,"_211":397},{"_274":398},5,{"_7":400,"_289":216,"_290":401,"_292":402,"_20":-5,"_268":403},"05710d71-5f40-44aa-bd8f-9f05e5b1be77","https://www.gravatar.com/avatar/7958a721ea8745c99f5fa73f5424f460?size=64&default=identicon","https://www.gravatar.com/avatar/7958a721ea8745c99f5fa73f5424f460?size=512&default=identicon",{"_219":169,"_240":271,"_211":404},{"_274":312},{"_7":406,"_289":216,"_290":407,"_292":408,"_20":-5,"_268":409},"58c31bc4-1231-4b72-a46d-329155a1de43","https://www.gravatar.com/avatar/579a745e6a4927ecb634099a1072052b?size=64&default=identicon","https://www.gravatar.com/avatar/579a745e6a4927ecb634099a1072052b?size=512&default=identicon",{"_219":283,"_240":271,"_211":410},{"_9":273,"_274":275,"_276":312},{"_7":412,"_268":413},"bafmdwfl2gsolmm3o19qhe5r",{"_219":414,"_240":271,"_211":415},"React Hooks 🎣",{"_9":273,"_274":330,"_276":277},{"_7":417,"_289":216,"_290":418,"_292":419,"_20":-5,"_268":420},"af2c90cf-9318-4ada-ada9-05d5403fb2e2","https://cdn.discordapp.com/avatars/1081176065239699467/1c7911bbd7f652a6ede56ac25f948082.png?size=64","https://cdn.discordapp.com/avatars/1081176065239699467/1c7911bbd7f652a6ede56ac25f948082.png?size=512",{"_219":283,"_240":271,"_211":421},{"_9":273,"_274":422,"_276":286},10,{"_7":424,"_268":425},"ux53wojk6znltp5h6t8k8j7w",{"_219":426,"_240":427,"_211":428},"Full Stack Testing 🧪","http://testing.epicweb.dev",{"_274":275},{"_7":430,"_268":431},"xh1tcx7gz10j8xi3x3l6eh99",{"_219":432,"_240":271,"_211":433},"Web Authentication 🔐",{"_9":273,"_274":434,"_276":277},13,{"_7":436,"_289":216,"_290":437,"_292":438,"_20":-5,"_268":439},"3690a93c-4fe8-4aff-9294-a5da190e6f22","https://www.gravatar.com/avatar/b977635dedfbc655e48c0c70e5febd43?size=64&default=identicon","https://www.gravatar.com/avatar/b977635dedfbc655e48c0c70e5febd43?size=512&default=identicon",{"_219":352,"_240":271,"_211":440},{"_274":277},{"_7":442,"_268":443},"folnahyjzvdkdx2otx8abh5i",{"_219":414,"_240":444},"http://hooks.epicreact.dev",{"_7":446,"_289":216,"_290":447,"_292":448,"_20":-5,"_268":449},"0c156f1a-4abf-4784-8f17-8086592964de","https://www.gravatar.com/avatar/ec5640cd3d84358a5a1ab6558e373b3d?size=64&default=identicon","https://www.gravatar.com/avatar/ec5640cd3d84358a5a1ab6558e373b3d?size=512&default=identicon",{"_219":283,"_240":271,"_211":450},{"_274":321},{"_7":452,"_268":453},"z4d3ueik7ywuz8q3vrxvc03o",{"_219":169,"_240":241,"_211":454},{"_274":398,"_276":-5,"_9":-5},"routes/_app+/_layout",{"_219":169,"_457":458,"_579":580,"_582":16},"exercises",[459,491,500,513,526,535,544,553,562],{"_274":277,"_168":460,"_461":462,"_475":476,"_483":484},"Advanced State Management","solutions",[463,465,467,469,471,473],{"_276":277,"_168":464,"_20":27},"New state",{"_276":286,"_168":466,"_20":35},"Previous State",{"_276":330,"_168":468,"_20":43},"State Object",{"_276":312,"_168":470,"_20":51},"Action Function",{"_276":398,"_168":472,"_20":59},"Traditional Reducer",{"_276":339,"_168":474,"_20":67},"Real World","problems",[477,478,479,480,481,482],{"_276":277,"_168":464,"_20":21},{"_276":286,"_168":466,"_20":31},{"_276":330,"_168":468,"_20":39},{"_276":312,"_168":470,"_20":47},{"_276":398,"_168":472,"_20":55},{"_276":339,"_168":474,"_20":63},"steps",[485,486,487,488,489,490],{"_276":277,"_168":464,"_20":21},{"_276":286,"_168":466,"_20":31},{"_276":330,"_168":468,"_20":39},{"_276":312,"_168":470,"_20":47},{"_276":398,"_168":472,"_20":55},{"_276":339,"_168":474,"_20":63},{"_274":286,"_168":492,"_461":493,"_475":496,"_483":498},"State Optimization",[494],{"_276":277,"_168":495,"_20":75},"Optimize state updates",[497],{"_276":277,"_168":495,"_20":71},[499],{"_276":277,"_168":495,"_20":71},{"_274":330,"_168":501,"_461":502,"_475":507,"_483":510},"Custom Hooks",[503,505],{"_276":277,"_168":504,"_20":83},"Hook Function",{"_276":286,"_168":506,"_20":91},"useCallback",[508,509],{"_276":277,"_168":504,"_20":79},{"_276":286,"_168":506,"_20":87},[511,512],{"_276":277,"_168":504,"_20":79},{"_276":286,"_168":506,"_20":87},{"_274":312,"_168":514,"_461":515,"_475":520,"_483":523},"Shared Context",[516,518],{"_276":277,"_168":517,"_20":99},"Context Provider",{"_276":286,"_168":519,"_20":107},"Context Hook",[521,522],{"_276":277,"_168":517,"_20":95},{"_276":286,"_168":519,"_20":103},[524,525],{"_276":277,"_168":517,"_20":95},{"_276":286,"_168":519,"_20":103},{"_274":398,"_168":527,"_461":528,"_475":531,"_483":533},"Portals",[529],{"_276":277,"_168":530,"_20":115},"createPortal",[532],{"_276":277,"_168":530,"_20":111},[534],{"_276":277,"_168":530,"_20":111},{"_274":339,"_168":536,"_461":537,"_475":540,"_483":542},"Layout Computation",[538],{"_276":277,"_168":539,"_20":123},"useLayoutEffect",[541],{"_276":277,"_168":539,"_20":119},[543],{"_276":277,"_168":539,"_20":119},{"_274":275,"_168":545,"_461":546,"_475":549,"_483":551},"Imperative Handles",[547],{"_276":277,"_168":548,"_20":131},"useImperativeHandle",[550],{"_276":277,"_168":548,"_20":127},[552],{"_276":277,"_168":548,"_20":127},{"_274":304,"_168":554,"_461":555,"_475":558,"_483":560},"Focus Management",[556],{"_276":277,"_168":557,"_20":139},"flushSync",[559],{"_276":277,"_168":557,"_20":135},[561],{"_276":277,"_168":557,"_20":135},{"_274":321,"_168":563,"_461":564,"_475":571,"_483":575},"Sync External State",[565,567,569],{"_276":277,"_168":566,"_20":147},"useSyncExternalStore",{"_276":286,"_168":568,"_20":155},"Make Store Utility",{"_276":330,"_168":570,"_20":163},"Handling Server Rendering",[572,573,574],{"_276":277,"_168":566,"_20":143},{"_276":286,"_168":568,"_20":151},{"_276":330,"_168":570,"_20":159},[576,577,578],{"_276":277,"_168":566,"_20":143},{"_276":286,"_168":568,"_20":151},{"_276":330,"_168":570,"_20":159},"playground",{"_581":-5,"_274":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_585":586,"_219":169,"_211":587,"_646":647,"_648":649,"_650":651,"_655":656,"_661":662},"articleId","workshop-advanced-react-apis-5-finished",{"_274":398,"_588":589,"_168":527,"_590":591,"_592":593,"_594":595,"_597":598,"_483":600,"_475":634,"_461":640},"dirName","05.portals","instructionsCode","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var u=(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,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!y.call(n,r)&&r!==l&&s(n,r,{get:()=>e[r],enumerable:!(t=b(e,r))||t.enumerable});return n};var N=(n,e,l)=>(l=n!=null?p(v(n)):{},o(e||!n||!n.__esModule?s(l,\"default\",{value:n,enumerable:!0}):l,n)),g=n=>o(s({},\"__esModule\",{value:!0}),n);var i=u((M,c)=>{c.exports=_jsx_runtime});var w={};k(w,{default:()=>h,frontmatter:()=>f});var a=N(i()),f=void 0;function d(n){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...n.components},{EpicVideo:l}=e;return l||D(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Portals\"}),`\n`,(0,a.jsx)(l,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-portals\"}),`\n`,(0,a.jsxs)(e.p,{children:[`There are a variety of UI patterns that require a component render some part of\nits UI that appears outside of the component's normal DOM hierarchy. For\nexample, a modal dialog might need to render its contents at the root of the\ndocument, or a tooltip might need to render its contents at the end of the\n`,(0,a.jsx)(e.code,{children:\"body\"}),` element. Typically this is for the purpose of layering or positioning\ncontent above other content.`]}),`\n`,(0,a.jsxs)(e.p,{children:[\"You could imperatively add a \",(0,a.jsx)(e.code,{children:\"useEffect\"}),` that creates a DOM node yourself,\nappends it to the document, and then removes it when the component unmounts.\nHowever, this is a common enough pattern that React provides a built-in way to\ndo this with the `,(0,a.jsx)(e.code,{children:\"ReactDOM.createPortal\"}),\" method.\"]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"createPortal\"}),\" } \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react-dom\"}),\"'\",`\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(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Modal\"}),\"({\",`\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:\"title\"}),\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"content\"}),\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"handleClose\"}),\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"}\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"title\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"content\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"handleClose\"}),(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\":\"11\",children:[\"}) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"12\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createPortal\"}),\"(\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"13\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"modal\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"14\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\">\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"title\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"15\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\">\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"content\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"16\",children:[\"\t\t,\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"17\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"document\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"body\"}),\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"18\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"App\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"showModal\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setShowModal\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"React\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"false\"}),\")\",`\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:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",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\":\"26\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"button\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onClick\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"() \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setShowModal\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"true\"}),\")\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">Show Modal\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"showModal\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",children:[\"\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Modal\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",children:[\"\t\t\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"title\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"My Modal\"}),'\"',`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",children:[\"\t\t\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"content\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"This is the content of the modal\"}),'\"',`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",children:[\"\t\t\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"handleClose\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"() \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setShowModal\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"false\"}),\")\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",children:[\"\t\t\t\t/>\",`\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(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"36\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[`The first argument is the UI you want rendered (which has access to props,\nstate, whatever) and the second argument is the DOM node you want to render it\nto. In this case, we're rendering the modal to the `,(0,a.jsx)(e.code,{children:\"body\"}),\" element.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"\\u{1F4DC} Learn more from \",(0,a.jsxs)(e.a,{href:\"https://react.dev/reference/react-dom/createPortal\",children:[\"the \",(0,a.jsx)(e.code,{children:\"createPortal\"}),\" docs\"]})]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function D(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(w);})();\n;return Component;","finishedCode","var Component=(()=>{var l=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var _=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},s=(e,t,o,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of m(t))!h.call(e,r)&&r!==o&&c(e,r,{get:()=>t[r],enumerable:!(i=f(t,r))||i.enumerable});return e};var w=(e,t,o)=>(o=e!=null?l(x(e)):{},s(t||!e||!e.__esModule?c(o,\"default\",{value:e,enumerable:!0}):o,e)),b=e=>s(c({},\"__esModule\",{value:!0}),e);var d=_((M,a)=>{a.exports=_jsx_runtime});var y={};j(y,{default:()=>u,frontmatter:()=>k});var n=w(d()),k=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||g(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"Portals\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-portals\"}),`\n`,(0,n.jsx)(t.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Nice and quick on, but useful tool in your React toolbelt!\"})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}function g(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(y);})();\n;return Component;","instructionsEpicVideoEmbeds",[596],"https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-portals","finishedEpicVideoEmbeds",[599],"https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-portals",[601],{"_276":277,"_273":602,"_285":622},{"_20":111,"_168":530,"_588":603,"_22":112,"_24":113,"_590":604,"_605":606,"_608":609,"_616":617,"_619":620,"_274":398,"_276":277,"_9":273,"_621":115},"01.problem.create","var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},l=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!w.call(t,r)&&r!==n&&a(t,r,{get:()=>e[r],enumerable:!(i=f(e,r))||i.enumerable});return t};var k=(t,e,n)=>(n=t!=null?u(y(t)):{},l(e||!t||!t.__esModule?a(n,\"default\",{value:t,enumerable:!0}):n,t)),x=t=>l(a({},\"__esModule\",{value:!0}),t);var s=b((D,c)=>{c.exports=_jsx_runtime});var _={};g(_,{default:()=>p,frontmatter:()=>v});var o=k(s()),v=void 0;function h(t){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n,PrevDiffLink:i}=e;return n||d(\"EpicVideo\",!0),i||d(\"PrevDiffLink\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"createPortal\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/createportal\"}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Some of our users find the heart icon to be unclear and would like to have a\ntooltip that explains what it's for.`}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F9DD}\\u200D\\u2642\\uFE0F I've \",(0,o.jsx)(i,{children:\"moved things around a little bit\"}),` to reduce\nthe amount of code you need to work in. I've also added a simple tooltip\ncomponent that's not working quite yet. The positioning is all funny because the\ntooltip is being rendered within the context of the card instead of at the root\nof the document.`]}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Thanks Kellie. Now, let's see if you can make the tooltip component work\nproperly with a portal.`}),`\n`,(0,o.jsx)(e.p,{children:`Note, the change you're making is pretty minimal. You'll also need to change\nsome of the CSS to make the tooltip look a little better.`}),`\n`,(0,o.jsxs)(e.p,{children:[`Additionally, check the Elements panel in the DevTools to see where the tooltip\nis being rendered (next to the button vs `,(0,o.jsx)(e.code,{children:\"document.body\"}),\").\"]}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F989} Don't forget about the \"Files\" button in the bottom of this screen. It will\nshow you which files are changed in this exercise step and allow you to click\nto open the relevant files.`}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F4DC} Parts of this exercise was lifted from \",(0,o.jsx)(e.a,{href:\"https://react.dev/reference/react/useLayoutEffect#measuring-layout-before-the-browser-repaints-the-screen\",children:\"the React docs\"})]}),`\n`,(0,o.jsx)(\"callout-info\",{children:(0,o.jsxs)(e.p,{children:[`Typically you'll want to use a library for tooltips which have been tested for\naccessibility best practices. But they're likely using `,(0,o.jsx)(e.code,{children:\"createPortal\"}),` under\nthe hood and you'll very likely find yourself needing to use this API at some\npoint.`]})})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(h,{...t})}):h(t)}function d(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(_);})();\n;return Component;","epicVideoEmbeds",[607],"https://www.epicreact.dev/workshops/advanced-react-apis/createportal","test",{"_9":610,"_611":612,"_613":614},"browser","pathname","/app/05.01.problem/test/","testFiles",[615],"portal.test.ts","dev",{"_9":610,"_611":618},"/app/05.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/05.portals/01.problem.create?view=editor&title=createPortal+%28problem%29","solutionName",{"_20":115,"_168":530,"_588":623,"_22":116,"_24":117,"_590":624,"_605":625,"_608":627,"_616":630,"_619":632,"_274":398,"_276":277,"_9":285,"_633":-5},"01.solution.create","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},s=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of m(t))!x.call(e,r)&&r!==o&&i(e,r,{get:()=>t[r],enumerable:!(c=h(t,r))||c.enumerable});return e};var j=(e,t,o)=>(o=e!=null?u(f(e)):{},s(t||!e||!e.__esModule?i(o,\"default\",{value:e,enumerable:!0}):o,e)),b=e=>s(i({},\"__esModule\",{value:!0}),e);var d=w((v,a)=>{a.exports=_jsx_runtime});var M={};_(M,{default:()=>l,frontmatter:()=>g});var n=j(d()),g=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||E(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"createPortal\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/createportal/solution\"}),`\n`,(0,n.jsx)(t.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great job! That tooltip works much better now. Our users will be thrilled!\"})]})}function l(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}function E(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(M);})();\n;return Component;",[626],"https://www.epicreact.dev/workshops/advanced-react-apis/createportal/solution",{"_9":610,"_611":628,"_613":629},"/app/05.01.solution/test/",[615],{"_9":610,"_611":631},"/app/05.01.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/05.portals/01.solution.create?view=editor&title=createPortal+%28solution%29","problemName",[635],{"_20":111,"_168":530,"_588":603,"_22":112,"_24":113,"_590":604,"_605":636,"_608":637,"_616":639,"_619":620,"_274":398,"_276":277,"_9":273,"_621":115},[607],{"_9":610,"_611":612,"_613":638},[615],{"_9":610,"_611":618},[641],{"_20":115,"_168":530,"_588":623,"_22":116,"_24":117,"_590":624,"_605":642,"_608":643,"_616":645,"_619":632,"_274":398,"_276":277,"_9":285,"_633":-5},[626],{"_9":610,"_611":628,"_613":644},[615],{"_9":610,"_611":631},"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=Portals","epicVideoInfosPromise",["P",649],"exerciseFinished",{"_652":653,"_24":654},"file","/myapp/workshop-content/exercises/05.portals/FINISHED.mdx","exercises/05.portals/FINISHED.mdx","prevStepLink",{"_657":658,"_659":660},"to","/exercise/05/01/solution","aria-label","createPortal (solution)","nextStepLink",{"_657":663,"_659":536},"/exercise/06","routes/_app+/exercise+/_layout","actionData","errors"]

05. Portals/Elaboration