[{"_1":2,"_705":-5,"_706":-5},"loaderData",{"_3":4,"_491":492,"_623":624},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_134":135,"_137":138,"_139":16,"_140":141,"_198":143,"_199":145,"_146":147,"_200":201,"_222":223,"_247":-5,"_248":-5,"_249":250},"userId",{"_7":8,"_9":10},"id","x6mlkinig7z5773sf06un5aj","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],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.composition/01.problem.compose","relativePath","exercises/01.composition/01.problem.compose",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.composition/01.solution.compose","exercises/01.composition/01.solution.compose",{"_20":31,"_22":32,"_24":33},"02.01.problem","/myapp/workshop-content/exercises/02.latest-ref/01.problem.ref","exercises/02.latest-ref/01.problem.ref",{"_20":35,"_22":36,"_24":37},"02.01.solution","/myapp/workshop-content/exercises/02.latest-ref/01.solution.ref","exercises/02.latest-ref/01.solution.ref",{"_20":39,"_22":40,"_24":41},"03.01.problem","/myapp/workshop-content/exercises/03.compound-components/01.problem.context","exercises/03.compound-components/01.problem.context",{"_20":43,"_22":44,"_24":45},"03.01.solution","/myapp/workshop-content/exercises/03.compound-components/01.solution.context","exercises/03.compound-components/01.solution.context",{"_20":47,"_22":48,"_24":49},"03.02.problem","/myapp/workshop-content/exercises/03.compound-components/02.problem.validation","exercises/03.compound-components/02.problem.validation",{"_20":51,"_22":52,"_24":53},"03.02.solution","/myapp/workshop-content/exercises/03.compound-components/02.solution.validation","exercises/03.compound-components/02.solution.validation",{"_20":55,"_22":56,"_24":57},"04.01.problem","/myapp/workshop-content/exercises/04.slots/01.problem.context","exercises/04.slots/01.problem.context",{"_20":59,"_22":60,"_24":61},"04.01.solution","/myapp/workshop-content/exercises/04.slots/01.solution.context","exercises/04.slots/01.solution.context",{"_20":63,"_22":64,"_24":65},"04.02.problem","/myapp/workshop-content/exercises/04.slots/02.problem.generic","exercises/04.slots/02.problem.generic",{"_20":67,"_22":68,"_24":69},"04.02.solution","/myapp/workshop-content/exercises/04.slots/02.solution.generic","exercises/04.slots/02.solution.generic",{"_20":71,"_22":72,"_24":73},"04.03.problem","/myapp/workshop-content/exercises/04.slots/03.problem.prop","exercises/04.slots/03.problem.prop",{"_20":75,"_22":76,"_24":77},"04.03.solution","/myapp/workshop-content/exercises/04.slots/03.solution.prop","exercises/04.slots/03.solution.prop",{"_20":79,"_22":80,"_24":81},"05.01.problem","/myapp/workshop-content/exercises/05.prop-getters/01.problem.collections","exercises/05.prop-getters/01.problem.collections",{"_20":83,"_22":84,"_24":85},"05.01.solution","/myapp/workshop-content/exercises/05.prop-getters/01.solution.collections","exercises/05.prop-getters/01.solution.collections",{"_20":87,"_22":88,"_24":89},"05.02.problem","/myapp/workshop-content/exercises/05.prop-getters/02.problem.getters","exercises/05.prop-getters/02.problem.getters",{"_20":91,"_22":92,"_24":93},"05.02.solution","/myapp/workshop-content/exercises/05.prop-getters/02.solution.getters","exercises/05.prop-getters/02.solution.getters",{"_20":95,"_22":96,"_24":97},"06.01.problem","/myapp/workshop-content/exercises/06.state-initializers/01.problem.initial","exercises/06.state-initializers/01.problem.initial",{"_20":99,"_22":100,"_24":101},"06.01.solution","/myapp/workshop-content/exercises/06.state-initializers/01.solution.initial","exercises/06.state-initializers/01.solution.initial",{"_20":103,"_22":104,"_24":105},"06.02.problem","/myapp/workshop-content/exercises/06.state-initializers/02.problem.stability","exercises/06.state-initializers/02.problem.stability",{"_20":107,"_22":108,"_24":109},"06.02.solution","/myapp/workshop-content/exercises/06.state-initializers/02.solution.stability","exercises/06.state-initializers/02.solution.stability",{"_20":111,"_22":112,"_24":113},"07.01.problem","/myapp/workshop-content/exercises/07.state-reducer/01.problem.reducer","exercises/07.state-reducer/01.problem.reducer",{"_20":115,"_22":116,"_24":117},"07.01.solution","/myapp/workshop-content/exercises/07.state-reducer/01.solution.reducer","exercises/07.state-reducer/01.solution.reducer",{"_20":119,"_22":120,"_24":121},"07.02.problem","/myapp/workshop-content/exercises/07.state-reducer/02.problem.default","exercises/07.state-reducer/02.problem.default",{"_20":123,"_22":124,"_24":125},"07.02.solution","/myapp/workshop-content/exercises/07.state-reducer/02.solution.default","exercises/07.state-reducer/02.solution.default",{"_20":127,"_22":128,"_24":129},"08.01.problem","/myapp/workshop-content/exercises/08.control-props/01.problem.control","exercises/08.control-props/01.problem.control",{"_20":131,"_22":132,"_24":133},"08.01.solution","/myapp/workshop-content/exercises/08.control-props/01.solution.control","exercises/08.control-props/01.solution.control","repoUpdates",{"_136":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_142":143,"_144":145,"_146":147,"_153":154,"_171":172,"_174":175,"_176":177,"_178":179,"_182":183,"_188":189,"_192":193,"_194":195,"_196":197},"title","Advanced React Patterns 🤯","subtitle","Learn how to build simple and flexible React Components and Hooks using modern patterns","instructor",{"_20":148,"_149":150,"_151":152},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_155":156,"_157":158,"_159":160,"_161":162,"_163":164,"_165":166,"_167":168},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","advanced-react-patterns","discordChannelId","1285244676286189569","discordTags",[169,170],"1285246046498328627","1285245811944325193","onboardingVideo",[173],"https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/advanced-react-patterns","githubRoot","https://github.com/epicweb-dev/advanced-react-patterns/tree/main","stackBlitzConfig",{"_180":181},"view","editor","forms",{"_184":185,"_186":187},"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",{"_190":191},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_202":203,"_204":205,"_206":207,"_208":175,"_209":177,"_210":191,"_211":212,"_213":214,"_215":216,"_217":191,"_218":219,"_220":221},"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.36.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","21bc579963a3accd843a09e97a56ad1fed45d100c9da198d1eb74890537da2b7","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_224":225,"_226":227,"_228":229,"_230":231,"_232":231,"_233":234,"_241":242,"_243":244,"_245":193,"_246":191},"protocol","http:","hostname","advanced-patterns.epicreact.dev","port","","origin","http://advanced-patterns.epicreact.dev","domain","hints",{"_235":236,"_237":238,"_239":240},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/01/finished","session",{"_235":-5},"separator","online","toast","confettiId","presence",{"_251":252},"users",[253,271,282,290,297,306,313,321,328,335,342,350,357,364,372,380,387,394,402,408,416,422,428,434,440,446,452,458,463,469,475,481,487],{"_7":254,"_255":191,"_256":257,"_258":259,"_20":260,"_261":262},"d4bd920b-da29-4a94-a494-ab9a6c176c36","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/075dc4ecf87b92a8e2e95005480a917c?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/075dc4ecf87b92a8e2e95005480a917c?size=512&default=identicon","Seyler Lajos","location",{"_198":263,"_230":264,"_186":265},"React Suspense 🔀","http://192.168.50.15:5640",{"_9":266,"_267":268,"_269":270},"problem","exerciseNumber",2,"stepNumber",3,{"_7":272,"_255":191,"_256":273,"_258":274,"_20":275,"_261":276},"bd79e864-a1e4-40ae-98f6-02b3f7accac9","https://cdn.discordapp.com/avatars/235474140247621632/9998e937df92b465efba5e6b05e6e426.png?size=64","https://cdn.discordapp.com/avatars/235474140247621632/9998e937df92b465efba5e6b05e6e426.png?size=512","Garrett",{"_198":277,"_230":278,"_186":279},"MCP UI 🪟","http://localhost:5639",{"_9":266,"_267":280,"_269":281},4,1,{"_7":283,"_255":191,"_256":284,"_258":285,"_20":286,"_261":287},"aa113987-6b8d-47c0-9e82-802a4c6439a1","https://www.gravatar.com/avatar/045f13e5f6463cc2b8f5f1547fcaad9b?size=64&default=identicon","https://www.gravatar.com/avatar/045f13e5f6463cc2b8f5f1547fcaad9b?size=512&default=identicon","Daniel Moreno",{"_198":288,"_230":289},"MCP Fundamentals 🧱","http://localhost:5640",{"_7":291,"_255":191,"_256":292,"_258":293,"_20":294,"_261":295},"bcdaf6fc-90fb-4973-8906-5b9ae5078de5","https://www.gravatar.com/avatar/a9343a461729cc175331bcf4e2848588?size=64&default=identicon","https://www.gravatar.com/avatar/a9343a461729cc175331bcf4e2848588?size=512&default=identicon","Jennifer Dixon",{"_198":263,"_230":278,"_186":296},{"_267":270},{"_7":298,"_255":191,"_256":299,"_258":300,"_20":301,"_261":302},"8a47d20b-ea5c-43a9-9b87-741c54db56a1","https://avatars.githubusercontent.com/u/31474322?v=4&size=64","https://avatars.githubusercontent.com/u/31474322?v=4&size=512","RichJJones100",{"_198":303,"_230":278,"_186":304},"Advanced MCP Features 🐡",{"_9":266,"_267":305,"_269":268},5,{"_7":307,"_255":191,"_256":308,"_258":309,"_20":310,"_261":311},"afcb5fbb-9f5e-4dcc-a201-f6b2b7c22aaf","https://www.gravatar.com/avatar/3906494abe29e7418425dbce15264502?size=64&default=identicon","https://www.gravatar.com/avatar/3906494abe29e7418425dbce15264502?size=512&default=identicon","Yuri",{"_198":288,"_230":278,"_186":312},{"_9":266,"_267":280,"_269":268},{"_7":314,"_255":191,"_256":315,"_258":316,"_20":317,"_261":318},"3798d1b4-ec02-4e2c-b792-1b6d08dc061a","https://cdn.discordapp.com/avatars/1267891572289179678/187e6e8b66638bb33a918c42a82907ac.png?size=64","https://cdn.discordapp.com/avatars/1267891572289179678/187e6e8b66638bb33a918c42a82907ac.png?size=512","afonso",{"_198":303,"_230":278,"_186":319},{"_9":320,"_267":268,"_269":281},"solution",{"_7":322,"_255":191,"_256":323,"_258":324,"_20":325,"_261":326},"461346c8-64e5-4854-8248-54d4c4864961","https://www.gravatar.com/avatar/1a1b976e72fcad1c9c3637e66c0c7571?size=64&default=identicon","https://www.gravatar.com/avatar/1a1b976e72fcad1c9c3637e66c0c7571?size=512&default=identicon","Oluwakemi Dada",{"_198":327,"_230":278},"React Server Components 🤹",{"_7":329,"_255":191,"_256":330,"_258":331,"_20":332,"_261":333},"da0b390b-409a-4dda-9cb7-56b44bc9e2d3","https://www.gravatar.com/avatar/f8fcc925bcdf87db317504ca385c3a2e?size=64&default=identicon","https://www.gravatar.com/avatar/f8fcc925bcdf87db317504ca385c3a2e?size=512&default=identicon","Murilo Messias",{"_198":288,"_230":278,"_186":334},{"_267":305},{"_7":336,"_255":191,"_256":337,"_258":338,"_20":339,"_261":340},"70078aa1-7b41-40f4-9930-79013303627b","https://avatars.githubusercontent.com/u/4356894?v=4&size=64","https://avatars.githubusercontent.com/u/4356894?v=4&size=512","Thor Anderson",{"_198":288,"_230":278,"_186":341},{"_9":266,"_267":268,"_269":268},{"_7":343,"_255":191,"_256":344,"_258":345,"_20":346,"_261":347},"67efb464-200a-447f-aac9-0f1d4e36a553","https://www.gravatar.com/avatar/2e60558fe4d0ed92e8731b2359980c60?size=64&default=identicon","https://www.gravatar.com/avatar/2e60558fe4d0ed92e8731b2359980c60?size=512&default=identicon","Nosipho Nsibande",{"_198":348,"_230":278,"_186":349},"React Fundamentals ⚛",{"_9":320,"_267":305,"_269":268},{"_7":351,"_255":191,"_256":352,"_258":353,"_20":354,"_261":355},"a3373deb-2a76-4687-ac91-b14c9ef4c180","https://www.gravatar.com/avatar/75419744679cbeb8a1d482eec30a1917?size=64&default=identicon","https://www.gravatar.com/avatar/75419744679cbeb8a1d482eec30a1917?size=512&default=identicon","Mark",{"_198":277,"_230":278,"_186":356},{"_9":266,"_267":270,"_269":281},{"_7":358,"_255":191,"_256":359,"_258":360,"_20":361,"_261":362},"7c838838-4ba6-4264-b081-a6cb38d1e1b6","https://avatars.githubusercontent.com/u/10537472?v=4&size=64","https://avatars.githubusercontent.com/u/10537472?v=4&size=512","Hasan Wajahat",{"_198":277,"_230":278,"_186":363},{"_9":266,"_267":281,"_269":281},{"_7":365,"_255":191,"_256":366,"_258":367,"_20":368,"_261":369},"48babb5b-93da-4fa0-8743-f66ed0ce95d3","https://www.gravatar.com/avatar/3c1885d2f0968d3954f9343eb9affb78?size=64&default=identicon","https://www.gravatar.com/avatar/3c1885d2f0968d3954f9343eb9affb78?size=512&default=identicon","Damian Janus",{"_198":348,"_230":278,"_186":370},{"_267":371},7,{"_7":373,"_255":191,"_256":374,"_258":375,"_20":376,"_261":377},"43a881f9-dff0-4263-bba3-f4ee0e7a219c","https://avatars.githubusercontent.com/u/24401700?v=4&size=64","https://avatars.githubusercontent.com/u/24401700?v=4&size=512","jetmech",{"_198":303,"_230":378,"_186":379},"http://localhost:5647",{"_9":266,"_267":305,"_269":270},{"_7":381,"_255":191,"_256":382,"_258":383,"_20":384,"_261":385},"1041779f-6ae2-4f09-b9c7-ef23f4d162e6","https://cdn.discordapp.com/avatars/274331281007837184/5cc37aeeebee7bf590f732abb447e61b.png?size=64","https://cdn.discordapp.com/avatars/274331281007837184/5cc37aeeebee7bf590f732abb447e61b.png?size=512","Johan",{"_198":277,"_230":278,"_186":386},{"_267":281},{"_7":388,"_255":191,"_256":389,"_258":390,"_20":391,"_261":392},"5356fc58-f432-4ca8-a45b-44f448dd0797","https://avatars.githubusercontent.com/u/77640534?v=4&size=64","https://avatars.githubusercontent.com/u/77640534?v=4&size=512","pterechine",{"_198":288,"_230":278,"_186":393},{"_9":266,"_267":305,"_269":270},{"_7":395,"_255":191,"_256":396,"_258":397,"_20":398,"_261":399},"ecef3a37-c9b4-4283-ac74-bd82af6108d6","https://www.gravatar.com/avatar/f28288b2785c726653fd2ca826d82791?size=64&default=identicon","https://www.gravatar.com/avatar/f28288b2785c726653fd2ca826d82791?size=512&default=identicon","Martin Gaviola",{"_198":400,"_230":278,"_186":401},"Advanced React APIs 🔥",{"_9":320,"_267":268,"_269":281},{"_7":403,"_255":191,"_256":404,"_258":405,"_20":-5,"_261":406},"56b78920-a568-4fad-b8e1-635ffe0f634f","https://cdn.discordapp.com/avatars/411561782763716609/2cd2a71147cad75dcce0c1149a7f0586.png?size=64","https://cdn.discordapp.com/avatars/411561782763716609/2cd2a71147cad75dcce0c1149a7f0586.png?size=512",{"_198":288,"_230":278,"_186":407},{"_267":268},{"_7":409,"_255":191,"_256":410,"_258":411,"_20":-5,"_261":412},"4342c015-3143-4cd5-bcfc-c03451f34f3c","https://www.gravatar.com/avatar/c7cfb7fa4e59b79dd3bc1aa914bf1a1d?size=64&default=identicon","https://www.gravatar.com/avatar/c7cfb7fa4e59b79dd3bc1aa914bf1a1d?size=512&default=identicon",{"_198":413,"_230":278,"_186":414},"React Hooks 🎣",{"_9":266,"_267":415,"_269":281},6,{"_7":417,"_255":191,"_256":418,"_258":419,"_20":-5,"_261":420},"1cfb6a25-3a1d-4d8a-925d-63117ec57bef","https://www.gravatar.com/avatar/faf7c5a31fb948ab9e39ed778ae5df5c?size=64&default=identicon","https://www.gravatar.com/avatar/faf7c5a31fb948ab9e39ed778ae5df5c?size=512&default=identicon",{"_198":288,"_230":278,"_186":421},{"_9":320,"_267":305,"_269":268},{"_7":423,"_255":191,"_256":424,"_258":425,"_20":-5,"_261":426},"37d3117c-a944-4924-a02f-1d09676f99ac","https://cdn.discordapp.com/avatars/504459152408707073/19c13d45f1750eaf60770c88c71888ed.png?size=64","https://cdn.discordapp.com/avatars/504459152408707073/19c13d45f1750eaf60770c88c71888ed.png?size=512",{"_198":288,"_230":278,"_186":427},{"_9":266,"_267":268,"_269":281},{"_7":429,"_255":191,"_256":430,"_258":431,"_20":-5,"_261":432},"7688e117-2587-4e7e-bf2c-d8dce6135b67","https://www.gravatar.com/avatar/72c5f45055b2b0afb38f46cd57b655fd?size=64&default=identicon","https://www.gravatar.com/avatar/72c5f45055b2b0afb38f46cd57b655fd?size=512&default=identicon",{"_198":288,"_230":278,"_186":433},{"_267":281},{"_7":435,"_255":191,"_256":436,"_258":437,"_20":-5,"_261":438},"562fb8e3-3c6e-4541-af43-beb781ad6a23","https://cdn.discordapp.com/avatars/716318680967020545/5e8ffccc4b944f6ad97a2404c1939bbc.png?size=64","https://cdn.discordapp.com/avatars/716318680967020545/5e8ffccc4b944f6ad97a2404c1939bbc.png?size=512",{"_198":288,"_230":289,"_186":439},{"_9":320,"_267":305,"_269":281},{"_7":441,"_255":16,"_256":442,"_258":443,"_20":-5,"_261":444},"e6afa9c8-d382-4eec-bf92-b0f48de24e2e","https://cdn.discordapp.com/avatars/354946402901819402/e6aec3fd38be26b00ce88df44e5d8318.png?size=64","https://cdn.discordapp.com/avatars/354946402901819402/e6aec3fd38be26b00ce88df44e5d8318.png?size=512",{"_198":413,"_230":278,"_186":445},{"_9":266,"_267":415,"_269":268},{"_7":447,"_255":191,"_256":448,"_258":449,"_20":-5,"_261":450},"205a0d17-ee10-4297-bc3f-e21ed0f74117","https://cdn.discordapp.com/avatars/1151768841299439648/50c98e713508a0594d959363f466a7f6.png?size=64","https://cdn.discordapp.com/avatars/1151768841299439648/50c98e713508a0594d959363f466a7f6.png?size=512",{"_198":277,"_230":278,"_186":451},{"_267":280},{"_7":453,"_261":454},"qbmda8ml24u69bixy9yd7sjy",{"_198":455,"_230":456,"_186":457},"Advanced Vitest Patterns","http://advanced-vitest-patterns.epicweb.dev",{"_9":320,"_267":270,"_269":281},{"_7":459,"_255":191,"_256":460,"_258":461,"_20":-5,"_261":462},"8a1d9ba2-b2ba-46b9-8f43-fc044d8bff7d","https://www.gravatar.com/avatar/5010d337c197f7216ccfc838b78f6a7f?size=64&default=identicon","https://www.gravatar.com/avatar/5010d337c197f7216ccfc838b78f6a7f?size=512&default=identicon",{"_198":288,"_230":278},{"_7":464,"_255":191,"_256":465,"_258":466,"_20":-5,"_261":467},"b68cce5a-0a9f-42c2-83f2-3ad0b129a94a","https://cdn.discordapp.com/avatars/707910345523462184/6b8d4c17068be059db32ed9496379ee9.png?size=64","https://cdn.discordapp.com/avatars/707910345523462184/6b8d4c17068be059db32ed9496379ee9.png?size=512",{"_198":277,"_230":278,"_186":468},{"_9":320,"_267":270,"_269":280},{"_7":470,"_255":191,"_256":471,"_258":472,"_20":-5,"_261":473},"007e64da-4f4d-46f4-a639-b97abb3e1763","https://cdn.discordapp.com/avatars/251913794752610306/77b2fb77f20b17fba654f8249e055794.png?size=64","https://cdn.discordapp.com/avatars/251913794752610306/77b2fb77f20b17fba654f8249e055794.png?size=512",{"_198":303,"_230":278,"_186":474},{"_9":320,"_267":281,"_269":268},{"_7":476,"_255":191,"_256":477,"_258":478,"_20":-5,"_261":479},"0c3548c0-5c2e-4dbb-aa86-96f7d9ac7264","https://cdn.discordapp.com/avatars/845542637581631498/9275261f3169de0ec86d2d1b7a74fb4a.png?size=64","https://cdn.discordapp.com/avatars/845542637581631498/9275261f3169de0ec86d2d1b7a74fb4a.png?size=512",{"_198":303,"_230":289,"_186":480},{"_9":266,"_267":281,"_269":268},{"_7":482,"_255":191,"_256":483,"_258":484,"_20":-5,"_261":485},"c5814f1d-a9d8-440c-a1e4-95aa8f7e351d","https://www.gravatar.com/avatar/1959b7a7525a61d2a09a75de7d97eae3?size=64&default=identicon","https://www.gravatar.com/avatar/1959b7a7525a61d2a09a75de7d97eae3?size=512&default=identicon",{"_198":348,"_230":278,"_186":486},{"_9":266,"_267":281,"_269":281},{"_7":488,"_261":489},"nx29fi5q3qsz8yux287pq0i9",{"_198":143,"_230":231,"_186":490},{"_267":281,"_269":-5,"_9":-5},"routes/_app+/_layout",{"_198":143,"_493":494,"_619":620,"_622":16},"exercises",[495,509,519,535,558,575,592,608],{"_267":281,"_142":496,"_497":498,"_501":502,"_504":505},"Composition","solutions",[499],{"_269":281,"_142":500,"_20":27},"Composition and Layout Components","problems",[503],{"_269":281,"_142":500,"_20":21},"steps",[506],{"_269":281,"_142":500,"_20":21,"_266":507,"_320":508},{"_20":21,"_142":500},{"_20":27,"_142":500},{"_267":268,"_142":510,"_497":511,"_501":513,"_504":515},"Latest Ref",[512],{"_269":281,"_142":510,"_20":35},[514],{"_269":281,"_142":510,"_20":31},[516],{"_269":281,"_142":510,"_20":31,"_266":517,"_320":518},{"_20":31,"_142":510},{"_20":35,"_142":510},{"_267":270,"_142":520,"_497":521,"_501":525,"_504":528},"Compound Components",[522,523],{"_269":281,"_142":520,"_20":43},{"_269":268,"_142":524,"_20":51},"Compound Components Validation",[526,527],{"_269":281,"_142":520,"_20":39},{"_269":268,"_142":524,"_20":47},[529,532],{"_269":281,"_142":520,"_20":39,"_266":530,"_320":531},{"_20":39,"_142":520},{"_20":43,"_142":520},{"_269":268,"_142":524,"_20":47,"_266":533,"_320":534},{"_20":47,"_142":524},{"_20":51,"_142":524},{"_267":280,"_142":536,"_497":537,"_501":544,"_504":548},"Slots",[538,540,542],{"_269":281,"_142":539,"_20":59},"Slot Context",{"_269":268,"_142":541,"_20":67},"Generic Slot Components",{"_269":270,"_142":543,"_20":75},"Slot Prop",[545,546,547],{"_269":281,"_142":539,"_20":55},{"_269":268,"_142":541,"_20":63},{"_269":270,"_142":543,"_20":71},[549,552,555],{"_269":281,"_142":539,"_20":55,"_266":550,"_320":551},{"_20":55,"_142":539},{"_20":59,"_142":539},{"_269":268,"_142":541,"_20":63,"_266":553,"_320":554},{"_20":63,"_142":541},{"_20":67,"_142":541},{"_269":270,"_142":543,"_20":71,"_266":556,"_320":557},{"_20":71,"_142":543},{"_20":75,"_142":543},{"_267":305,"_142":559,"_497":560,"_501":565,"_504":568},"Prop Collections and Getters",[561,563],{"_269":281,"_142":562,"_20":83},"Prop Collections",{"_269":268,"_142":564,"_20":91},"Prop Getters",[566,567],{"_269":281,"_142":562,"_20":79},{"_269":268,"_142":564,"_20":87},[569,572],{"_269":281,"_142":562,"_20":79,"_266":570,"_320":571},{"_20":79,"_142":562},{"_20":83,"_142":562},{"_269":268,"_142":564,"_20":87,"_266":573,"_320":574},{"_20":87,"_142":564},{"_20":91,"_142":564},{"_267":415,"_142":576,"_497":577,"_501":582,"_504":585},"State Initializer",[578,580],{"_269":281,"_142":579,"_20":99},"Initialize Toggle",{"_269":268,"_142":581,"_20":107},"Stability",[583,584],{"_269":281,"_142":579,"_20":95},{"_269":268,"_142":581,"_20":103},[586,589],{"_269":281,"_142":579,"_20":95,"_266":587,"_320":588},{"_20":95,"_142":579},{"_20":99,"_142":579},{"_269":268,"_142":581,"_20":103,"_266":590,"_320":591},{"_20":103,"_142":581},{"_20":107,"_142":581},{"_267":371,"_142":593,"_497":594,"_501":598,"_504":601},"State Reducer",[595,596],{"_269":281,"_142":593,"_20":115},{"_269":268,"_142":597,"_20":123},"Default State Reducer",[599,600],{"_269":281,"_142":593,"_20":111},{"_269":268,"_142":597,"_20":119},[602,605],{"_269":281,"_142":593,"_20":111,"_266":603,"_320":604},{"_20":111,"_142":593},{"_20":115,"_142":593},{"_269":268,"_142":597,"_20":119,"_266":606,"_320":607},{"_20":119,"_142":597},{"_20":123,"_142":597},{"_267":609,"_142":610,"_497":611,"_501":613,"_504":615},8,"Control Props",[612],{"_269":281,"_142":610,"_20":131},[614],{"_269":281,"_142":610,"_20":127},[616],{"_269":281,"_142":610,"_20":127,"_266":617,"_320":618},{"_20":127,"_142":610},{"_20":131,"_142":610},"playground",{"_621":-5,"_267":-2,"_269":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_625":626,"_198":143,"_186":627,"_687":688,"_689":690,"_691":692,"_696":697,"_702":703},"articleId","workshop-advanced-react-patterns-1-finished",{"_22":628,"_267":281,"_629":630,"_142":496,"_631":632,"_633":634,"_635":636,"_638":639,"_504":641,"_501":675,"_497":681},"/myapp/workshop-content/exercises/01.composition","dirName","01.composition","instructionsCode","var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var l in e)r(a,l,{get:e[l],enumerable:!0})},o=(a,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!y.call(a,s)&&s!==l&&r(a,s,{get:()=>e[s],enumerable:!(c=p(e,s))||c.enumerable});return a};var N=(a,e,l)=>(l=a!=null?b(u(a)):{},o(e||!a||!a.__esModule?r(l,\"default\",{value:a,enumerable:!0}):l,a)),g=a=>o(r({},\"__esModule\",{value:!0}),a);var i=v((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\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",ul:\"ul\",...a.components},{EpicVideo:l}=e;return l||w(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Composition\"}),`\n`,(0,n.jsx)(l,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-composition\"}),`\n`,(0,n.jsx)(\"callout-success\",{children:(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:\"One liner:\"}),` The Composition and Layout Components Pattern helps to avoid\nthe prop drilling problem and enhances the reusability of your components.`]})}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F989} If you're unfamiliar with the concept of \"Prop Drilling\" then please read\n`,(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/prop-drilling\",children:\"this blog post\"}),` before going\nforward.`]}),`\n`,(0,n.jsx)(e.p,{children:`Let's skip to the end here. It's surprising what you can accomplish by passing\nreact elements rather than treating components as uncrossable boundaries. We'll\nhave a practical example in our exercise, so let me show you a quick and easy\ncontrived example to explain what we'll be doing here:`}),`\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:\"App\"}),\"() {\",`\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:\"=\"}),\" () \",(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\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Child\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"count\"}),(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:\"count\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(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(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Child\"}),\"({ \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(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(--base08)\"},children:\"count\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"number\"}),\"; \",(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\":\"8\",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\":\"9\",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\":\"10\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"strong\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t\t\tI am a child and I don't actually use count or increment. My child does\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\t\t\tthough so I have to accept those as props and forward them along.\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t\t\",`\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:\"GrandChild\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"count\"}),(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:\"count\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onIncrementClick\"}),(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:\"}\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"GrandChild\"}),\"({\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"onIncrementClick\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"}\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",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\":\"24\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onIncrementClick\"}),(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\":\"25\",children:[\"}) {\",`\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\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",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\":\"28\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"small\"}),\">I am a grand child and I just pass things off to a button\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",children:[\"\t\t\t<\",(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:\"onIncrementClick\"}),(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:\"count\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:`This prop drilling stuff is one of the reasons so many people have jumped onto\nstate management solutions, whether it be libraries or React context. However,\nif we restructure things a bit, we'll notice that things get quite a bit easier\nwithout losing the flexibility we're hoping for.`}),`\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:\"App\"}),\"() {\",`\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:\"=\"}),\" () \",(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\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Child\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"grandChild\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"GrandChild\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"button\"}),(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:\"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:\"onIncrementClick\"}),(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:\"count\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\t\t/>\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t/>\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Child\"}),\"({ \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"grandChild\"}),\" }\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"grandChild\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ReactNode\"}),\" }) {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",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\":\"17\",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\":\"18\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"strong\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\t\t\t\tI am a child and I don't actually use count or increment. My child does\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"\t\t\t\tthough so I have to accept those as props and forward them along.\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[\"\t\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"grandChild\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"GrandChild\"}),\"({ \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"button\"}),\" }\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"button\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ReactNode\"}),\" }) {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",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\":\"29\",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\":\"30\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"small\"}),\">I am a grand child and I just pass things off to a button\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",children:[\"\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"button\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:`Now, clearly you can take this too far (our contrived example above probably\ndoes), but the point is that by structuring things a little differently, you can\nkeep the components that don't care about state free of the plumbing needed to\nmake it work. If we decided we needed to manage some more state in the App and\nthat was needed in the button then we could update only the app for that.`}),`\n`,(0,n.jsxs)(e.p,{children:[`This style of composition has helped me reduce the amount of components and\nfiles I touch (break?) when I need to make a change and it's also made my\nabstractions much easier (imagine if we wanted to reuse the `,(0,n.jsx)(e.code,{children:\"Child\"}),` from above\nbut needed to customize the `,(0,n.jsx)(e.code,{children:\"grandChild\"}),`. Much easier when we're just accepting\na prop for it).`]}),`\n`,(0,n.jsx)(e.p,{children:`When we structure our components to only really deal with props it actually\ncares about, then it becomes more of a \"layout\" component. A component\nresponsible for laying out the react elements it accepts as props. If you're\nfamiliar with Vue, this concept is similar to the concept of scoped slots.`}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F4DC} Read more about this in my blog post:\n`,(0,n.jsx)(e.a,{href:\"https://epicreact.dev/one-react-mistake-thats-slowing-you-down\",children:\"One React mistake that's slowing you down\"})]}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\"Real World Projects that use this pattern:\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:\"https://kentcdodds.com\",children:\"kentcdodds.com\"}),` (for the hero component you see at\nthe top of most pages)`]}),`\n`]})]})}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 g(D);})();\n;return Component;","finishedCode","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),_=(e,o)=>{for(var t in o)i(e,t,{get:o[t],enumerable:!0})},s=(e,o,t,c)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let r of h(o))!w.call(e,r)&&r!==t&&i(e,r,{get:()=>o[r],enumerable:!(c=f(o,r))||c.enumerable});return e};var j=(e,o,t)=>(t=e!=null?u(l(e)):{},s(o||!e||!e.__esModule?i(t,\"default\",{value:e,enumerable:!0}):t,e)),k=e=>s(i({},\"__esModule\",{value:!0}),e);var p=x((b,d)=>{d.exports=_jsx_runtime});var E={};_(E,{default:()=>m,frontmatter:()=>g});var n=j(p()),g=void 0;function a(e){let o={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:t}=o;return t||y(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.h1,{children:\"Composition\"}),`\n`,(0,n.jsx)(t,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-composition\"}),`\n`,(0,n.jsx)(o.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work! You now know how to create layout components to reduce prop\ndrilling!`})]})}function m(e={}){let{wrapper:o}=e.components||{};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(a,{...e})}):a(e)}function y(e,o){throw new Error(\"Expected \"+(o?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(E);})();\n;return Component;","instructionsEpicVideoEmbeds",[637],"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-composition","finishedEpicVideoEmbeds",[640],"https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-composition",[642],{"_269":281,"_266":643,"_320":663},{"_20":21,"_142":500,"_629":644,"_22":23,"_24":25,"_631":645,"_646":647,"_649":650,"_657":658,"_660":661,"_267":281,"_269":281,"_9":266,"_662":27},"01.problem.compose","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of l(e))!g.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return t};var x=(t,e,o)=>(o=t!=null?p(f(t)):{},a(e||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>a(s({},\"__esModule\",{value:!0}),t);var u=y((C,c)=>{c.exports=_jsx_runtime});var j={};w(j,{default:()=>h,frontmatter:()=>v});var n=x(u()),v=void 0;function d(t){let e={em:\"em\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||_(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Composition and Layout Components\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/composition-and-layout-components\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} In this exercise we've got a simple user interface with several components\nnecessitating passing state and updaters around. We're going to restructure\nthings so we pass react elements instead of state and updaters. We might be\ngoing a `,(0,n.jsx)(e.em,{children:\"tiny\"}),` bit overboard, but the goal is for this to be instructive for\nyou.`]}),`\n`,(0,n.jsx)(e.p,{children:`By the time you're done, the whole UI should look and function exactly as\nbefore, but you'll get a sense for how to use this pattern. The tests will be\nthere just for you to verify you haven't broken anything that should be working\nif you want to use them.`})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}function _(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(j);})();\n;return Component;","epicVideoEmbeds",[648],"https://www.epicreact.dev/workshops/advanced-react-patterns/composition-and-layout-components","test",{"_9":651,"_652":653,"_654":655},"browser","pathname","/app/01.01.problem/test/","testFiles",[656],"ui-still-works.test.tsx","dev",{"_9":651,"_652":659},"/app/01.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/01.composition/01.problem.compose?view=editor&title=Composition+and+Layout+Components+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":27,"_142":500,"_629":664,"_22":28,"_24":29,"_631":665,"_646":666,"_649":668,"_657":671,"_660":673,"_267":281,"_269":281,"_9":320,"_674":-5},"01.solution.compose","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var x=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),w=(e,n)=>{for(var t in n)i(e,t,{get:n[t],enumerable:!0})},s=(e,n,t,a)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of l(n))!y.call(e,r)&&r!==t&&i(e,r,{get:()=>n[r],enumerable:!(a=h(n,r))||a.enumerable});return e};var g=(e,n,t)=>(t=e!=null?m(f(e)):{},s(n||!e||!e.__esModule?i(t,\"default\",{value:e,enumerable:!0}):t,e)),_=e=>s(i({},\"__esModule\",{value:!0}),e);var d=x((E,c)=>{c.exports=_jsx_runtime});var b={};w(b,{default:()=>p,frontmatter:()=>j});var o=g(d()),j=void 0;function u(e){let n={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:t}=n;return t||v(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{children:\"Composition and Layout Components\"}),`\n`,(0,o.jsx)(t,{url:\"https://www.epicreact.dev/workshops/advanced-react-patterns/composition-and-layout-components/solution\"}),`\n`,(0,o.jsx)(n.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} In this one we didn't actually change any visual behavior (the test was\npassing before your changes). But we hopefully demonstrated how restructuring\nyour components can make it easier to maintain and help you avoid the prop\ndrilling problem and reduce the amount you feel you need to use context.`})]})}function p(e={}){let{wrapper:n}=e.components||{};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}function v(e,n){throw new Error(\"Expected \"+(n?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(b);})();\n;return Component;",[667],"https://www.epicreact.dev/workshops/advanced-react-patterns/composition-and-layout-components/solution",{"_9":651,"_652":669,"_654":670},"/app/01.01.solution/test/",[656],{"_9":651,"_652":672},"/app/01.01.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-patterns/tree/main/exercises/01.composition/01.solution.compose?view=editor&title=Composition+and+Layout+Components+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",[676],{"_20":21,"_142":500,"_629":644,"_22":23,"_24":25,"_631":645,"_646":677,"_649":678,"_657":680,"_660":661,"_267":281,"_269":281,"_9":266,"_662":27},[648],{"_9":651,"_652":653,"_654":679},[656],{"_9":651,"_652":659},[682],{"_20":27,"_142":500,"_629":664,"_22":28,"_24":29,"_631":665,"_646":683,"_649":684,"_657":686,"_660":673,"_267":281,"_269":281,"_9":320,"_674":-5},[667],{"_9":651,"_652":669,"_654":685},[656],{"_9":651,"_652":672},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=Advanced%20React%20Patterns%20%F0%9F%A4%AF&entry.428900931=Composition","epicVideoInfosPromise",["P",690],"exerciseFinished",{"_693":694,"_24":695},"file","/myapp/workshop-content/exercises/01.composition/FINISHED.mdx","exercises/01.composition/FINISHED.mdx","prevStepLink",{"_698":699,"_700":701},"to","/exercise/01/01/solution","aria-label","Composition and Layout Components (solution)","nextStepLink",{"_698":704,"_700":510},"/exercise/02","actionData","errors"]

01. Composition/Elaboration