[{"_1":2,"_600":-5,"_601":-5},"loaderData",{"_3":4,"_415":416,"_518":519,"_599":-5},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_134":135,"_187":137,"_188":139,"_140":141,"_189":190,"_200":201,"_225":-5,"_226":-5,"_227":228},"userId",{"_7":8,"_9":10},"id","x8bhm0tn3dv934cv9jogk6g1","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","workshopConfig",{"_136":137,"_138":139,"_140":141,"_147":148,"_165":166,"_167":168,"_169":170,"_171":172,"_175":176,"_181":182,"_185":186},"title","Advanced React Patterns 🤯","subtitle","Learn how to build simple and flexible React Components and Hooks using modern patterns","instructor",{"_20":142,"_143":144,"_145":146},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_149":150,"_151":152,"_153":154,"_155":156,"_157":158,"_159":160,"_161":162},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","advanced-react-patterns","discordChannelId","1285244676286189569","discordTags",[163,164],"1285246046498328627","1285245811944325193","onboardingVideo","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",{"_173":174},"view","editor","forms",{"_177":178,"_179":180},"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",{"_183":184},"enabled",true,"initialRoute","/","workshopTitle","workshopSubtitle","ENV",{"_191":192,"_193":194,"_195":168,"_196":170,"_197":184,"_198":199},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","5.9.3","requestInfo",{"_202":203,"_204":205,"_206":207,"_208":209,"_210":209,"_211":212,"_219":220,"_221":222,"_223":186,"_224":184},"protocol","http:","hostname","advanced-patterns.epicreact.dev","port","","origin","http://advanced-patterns.epicreact.dev","domain","hints",{"_213":214,"_215":216,"_217":218},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/01/finished","session",{"_213":-5},"separator","online","toast","confettiId","presence",{"_229":230},"users",[231,246,259,268,277,286,293,300,307,314,323,330,337,344,352,359,367,374,378,385,391,396,400,406,411],{"_7":232,"_233":234,"_20":235,"_236":237},"f7bc55be219a433bc816de5628b4a9b5","avatarUrl","https://cdn.discordapp.com/avatars/1316820405436284989/4cf322d2bea8732605e60f8a6c7b20fb?size=512","Esquinte 🌌 🚀","location",{"_187":238,"_208":239,"_179":240},"📐 Pixel Perfect Tailwind","http://localhost:5639",{"_9":241,"_242":243,"_244":245},"problem","exerciseNumber",6,"stepNumber",3,{"_7":247,"_248":184,"_249":250,"_251":252,"_20":253,"_236":254},"c44c7d25-a699-4118-bff4-63ef20c18803","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/379487909da520c969e287be23db9542?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/379487909da520c969e287be23db9542?size=512&default=identicon","Omar Aguinaga",{"_187":255,"_208":239,"_179":256},"Professional Web Forms 📝",{"_9":241,"_242":257,"_244":258},7,1,{"_7":260,"_248":184,"_249":261,"_251":262,"_20":263,"_236":264},"478bd9f1-a669-4d75-965f-3fd4c66238f6","https://cdn.discordapp.com/avatars/831188292863131649/c5971eb9bbc4a738f5a1036c54075e41.png?size=64","https://cdn.discordapp.com/avatars/831188292863131649/c5971eb9bbc4a738f5a1036c54075e41.png?size=512","Mariana Vinyolas",{"_187":265,"_208":239,"_179":266},"React Fundamentals ⚛",{"_242":267},8,{"_7":269,"_248":184,"_249":270,"_251":271,"_20":272,"_236":273},"5f153362-6e45-4f26-be28-2c302d91752d","https://www.gravatar.com/avatar/2b3d26c690ae6c978453e1202fcbe7f0?size=64&default=identicon","https://www.gravatar.com/avatar/2b3d26c690ae6c978453e1202fcbe7f0?size=512&default=identicon","zhuolei dong",{"_187":274,"_208":239,"_179":275},"React Hooks 🎣",{"_9":276,"_242":258,"_244":258},"solution",{"_7":278,"_248":16,"_249":279,"_251":280,"_20":281,"_236":282},"2e1b04ec-df36-42be-9c14-13a56f098441","https://avatars.githubusercontent.com/u/46302289?v=4&size=64","https://avatars.githubusercontent.com/u/46302289?v=4&size=512","Camilo ",{"_187":283,"_208":239,"_179":284},"Data Modeling Deep Dive 💾",{"_9":241,"_242":285,"_244":285},2,{"_7":287,"_248":184,"_249":288,"_251":289,"_20":290,"_236":291},"da56e761-9364-4c90-9daf-02a30ce354c7","https://www.gravatar.com/avatar/e751defb6281f0367ce8b131cf35f26f?size=64&default=identicon","https://www.gravatar.com/avatar/e751defb6281f0367ce8b131cf35f26f?size=512&default=identicon","HENG-HAO PU",{"_187":274,"_208":239,"_179":292},{"_242":243},{"_7":294,"_248":184,"_249":295,"_251":296,"_20":297,"_236":298},"2c7597bd-5caf-4f5b-93c7-23d5e251227d","https://www.gravatar.com/avatar/50a196709d15ddc561f8994ad8717e46?size=64&default=identicon","https://www.gravatar.com/avatar/50a196709d15ddc561f8994ad8717e46?size=512&default=identicon","Michał Borowy",{"_187":255,"_208":239,"_179":299},{"_9":241,"_242":243,"_244":245},{"_7":301,"_248":184,"_249":302,"_251":303,"_20":304,"_236":305},"2ad3f9a0-d8e6-49c8-bf82-2b41199a1bbf","https://www.gravatar.com/avatar/3c77ed63b0adbee55a74923d76fbc818?size=64&default=identicon","https://www.gravatar.com/avatar/3c77ed63b0adbee55a74923d76fbc818?size=512&default=identicon","Tiago Benedetti",{"_187":255,"_208":239,"_179":306},{"_9":241,"_242":258,"_244":258},{"_7":308,"_248":184,"_249":309,"_251":310,"_20":311,"_236":312},"f1822cc7-88d2-47ff-9578-631565088b71","https://www.gravatar.com/avatar/52f0c7f2314eda0da9957e028c9ec4f8?size=64&default=identicon","https://www.gravatar.com/avatar/52f0c7f2314eda0da9957e028c9ec4f8?size=512&default=identicon","Sergio Nieto",{"_187":265,"_208":239,"_179":313},{"_9":276,"_242":245,"_244":285},{"_7":315,"_248":184,"_249":316,"_251":317,"_20":318,"_236":319},"edca25cd-4f83-439e-9126-464009a03dc7","https://www.gravatar.com/avatar/90a98f2990acfc0e2977921914e2a2f0?size=64&default=identicon","https://www.gravatar.com/avatar/90a98f2990acfc0e2977921914e2a2f0?size=512&default=identicon","Nate Daniel",{"_187":320,"_208":239,"_179":321},"Advanced React APIs 🔥",{"_242":322},5,{"_7":324,"_248":184,"_249":325,"_251":326,"_20":327,"_236":328},"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",{"_187":265,"_208":239,"_179":329},{"_242":245},{"_7":331,"_248":184,"_249":332,"_251":333,"_20":334,"_236":335},"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",{"_187":336,"_208":239},"React Performance ⚡",{"_7":338,"_248":184,"_249":339,"_251":340,"_20":341,"_236":342},"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",{"_187":137,"_208":239,"_179":343},{"_242":267},{"_7":345,"_248":184,"_249":346,"_251":347,"_20":348,"_236":349},"8e9f513a-7e5d-49ab-ad9e-6aac9b519bb3","https://www.gravatar.com/avatar/f397ad50c122de5d571a109a2a6dd35d?size=64&default=identicon","https://www.gravatar.com/avatar/f397ad50c122de5d571a109a2a6dd35d?size=512&default=identicon","Rahul Keerthi",{"_187":350,"_208":239,"_179":351},"React Suspense 🔀",{"_242":258},{"_7":353,"_248":184,"_249":354,"_251":355,"_20":356,"_236":357},"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",{"_187":137,"_208":239,"_179":358},{"_242":285},{"_7":360,"_248":184,"_249":361,"_251":362,"_20":363,"_236":364},"e00a63fb-b55c-47be-990e-b1bc0daa312b","https://www.gravatar.com/avatar/ae4a29870af4c45072761c23b05f747d?size=64&default=identicon","https://www.gravatar.com/avatar/ae4a29870af4c45072761c23b05f747d?size=512&default=identicon","mark dolan",{"_187":255,"_208":365,"_179":366},"http://localhost:5640",{"_242":322},{"_7":368,"_248":184,"_249":369,"_251":370,"_20":371,"_236":372},"19b5e72d-40c5-4e46-b6cf-73c627d25881","https://cdn.discordapp.com/avatars/474954189320093696/6572adb65079a28ad9f9c8ad9462d263.png?size=64","https://cdn.discordapp.com/avatars/474954189320093696/6572adb65079a28ad9f9c8ad9462d263.png?size=512","David Burson",{"_187":336,"_208":239,"_179":373},{"_9":276,"_242":322,"_244":245},{"_7":375,"_236":376},"jkvum502wfscloyfqo7zxnys",{"_187":265,"_208":239,"_179":377},{"_9":241,"_242":258,"_244":258},{"_7":379,"_248":16,"_249":380,"_251":381,"_20":-5,"_236":382},"3851d473-626e-4635-a4e7-2e03ae01755b","https://www.gravatar.com/avatar/a47372fe46c3f025bdf7811226ac13f3?size=64&default=identicon","https://www.gravatar.com/avatar/a47372fe46c3f025bdf7811226ac13f3?size=512&default=identicon",{"_187":320,"_208":239,"_179":383},{"_242":384},4,{"_7":386,"_248":184,"_249":387,"_251":388,"_20":-5,"_236":389},"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",{"_187":265,"_208":239,"_179":390},{"_242":257},{"_7":392,"_236":393},"zijyezyyi2r9fijfj9rkzztp",{"_187":394,"_208":395},"Tailwind CSS Color Tokens 🎨","http://epicweb-dev-tailwindcss-color-tokens.fly.dev",{"_7":397,"_236":398},"bafmdwfl2gsolmm3o19qhe5r",{"_187":274,"_208":239,"_179":399},{"_9":241,"_242":285,"_244":285},{"_7":401,"_248":184,"_249":402,"_251":403,"_20":-5,"_236":404},"dd80a1ee-d473-4bc2-ba08-7f060081b8a2","https://www.gravatar.com/avatar/09eded68628cc0b828181c0b0e94b570?size=64&default=identicon","https://www.gravatar.com/avatar/09eded68628cc0b828181c0b0e94b570?size=512&default=identicon",{"_187":265,"_208":239,"_179":405},{"_9":276,"_242":245,"_244":258},{"_7":407,"_236":408},"nt2l9t00i2aod5ux17jikwg1",{"_187":265,"_208":409,"_179":410},"http://fundamentals.epicreact.dev",{"_9":241,"_242":285,"_244":245},{"_7":412,"_236":413},"tscu5se0jk34h57oxa9dyx52",{"_187":137,"_208":209,"_179":414},{"_242":258,"_244":-5,"_9":-5},"routes/_app+/_layout",{"_187":137,"_417":418,"_514":515,"_517":16},"exercises",[419,431,439,451,468,481,494,506],{"_242":258,"_136":420,"_421":422,"_425":426,"_428":429},"Composition","solutions",[423],{"_244":258,"_136":424,"_20":27},"Composition and Layout Components","problems",[427],{"_244":258,"_136":424,"_20":21},"steps",[430],{"_244":258,"_136":424,"_20":21},{"_242":285,"_136":432,"_421":433,"_425":435,"_428":437},"Latest Ref",[434],{"_244":258,"_136":432,"_20":35},[436],{"_244":258,"_136":432,"_20":31},[438],{"_244":258,"_136":432,"_20":31},{"_242":245,"_136":440,"_421":441,"_425":445,"_428":448},"Compound Components",[442,443],{"_244":258,"_136":440,"_20":43},{"_244":285,"_136":444,"_20":51},"Compound Components Validation",[446,447],{"_244":258,"_136":440,"_20":39},{"_244":285,"_136":444,"_20":47},[449,450],{"_244":258,"_136":440,"_20":39},{"_244":285,"_136":444,"_20":47},{"_242":384,"_136":452,"_421":453,"_425":460,"_428":464},"Slots",[454,456,458],{"_244":258,"_136":455,"_20":59},"Slot Context",{"_244":285,"_136":457,"_20":67},"Generic Slot Components",{"_244":245,"_136":459,"_20":75},"Slot Prop",[461,462,463],{"_244":258,"_136":455,"_20":55},{"_244":285,"_136":457,"_20":63},{"_244":245,"_136":459,"_20":71},[465,466,467],{"_244":258,"_136":455,"_20":55},{"_244":285,"_136":457,"_20":63},{"_244":245,"_136":459,"_20":71},{"_242":322,"_136":469,"_421":470,"_425":475,"_428":478},"Prop Collections and Getters",[471,473],{"_244":258,"_136":472,"_20":83},"Prop Collections",{"_244":285,"_136":474,"_20":91},"Prop Getters",[476,477],{"_244":258,"_136":472,"_20":79},{"_244":285,"_136":474,"_20":87},[479,480],{"_244":258,"_136":472,"_20":79},{"_244":285,"_136":474,"_20":87},{"_242":243,"_136":482,"_421":483,"_425":488,"_428":491},"State Initializer",[484,486],{"_244":258,"_136":485,"_20":99},"Initialize Toggle",{"_244":285,"_136":487,"_20":107},"Stability",[489,490],{"_244":258,"_136":485,"_20":95},{"_244":285,"_136":487,"_20":103},[492,493],{"_244":258,"_136":485,"_20":95},{"_244":285,"_136":487,"_20":103},{"_242":257,"_136":495,"_421":496,"_425":500,"_428":503},"State Reducer",[497,498],{"_244":258,"_136":495,"_20":115},{"_244":285,"_136":499,"_20":123},"Default State Reducer",[501,502],{"_244":258,"_136":495,"_20":111},{"_244":285,"_136":499,"_20":119},[504,505],{"_244":258,"_136":495,"_20":111},{"_244":285,"_136":499,"_20":119},{"_242":267,"_136":507,"_421":508,"_425":510,"_428":512},"Control Props",[509],{"_244":258,"_136":507,"_20":131},[511],{"_244":258,"_136":507,"_20":127},[513],{"_244":258,"_136":507,"_20":127},"playground",{"_516":-5,"_242":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_520":521,"_187":137,"_179":522,"_581":582,"_583":584,"_585":586,"_590":591,"_596":597},"articleId","workshop-advanced-react-patterns-1-finished",{"_242":258,"_523":524,"_136":420,"_525":526,"_527":528,"_529":530,"_532":533,"_428":535,"_425":569,"_421":575},"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",[531],"https://www.epicreact.dev/workshops/advanced-react-patterns/intro-to-composition","finishedEpicVideoEmbeds",[534],"https://www.epicreact.dev/workshops/advanced-react-patterns/dad-joke-break-composition",[536],{"_244":258,"_241":537,"_276":557},{"_20":21,"_136":424,"_523":538,"_22":23,"_24":25,"_525":539,"_540":541,"_543":544,"_551":552,"_554":555,"_242":258,"_244":258,"_9":241,"_556":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",[542],"https://www.epicreact.dev/workshops/advanced-react-patterns/composition-and-layout-components","test",{"_9":545,"_546":547,"_548":549},"browser","pathname","/app/01.01.problem/test/","testFiles",[550],"ui-still-works.test.tsx","dev",{"_9":545,"_546":553},"/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","solutionName",{"_20":27,"_136":424,"_523":558,"_22":28,"_24":29,"_525":559,"_540":560,"_543":562,"_551":565,"_554":567,"_242":258,"_244":258,"_9":276,"_568":-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;",[561],"https://www.epicreact.dev/workshops/advanced-react-patterns/composition-and-layout-components/solution",{"_9":545,"_546":563,"_548":564},"/app/01.01.solution/test/",[550],{"_9":545,"_546":566},"/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","problemName",[570],{"_20":21,"_136":424,"_523":538,"_22":23,"_24":25,"_525":539,"_540":571,"_543":572,"_551":574,"_554":555,"_242":258,"_244":258,"_9":241,"_556":27},[542],{"_9":545,"_546":547,"_548":573},[550],{"_9":545,"_546":553},[576],{"_20":27,"_136":424,"_523":558,"_22":28,"_24":29,"_525":559,"_540":577,"_543":578,"_551":580,"_554":567,"_242":258,"_244":258,"_9":276,"_568":-5},[561],{"_9":545,"_546":563,"_548":579},[550],{"_9":545,"_546":566},"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",584],"exerciseFinished",{"_587":588,"_24":589},"file","/myapp/workshop-content/exercises/01.composition/FINISHED.mdx","exercises/01.composition/FINISHED.mdx","prevStepLink",{"_592":593,"_594":595},"to","/exercise/01/01/solution","aria-label","Composition and Layout Components (solution)","nextStepLink",{"_592":598,"_594":432},"/exercise/02","routes/_app+/exercise+/_layout","actionData","errors"]

01. Composition/Elaboration