[{"_1":2,"_631":-5,"_632":-5},"loaderData",{"_3":4,"_332":333,"_478":479},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_158":159,"_161":162,"_163":16,"_164":165,"_221":167,"_222":169,"_170":171,"_223":224,"_245":246,"_270":-5,"_271":-5,"_272":273},"userId",{"_7":8,"_9":10},"id","gbtd90mmj83f3bec4yo4ujp3","type","cookie.randomId","preferences","progress",[],"user","userHasAccess",false,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.managing-ui-state/01.problem.use-state","relativePath","exercises/01.managing-ui-state/01.problem.use-state",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.managing-ui-state/01.solution.use-state","exercises/01.managing-ui-state/01.solution.use-state",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.managing-ui-state/02.problem.control","exercises/01.managing-ui-state/02.problem.control",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.managing-ui-state/02.solution.control","exercises/01.managing-ui-state/02.solution.control",{"_20":39,"_22":40,"_24":41},"01.03.problem","/myapp/workshop-content/exercises/01.managing-ui-state/03.problem.derive","exercises/01.managing-ui-state/03.problem.derive",{"_20":43,"_22":44,"_24":45},"01.03.solution","/myapp/workshop-content/exercises/01.managing-ui-state/03.solution.derive","exercises/01.managing-ui-state/03.solution.derive",{"_20":47,"_22":48,"_24":49},"01.04.problem","/myapp/workshop-content/exercises/01.managing-ui-state/04.problem.init","exercises/01.managing-ui-state/04.problem.init",{"_20":51,"_22":52,"_24":53},"01.04.solution","/myapp/workshop-content/exercises/01.managing-ui-state/04.solution.init","exercises/01.managing-ui-state/04.solution.init",{"_20":55,"_22":56,"_24":57},"01.05.problem","/myapp/workshop-content/exercises/01.managing-ui-state/05.problem.cb","exercises/01.managing-ui-state/05.problem.cb",{"_20":59,"_22":60,"_24":61},"01.05.solution","/myapp/workshop-content/exercises/01.managing-ui-state/05.solution.cb","exercises/01.managing-ui-state/05.solution.cb",{"_20":63,"_22":64,"_24":65},"02.01.problem","/myapp/workshop-content/exercises/02.side-effects/01.problem.effects","exercises/02.side-effects/01.problem.effects",{"_20":67,"_22":68,"_24":69},"02.01.solution","/myapp/workshop-content/exercises/02.side-effects/01.solution.effects","exercises/02.side-effects/01.solution.effects",{"_20":71,"_22":72,"_24":73},"02.02.problem","/myapp/workshop-content/exercises/02.side-effects/02.problem.cleanup","exercises/02.side-effects/02.problem.cleanup",{"_20":75,"_22":76,"_24":77},"02.02.solution","/myapp/workshop-content/exercises/02.side-effects/02.solution.cleanup","exercises/02.side-effects/02.solution.cleanup",{"_20":79,"_22":80,"_24":81},"03.01.problem","/myapp/workshop-content/exercises/03.lifting-state/01.problem.lift","exercises/03.lifting-state/01.problem.lift",{"_20":83,"_22":84,"_24":85},"03.01.solution","/myapp/workshop-content/exercises/03.lifting-state/01.solution.lift","exercises/03.lifting-state/01.solution.lift",{"_20":87,"_22":88,"_24":89},"03.02.problem","/myapp/workshop-content/exercises/03.lifting-state/02.problem.lift-array","exercises/03.lifting-state/02.problem.lift-array",{"_20":91,"_22":92,"_24":93},"03.02.solution","/myapp/workshop-content/exercises/03.lifting-state/02.solution.lift-array","exercises/03.lifting-state/02.solution.lift-array",{"_20":95,"_22":96,"_24":97},"03.03.problem","/myapp/workshop-content/exercises/03.lifting-state/03.problem.colocate","exercises/03.lifting-state/03.problem.colocate",{"_20":99,"_22":100,"_24":101},"03.03.solution","/myapp/workshop-content/exercises/03.lifting-state/03.solution.colocate","exercises/03.lifting-state/03.solution.colocate",{"_20":103,"_22":104,"_24":105},"04.01.problem","/myapp/workshop-content/exercises/04.dom/01.problem.ref","exercises/04.dom/01.problem.ref",{"_20":107,"_22":108,"_24":109},"04.01.solution","/myapp/workshop-content/exercises/04.dom/01.solution.ref","exercises/04.dom/01.solution.ref",{"_20":111,"_22":112,"_24":113},"04.02.problem","/myapp/workshop-content/exercises/04.dom/02.problem.deps","exercises/04.dom/02.problem.deps",{"_20":115,"_22":116,"_24":117},"04.02.solution","/myapp/workshop-content/exercises/04.dom/02.solution.deps","exercises/04.dom/02.solution.deps",{"_20":119,"_22":120,"_24":121},"04.03.problem","/myapp/workshop-content/exercises/04.dom/03.problem.primitives","exercises/04.dom/03.problem.primitives",{"_20":123,"_22":124,"_24":125},"04.03.solution","/myapp/workshop-content/exercises/04.dom/03.solution.primitives","exercises/04.dom/03.solution.primitives",{"_20":127,"_22":128,"_24":129},"05.01.problem","/myapp/workshop-content/exercises/05.unique-ids/01.problem.use-id","exercises/05.unique-ids/01.problem.use-id",{"_20":131,"_22":132,"_24":133},"05.01.solution","/myapp/workshop-content/exercises/05.unique-ids/01.solution.use-id","exercises/05.unique-ids/01.solution.use-id",{"_20":135,"_22":136,"_24":137},"06.01.problem","/myapp/workshop-content/exercises/06.tic-tac-toe/01.problem.set-state-callback","exercises/06.tic-tac-toe/01.problem.set-state-callback",{"_20":139,"_22":140,"_24":141},"06.01.solution","/myapp/workshop-content/exercises/06.tic-tac-toe/01.solution.set-state-callback","exercises/06.tic-tac-toe/01.solution.set-state-callback",{"_20":143,"_22":144,"_24":145},"06.02.problem","/myapp/workshop-content/exercises/06.tic-tac-toe/02.problem.local-storage","exercises/06.tic-tac-toe/02.problem.local-storage",{"_20":147,"_22":148,"_24":149},"06.02.solution","/myapp/workshop-content/exercises/06.tic-tac-toe/02.solution.local-storage","exercises/06.tic-tac-toe/02.solution.local-storage",{"_20":151,"_22":152,"_24":153},"06.03.problem","/myapp/workshop-content/exercises/06.tic-tac-toe/03.problem.history","exercises/06.tic-tac-toe/03.problem.history",{"_20":155,"_22":156,"_24":157},"06.03.solution","/myapp/workshop-content/exercises/06.tic-tac-toe/03.solution.history","exercises/06.tic-tac-toe/03.solution.history","repoUpdates",{"_160":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_166":167,"_168":169,"_170":171,"_177":178,"_195":196,"_197":198,"_199":200,"_201":202,"_205":206,"_211":212,"_215":216,"_217":218,"_219":220},"title","React Hooks 🎣","subtitle","Understand the building blocks of React","instructor",{"_20":172,"_173":174,"_175":176},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-hooks","discordChannelId","1285244676286189569","discordTags",[193,194],"1285246046498328627","1285245663281549448","onboardingVideo","https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/react-hooks","githubRoot","https://github.com/epicweb-dev/react-hooks/tree/main","stackBlitzConfig",{"_203":204},"view","editor","forms",{"_207":208,"_209":210},"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",{"_213":214},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_225":226,"_227":228,"_229":230,"_231":198,"_232":200,"_233":214,"_234":235,"_236":237,"_238":239,"_240":214,"_241":242,"_243":244},"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.23.6","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","07d9afa05daeec49cda96afb8dd60bca891d2b582ede017828a03606f4701864","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_247":248,"_249":250,"_251":252,"_253":254,"_255":254,"_256":257,"_264":265,"_266":267,"_268":216,"_269":214},"protocol","http:","hostname","hooks.epicreact.dev","port","","origin","http://hooks.epicreact.dev","domain","hints",{"_258":259,"_260":261,"_262":263},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/03/finished","session",{"_258":-5},"separator","online","toast","confettiId","presence",{"_274":275},"users",[276,294,301,308,315,318,327],{"_7":277,"_278":214,"_279":280,"_281":282,"_20":283,"_284":285},"71964b55-f18b-45fc-b0f9-0a8593f77195","hasAccess","imageUrlSmall","https://cdn.discordapp.com/avatars/596181061638160434/fef142073f5b1087e4477f84d6860b7f.png?size=64","imageUrlLarge","https://cdn.discordapp.com/avatars/596181061638160434/fef142073f5b1087e4477f84d6860b7f.png?size=512","Victor Rhea","location",{"_221":286,"_253":287,"_209":288},"React Fundamentals ⚛","http://localhost:5639",{"_9":289,"_290":291,"_292":293},"problem","exerciseNumber",7,"stepNumber",5,{"_7":295,"_278":214,"_279":296,"_281":297,"_20":298,"_284":299},"6c5131b7-848a-48f8-832d-db5c3b42b00a","https://cdn.discordapp.com/avatars/707707018487791726/a3aebe42238f1fe0f37d1138dff3f3c2.png?size=64","https://cdn.discordapp.com/avatars/707707018487791726/a3aebe42238f1fe0f37d1138dff3f3c2.png?size=512","Brandon Perfetti",{"_221":300,"_253":287},"Advanced React APIs 🔥",{"_7":302,"_284":303},"a38su5ctbmc61rqgubwijcm4",{"_221":304,"_253":305,"_209":306},"MCP Fundamentals 🧱","http://mcp-fundamentals.epicai.pro",{"_290":307},1,{"_7":309,"_278":214,"_279":310,"_281":311,"_20":-5,"_284":312},"a77492e4-9323-48f6-ab92-21359ef191da","https://www.gravatar.com/avatar/d748cd68e6e9062b0bd9a671f4a96c4b?size=64&default=identicon","https://www.gravatar.com/avatar/d748cd68e6e9062b0bd9a671f4a96c4b?size=512&default=identicon",{"_221":313,"_253":287,"_209":314},"Testing Fundamentals",{"_290":307},{"_7":316,"_284":317},"dpip3069tlr843i9ufh0x7ri",{"_221":300,"_253":287},{"_7":319,"_278":214,"_279":320,"_281":321,"_20":-5,"_284":322},"ea70e32f-a0d1-4551-9c96-ae430df0b89c","https://www.gravatar.com/avatar/5d473a91ab0dc634fe07e7d70f27ac97?size=64&default=identicon","https://www.gravatar.com/avatar/5d473a91ab0dc634fe07e7d70f27ac97?size=512&default=identicon",{"_221":286,"_253":323,"_209":324},"http://localhost:5640",{"_9":325,"_290":291,"_292":326},"solution",2,{"_7":328,"_284":329},"pzvoufj1em66eq41bjr54bq7",{"_221":167,"_253":254,"_209":330},{"_290":331,"_292":-5,"_9":-5},3,"routes/_app+/_layout",{"_221":167,"_334":335,"_474":475,"_477":16},"exercises",[336,375,392,415,438,449],{"_290":307,"_166":337,"_338":339,"_351":352,"_358":359},"Managing UI State","solutions",[340,342,344,346,349],{"_292":307,"_166":341,"_20":27},"useState",{"_292":326,"_166":343,"_20":35},"Controlling Inputs",{"_292":331,"_166":345,"_20":43},"Derive State",{"_292":347,"_166":348,"_20":51},4,"Initialize State",{"_292":293,"_166":350,"_20":59},"Init Callback","problems",[353,354,355,356,357],{"_292":307,"_166":341,"_20":21},{"_292":326,"_166":343,"_20":31},{"_292":331,"_166":345,"_20":39},{"_292":347,"_166":348,"_20":47},{"_292":293,"_166":350,"_20":55},"steps",[360,363,366,369,372],{"_292":307,"_166":341,"_20":21,"_289":361,"_325":362},{"_20":21,"_166":341},{"_20":27,"_166":341},{"_292":326,"_166":343,"_20":31,"_289":364,"_325":365},{"_20":31,"_166":343},{"_20":35,"_166":343},{"_292":331,"_166":345,"_20":39,"_289":367,"_325":368},{"_20":39,"_166":345},{"_20":43,"_166":345},{"_292":347,"_166":348,"_20":47,"_289":370,"_325":371},{"_20":47,"_166":348},{"_20":51,"_166":348},{"_292":293,"_166":350,"_20":55,"_289":373,"_325":374},{"_20":55,"_166":350},{"_20":59,"_166":350},{"_290":326,"_166":376,"_338":377,"_351":382,"_358":385},"Side-Effects",[378,380],{"_292":307,"_166":379,"_20":67},"useEffect",{"_292":326,"_166":381,"_20":75},"Effect Cleanup",[383,384],{"_292":307,"_166":379,"_20":63},{"_292":326,"_166":381,"_20":71},[386,389],{"_292":307,"_166":379,"_20":63,"_289":387,"_325":388},{"_20":63,"_166":379},{"_20":67,"_166":379},{"_292":326,"_166":381,"_20":71,"_289":390,"_325":391},{"_20":71,"_166":381},{"_20":75,"_166":381},{"_290":331,"_166":393,"_338":394,"_351":401,"_358":405},"Lifting State",[395,397,399],{"_292":307,"_166":396,"_20":83},"Lift State",{"_292":326,"_166":398,"_20":91},"Lift More State",{"_292":331,"_166":400,"_20":99},"Colocate State",[402,403,404],{"_292":307,"_166":396,"_20":79},{"_292":326,"_166":398,"_20":87},{"_292":331,"_166":400,"_20":95},[406,409,412],{"_292":307,"_166":396,"_20":79,"_289":407,"_325":408},{"_20":79,"_166":396},{"_20":83,"_166":396},{"_292":326,"_166":398,"_20":87,"_289":410,"_325":411},{"_20":87,"_166":398},{"_20":91,"_166":398},{"_292":331,"_166":400,"_20":95,"_289":413,"_325":414},{"_20":95,"_166":400},{"_20":99,"_166":400},{"_290":347,"_166":416,"_338":417,"_351":424,"_358":428},"DOM Side-Effects",[418,420,422],{"_292":307,"_166":419,"_20":107},"Refs",{"_292":326,"_166":421,"_20":115},"Dependencies",{"_292":331,"_166":423,"_20":123},"Primitive Dependencies",[425,426,427],{"_292":307,"_166":419,"_20":103},{"_292":326,"_166":421,"_20":111},{"_292":331,"_166":423,"_20":119},[429,432,435],{"_292":307,"_166":419,"_20":103,"_289":430,"_325":431},{"_20":103,"_166":419},{"_20":107,"_166":419},{"_292":326,"_166":421,"_20":111,"_289":433,"_325":434},{"_20":111,"_166":421},{"_20":115,"_166":421},{"_292":331,"_166":423,"_20":119,"_289":436,"_325":437},{"_20":119,"_166":423},{"_20":123,"_166":423},{"_290":293,"_166":439,"_338":440,"_351":443,"_358":445},"Unique IDs",[441],{"_292":307,"_166":442,"_20":131},"useId",[444],{"_292":307,"_166":442,"_20":127},[446],{"_292":307,"_166":442,"_20":127,"_289":447,"_325":448},{"_20":127,"_166":442},{"_20":131,"_166":442},{"_290":450,"_166":451,"_338":452,"_351":459,"_358":464},6,"Tic Tac Toe",[453,455,457],{"_292":307,"_166":454,"_20":139},"Real World Review: Tic Tac Toe",{"_292":326,"_166":456,"_20":147},"Preserve State in localStorage",{"_292":331,"_166":458,"_20":155},"Add Game History Feature",[460,462,463],{"_292":307,"_166":461,"_20":135},"setState callback",{"_292":326,"_166":456,"_20":143},{"_292":331,"_166":458,"_20":151},[465,468,471],{"_292":307,"_166":461,"_20":135,"_289":466,"_325":467},{"_20":135,"_166":461},{"_20":139,"_166":454},{"_292":326,"_166":456,"_20":143,"_289":469,"_325":470},{"_20":143,"_166":456},{"_20":147,"_166":456},{"_292":331,"_166":458,"_20":151,"_289":472,"_325":473},{"_20":151,"_166":458},{"_20":155,"_166":458},"playground",{"_476":-5,"_290":-2,"_292":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_480":481,"_221":167,"_209":482,"_613":614,"_615":616,"_617":618,"_622":623,"_628":629},"articleId","workshop-react-hooks-3-finished",{"_22":483,"_290":331,"_484":485,"_166":393,"_486":487,"_488":489,"_490":491,"_493":494,"_358":496,"_351":581,"_338":597},"/myapp/workshop-content/exercises/03.lifting-state","dirName","03.lifting-state","instructionsCode","var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var l in e)r(a,l,{get:e[l],enumerable:!0})},o=(a,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of m(e))!v.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?h(u(a)):{},o(e||!a||!a.__esModule?r(l,\"default\",{value:a,enumerable:!0}):l,a)),C=a=>o(r({},\"__esModule\",{value:!0}),a);var i=y((E,t)=>{t.exports=_jsx_runtime});var g={};k(g,{default:()=>b,frontmatter:()=>D});var n=N(i()),D=void 0;function d(a){let e={a:\"a\",code:\"code\",h1:\"h1\",h2:\"h2\",p:\"p\",pre:\"pre\",span:\"span\",...a.components},{EpicVideo:l}=e;return l||f(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Lifting State\"}),`\n`,(0,n.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-hooks/intro-to-lifting-state\"}),`\n`,(0,n.jsxs)(e.p,{children:[`A common question from React beginners is how to share state between two sibling\ncomponents. The answer is to\n`,(0,n.jsx)(e.a,{href:\"https://react.dev/learn/sharing-state-between-components\",children:'\"lift the state\"'}),`\nwhich basically amounts to finding the lowest common parent shared between the\ntwo components and placing the state management there, and then passing the\nstate and a mechanism for updating that state down into the components that need\nit.`]}),`\n`,(0,n.jsx)(e.p,{children:\"Let's look at a simple example.\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"useState\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--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\":\"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(--base08)\"},children:\"div\"}),\">\",`\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(--base0A)\"},children:\"Counter\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Counter\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"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.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",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\":\"15\",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\":\"16\",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(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCount\"}),\"(\",(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(--base09)\"},children:\"1\"}),\")\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">Increment\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"In this example, the \",(0,n.jsx)(e.code,{children:\"Counter\"}),` component has its own state. What if I wanted to\nmake a fancy `,(0,n.jsx)(e.code,{children:\"CountDisplay\"}),\" component that was a sibling to the Counter:\"]}),`\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(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",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\":\"4\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Counter\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountDisplay\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"CountDisplay\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">Count: 0\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"How can I get the \",(0,n.jsx)(e.code,{children:\"CountDisplay\"}),\" to show the current count from the \",(0,n.jsx)(e.code,{children:\"Counter\"}),`?\nThe answer is to lift the state up to the `,(0,n.jsx)(e.code,{children:\"App\"}),` component and then pass the\nstate and a mechanism for updating that state down into the `,(0,n.jsx)(e.code,{children:\"Counter\"}),` and\n`,(0,n.jsx)(e.code,{children:\"CountDisplay\"}),\" components.\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--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.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\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(--base08)\"},children:\"div\"}),\">\",`\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(--base0A)\"},children:\"Counter\"}),\" \",(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:\"setCount\"}),(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:\"setCount\"}),(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<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountDisplay\"}),\" \",(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:\"}\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Counter\"}),\"({ \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setCount\"}),\" }) {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",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\":\"15\",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(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCount\"}),\"(\",(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(--base09)\"},children:\"1\"}),\")\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">Increment\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"CountDisplay\"}),\"({ \",(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(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">Count: \",(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\":\"22\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Now the \",(0,n.jsx)(e.code,{children:\"App\"}),` component is managing the state and passing it down to the\n`,(0,n.jsx)(e.code,{children:\"Counter\"}),\" and \",(0,n.jsx)(e.code,{children:\"CountDisplay\"}),` components. This is a simple example, but the\nprinciple is the same for more complex state management.`]}),`\n`,(0,n.jsx)(e.p,{children:`There are other ways to get the state around to components that need it. We'll\ncover my preferred pattern of using composition in the Advanced React Patterns\nworkshop, but moving state up the tree is pretty common.`}),`\n`,(0,n.jsx)(e.h2,{children:\"Colocating state\"}),`\n`,(0,n.jsx)(e.p,{children:`One thing that's not as common as it should be in React is moving state the\nother direction when changes are made. This is because you don't have to do it\nfor things to work, but it's better for performance and maintainability if you\ndo.`}),`\n`,(0,n.jsxs)(e.p,{children:[`Let's take our example further by saying that we no longer need the\n`,(0,n.jsx)(e.code,{children:\"CountDisplay\"}),` component to show the count. Instead, we want to show the count\nin the button of the Counter. So we might do this:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--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.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\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(--base08)\"},children:\"div\"}),\">\",`\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(--base0A)\"},children:\"Counter\"}),\" \",(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:\"setCount\"}),(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:\"setCount\"}),(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\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Counter\"}),\"({ \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setCount\"}),\" }) {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--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(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCount\"}),\"(\",(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(--base09)\"},children:\"1\"}),\")\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">Increment (\",(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\":\"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`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"But now the \",(0,n.jsx)(e.code,{children:\"App\"}),` component is managing the state and passing it down to the\n`,(0,n.jsx)(e.code,{children:\"Counter\"}),\" component, but nothing but the \",(0,n.jsx)(e.code,{children:\"Counter\"}),` needs this state. So we can\nmove the state back down to the `,(0,n.jsx)(e.code,{children:\"Counter\"}),\" component:\"]}),`\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(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",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\":\"4\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Counter\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Counter\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setCount\"}),\"] \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--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(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCount\"}),\"(\",(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(--base09)\"},children:\"1\"}),\")\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">Increment (\",(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\":\"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`]})]})}),`\n`,(0,n.jsx)(e.p,{children:`Novice React developers learn to lift state pretty early, but experienced React\ndevelopers know how to recognize when state can be \"pushed down.\"`}),`\n`,(0,n.jsx)(e.p,{children:\"Let's do both in this exercise.\"}),`\n`,(0,n.jsxs)(e.p,{children:[`Read more about state colocation from\n`,(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster\",children:\"State Colocation will make your React app faster\"}),\".\"]})]})}function b(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function f(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return C(g);})();\n;return Component;","finishedCode","var Component=(()=>{var f=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},a=(e,t,o,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of h(t))!x.call(e,r)&&r!==o&&i(e,r,{get:()=>t[r],enumerable:!(s=m(t,r))||s.enumerable});return e};var j=(e,t,o)=>(o=e!=null?f(l(e)):{},a(t||!e||!e.__esModule?i(o,\"default\",{value:e,enumerable:!0}):o,e)),g=e=>a(i({},\"__esModule\",{value:!0}),e);var d=w((M,c)=>{c.exports=_jsx_runtime});var y={};_(y,{default:()=>u,frontmatter:()=>k});var n=j(d()),k=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||v(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"Lifting State\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-lifting-state\"}),`\n`,(0,n.jsx)(t.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Hooray! You've learned how to move state around as needed like a pro!\"})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}function v(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(y);})();\n;return Component;","instructionsEpicVideoEmbeds",[492],"https://www.epicreact.dev/workshops/react-hooks/intro-to-lifting-state","finishedEpicVideoEmbeds",[495],"https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-lifting-state",[497,535,558],{"_292":307,"_289":498,"_325":523},{"_20":79,"_166":396,"_484":499,"_22":80,"_24":81,"_486":500,"_501":502,"_504":505,"_517":518,"_520":521,"_290":331,"_292":307,"_9":289,"_522":83},"01.problem.lift","var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},a=(t,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!k.call(t,i)&&i!==o&&s(t,i,{get:()=>e[i],enumerable:!(r=f(e,i))||r.enumerable});return t};var b=(t,e,o)=>(o=t!=null?u(w(t)):{},a(e||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),x=t=>a(s({},\"__esModule\",{value:!0}),t);var p=y((I,c)=>{c.exports=_jsx_runtime});var _={};g(_,{default:()=>l,frontmatter:()=>j});var n=b(p()),j=void 0;function h(t){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",...t.components},{DiffLink:o,EpicVideo:r}=e;return o||d(\"DiffLink\",!0),r||d(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Lift State\"}),`\n`,(0,n.jsx)(r,{url:\"https://www.epicreact.dev/workshops/react-hooks/lift-state\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F9DD}\\u200D\\u2642\\uFE0F I refactored the app a bit. In the process I kinda broke stuff and you'll be\nrequired to fix it. Feel free to `,(0,n.jsx)(o,{app1:-1,app2:0,children:\"check the diff\"}),`\nto know what I've done. I pretty much just moved stuff into separate components\nto get a little more organization in here.`]}),`\n`,(0,n.jsx)(\"callout-info\",{children:(0,n.jsxs)(e.p,{children:[\"\\u{1F989} Check out \",(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/when-to-break-up-a-component-into-multiple-components\",children:`When to break up a component into multiple\ncomponents`}),\".\"]})}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F9DD}\\u200D\\u2642\\uFE0F Oh, also I added a new feature. You can now \"like\" specific posts by clicking\na little heart on the post. How nice! It's not persisted anywhere yet, so when\nyou refresh the page the likes all get reset, but it's a nice start!`}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Great, now your job is to fix what's broken. You need to move not only the\nstate, but also we're going to have you move the `,(0,n.jsx)(e.code,{children:\"useEffect\"}),` that sets the query\nas well.`]}),`\n`,(0,n.jsx)(e.p,{children:\"Then you're going to need to pass props to the components as needed. Enjoy!\"})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(t)}function d(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(_);})();\n;return Component;","epicVideoEmbeds",[503],"https://www.epicreact.dev/workshops/react-hooks/lift-state","test",{"_9":506,"_507":508,"_509":510},"browser","pathname","/app/03.01.problem/test/","testFiles",[511,512,513,514,515,516],"controlled-checkbox.test.ts","controlled-search.test.ts","filtering.test.ts","like-post.test.ts","popstate.test.ts","search-params.test.ts","dev",{"_9":506,"_507":519},"/app/03.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/03.lifting-state/01.problem.lift?view=editor&title=Lift+State+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":83,"_166":396,"_484":524,"_22":84,"_24":85,"_486":525,"_501":526,"_504":528,"_517":531,"_520":533,"_290":331,"_292":307,"_9":325,"_534":-5},"01.solution.lift","var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of f(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=u(t,r))||s.enumerable});return e};var g=(e,t,n)=>(n=e!=null?h(l(e)):{},c(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(i({},\"__esModule\",{value:!0}),e);var d=w((I,a)=>{a.exports=_jsx_runtime});var M={};_(M,{default:()=>p,frontmatter:()=>k});var o=g(d()),k=void 0;function m(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||E(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Lift State\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-hooks/lift-state/solution\"}),`\n`,(0,o.jsx)(t.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great! It's working now!\"}),`\n`,(0,o.jsx)(t.p,{children:\"Hmmm... What's that I hear? It's the sound of a new requirement coming in! \\u{1F606}\"})]})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}function E(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(M);})();\n;return Component;",[527],"https://www.epicreact.dev/workshops/react-hooks/lift-state/solution",{"_9":506,"_507":529,"_509":530},"/app/03.01.solution/test/",[511,512,513,514,515,516],{"_9":506,"_507":532},"/app/03.01.solution/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/03.lifting-state/01.solution.lift?view=editor&title=Lift+State+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_292":326,"_289":536,"_325":547},{"_20":87,"_166":398,"_484":537,"_22":88,"_24":89,"_486":538,"_501":539,"_504":541,"_517":544,"_520":546,"_290":331,"_292":326,"_9":289,"_522":91},"02.problem.lift-array","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},d=(t,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of p(e))!w.call(t,r)&&r!==n&&i(t,r,{get:()=>e[r],enumerable:!(s=f(e,r))||s.enumerable});return t};var x=(t,e,n)=>(n=t!=null?u(m(t)):{},d(e||!t||!t.__esModule?i(n,\"default\",{value:t,enumerable:!0}):n,t)),v=t=>d(i({},\"__esModule\",{value:!0}),t);var h=y((k,c)=>{c.exports=_jsx_runtime});var M={};g(M,{default:()=>l,frontmatter:()=>_});var o=x(h()),_=void 0;function a(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||j(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Lift More State\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-hooks/lift-more-state\"}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} The users loved \\u{1F9DD}\\u200D\\u2642\\uFE0F Kellie's like feature so much they want to have the blog\nposts sorted by whether they're favorites.`}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F9DD}\\u200D\\u2642\\uFE0F I've already created the sort function. Now you need to add the logic to sort\nthem based on whether they're favorited. And that means you need to lift some\nstate...`}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Yep. We're going to need you to lift the favorited state from the cards to\nthe `,(0,o.jsx)(e.code,{children:\"MatchingPost\"}),` component. We'll also need to restructure it slightly as\nwell. Don't worry. The emoji will guide you. Good luck!`]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(a,{...t})}):a(t)}function j(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return v(M);})();\n;return Component;",[540],"https://www.epicreact.dev/workshops/react-hooks/lift-more-state",{"_9":506,"_507":542,"_509":543},"/app/03.02.problem/test/",[511,512,513,514,515,516],{"_9":506,"_507":545},"/app/03.02.problem/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/03.lifting-state/02.problem.lift-array?view=editor&title=Lift+More+State+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":91,"_166":398,"_484":548,"_22":92,"_24":93,"_486":549,"_501":550,"_504":552,"_517":555,"_520":557,"_290":331,"_292":326,"_9":325,"_534":-5},"02.solution.lift-array","var Component=(()=>{var f=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!x.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return t};var j=(t,e,o)=>(o=t!=null?f(l(t)):{},c(e||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>c(s({},\"__esModule\",{value:!0}),t);var d=w((E,a)=>{a.exports=_jsx_runtime});var k={};_(k,{default:()=>u,frontmatter:()=>M});var n=j(d()),M=void 0;function p(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||g(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Lift More State\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-hooks/lift-more-state/solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great job! Unfortunately... I have some bad news. Let's talk about that next.\"})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(p,{...t})}):p(t)}function g(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(k);})();\n;return Component;",[551],"https://www.epicreact.dev/workshops/react-hooks/lift-more-state/solution",{"_9":506,"_507":553,"_509":554},"/app/03.02.solution/test/",[511,512,513,514,515,516],{"_9":506,"_507":556},"/app/03.02.solution/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/03.lifting-state/02.solution.lift-array?view=editor&title=Lift+More+State+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_292":331,"_289":559,"_325":570},{"_20":95,"_166":400,"_484":560,"_22":96,"_24":97,"_486":561,"_501":562,"_504":564,"_517":567,"_520":569,"_290":331,"_292":331,"_9":289,"_522":99},"03.problem.colocate","var Component=(()=>{var l=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!y.call(t,r)&&r!==n&&a(t,r,{get:()=>e[r],enumerable:!(i=f(e,r))||i.enumerable});return t};var b=(t,e,n)=>(n=t!=null?l(p(t)):{},c(e||!t||!t.__esModule?a(n,\"default\",{value:t,enumerable:!0}):n,t)),v=t=>c(a({},\"__esModule\",{value:!0}),t);var s=w((C,d)=>{d.exports=_jsx_runtime});var j={};g(j,{default:()=>u,frontmatter:()=>k});var o=b(s()),k=void 0;function h(t){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||x(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Colocate State\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-hooks/colocate-state\"}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Well, the users thought they wanted the articles sorted by whether they were\nfavorited... But after using the feature, they found it to be jarring and\nconfusing. So we're going to need you to remove that feature. Kellie already\nremoved the sorting for you, but she didn't have time to move the state back to\nthe `,(0,o.jsx)(e.code,{children:\"Card\"}),\" component.\"]}),`\n`,(0,o.jsxs)(e.p,{children:[`As a community we're pretty good at lifting state. It becomes natural over time.\nIn fact it's required to make the feature work. But as you notice here, the\nfunctionality we want is already \"working\" without moving any of the state\naround so it's easy to forget to improve the performance and maintainability of\nour code by moving state back down (or\n`,(0,o.jsx)(e.a,{href:\"https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster\",children:\"colocate state\"}),\").\"]}),`\n`,(0,o.jsxs)(e.p,{children:[\"So your job is to move the \",(0,o.jsx)(e.code,{children:\"favorited\"}),\" state back to the \",(0,o.jsx)(e.code,{children:\"Card\"}),\" component.\"]}),`\n`,(0,o.jsx)(e.p,{children:`When you're finished, the functionality should be no different, but the code\nshould feel simpler.`})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(h,{...t})}):h(t)}function x(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return v(j);})();\n;return Component;",[563],"https://www.epicreact.dev/workshops/react-hooks/colocate-state",{"_9":506,"_507":565,"_509":566},"/app/03.03.problem/test/",[511,512,513,514,515,516],{"_9":506,"_507":568},"/app/03.03.problem/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/03.lifting-state/03.problem.colocate?view=editor&title=Colocate+State+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":99,"_166":400,"_484":571,"_22":100,"_24":101,"_486":572,"_501":573,"_504":575,"_517":578,"_520":580,"_290":331,"_292":331,"_9":325,"_534":-5},"03.solution.colocate","var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!w.call(t,r)&&r!==n&&a(t,r,{get:()=>e[r],enumerable:!(c=u(e,r))||c.enumerable});return t};var b=(t,e,n)=>(n=t!=null?p(m(t)):{},s(e||!t||!t.__esModule?a(n,\"default\",{value:t,enumerable:!0}):n,t)),g=t=>s(a({},\"__esModule\",{value:!0}),t);var h=y((C,i)=>{i.exports=_jsx_runtime});var j={};x(j,{default:()=>l,frontmatter:()=>v});var o=b(h()),v=void 0;function d(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||_(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Colocate State\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-hooks/colocate-state/solution\"}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Awesome! You now know how to colocate state! Try to do this as much as\npossible in the future.`}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F989} You may have noticed that by putting the state in the \",(0,o.jsx)(e.code,{children:\"Card\"}),`, you actually\nlose the favorited state of the card whenever the card is removed from the page\n(like if you do a search that filters out the card). So really the best place\nfor this state would be in the `,(0,o.jsx)(e.code,{children:\"App\"}),` to ensure it never gets lost (except on\npage reloads). Really the best place for this type of state would be in the\ndatabase but that's out of scope for this workshop.`]}),`\n`,(0,o.jsxs)(e.p,{children:[`In this exercise, I mostly want you to appreciate how much it simplifies our\n`,(0,o.jsx)(e.code,{children:\"Card\"}),\" component and the \",(0,o.jsx)(e.code,{children:\"MatchingPosts\"}),` component by moving the state into the\n`,(0,o.jsx)(e.code,{children:\"Card\"}),` itself. Additionally, it helps performance because now when the favorite\nstate changes for a card, React only needs to re-render that card rather than\nthe entire `,(0,o.jsx)(e.code,{children:\"MatchingPosts\"}),\" component.\"]})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.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 g(j);})();\n;return Component;",[574],"https://www.epicreact.dev/workshops/react-hooks/colocate-state/solution",{"_9":506,"_507":576,"_509":577},"/app/03.03.solution/test/",[511,512,513,514,515,516],{"_9":506,"_507":579},"/app/03.03.solution/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/03.lifting-state/03.solution.colocate?view=editor&title=Colocate+State+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[582,587,592],{"_20":79,"_166":396,"_484":499,"_22":80,"_24":81,"_486":500,"_501":583,"_504":584,"_517":586,"_520":521,"_290":331,"_292":307,"_9":289,"_522":83},[503],{"_9":506,"_507":508,"_509":585},[511,512,513,514,515,516],{"_9":506,"_507":519},{"_20":87,"_166":398,"_484":537,"_22":88,"_24":89,"_486":538,"_501":588,"_504":589,"_517":591,"_520":546,"_290":331,"_292":326,"_9":289,"_522":91},[540],{"_9":506,"_507":542,"_509":590},[511,512,513,514,515,516],{"_9":506,"_507":545},{"_20":95,"_166":400,"_484":560,"_22":96,"_24":97,"_486":561,"_501":593,"_504":594,"_517":596,"_520":569,"_290":331,"_292":331,"_9":289,"_522":99},[563],{"_9":506,"_507":565,"_509":595},[511,512,513,514,515,516],{"_9":506,"_507":568},[598,603,608],{"_20":83,"_166":396,"_484":524,"_22":84,"_24":85,"_486":525,"_501":599,"_504":600,"_517":602,"_520":533,"_290":331,"_292":307,"_9":325,"_534":-5},[527],{"_9":506,"_507":529,"_509":601},[511,512,513,514,515,516],{"_9":506,"_507":532},{"_20":91,"_166":398,"_484":548,"_22":92,"_24":93,"_486":549,"_501":604,"_504":605,"_517":607,"_520":557,"_290":331,"_292":326,"_9":325,"_534":-5},[551],{"_9":506,"_507":553,"_509":606},[511,512,513,514,515,516],{"_9":506,"_507":556},{"_20":99,"_166":400,"_484":571,"_22":100,"_24":101,"_486":572,"_501":609,"_504":610,"_517":612,"_520":580,"_290":331,"_292":331,"_9":325,"_534":-5},[574],{"_9":506,"_507":576,"_509":611},[511,512,513,514,515,516],{"_9":506,"_507":579},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=React%20Hooks%20%F0%9F%8E%A3&entry.428900931=Lifting%20State","epicVideoInfosPromise",["P",616],"exerciseFinished",{"_619":620,"_24":621},"file","/myapp/workshop-content/exercises/03.lifting-state/FINISHED.mdx","exercises/03.lifting-state/FINISHED.mdx","prevStepLink",{"_624":625,"_626":627},"to","/exercise/03/03/solution","aria-label","Colocate State (solution)","nextStepLink",{"_624":630,"_626":416},"/exercise/04","actionData","errors"]

03. Lifting State/Elaboration