[{"_1":2,"_650":-5,"_651":-5},"loaderData",{"_3":4,"_352":353,"_497":498},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_158":159,"_161":162,"_163":16,"_164":165,"_222":167,"_223":169,"_170":171,"_224":225,"_246":247,"_271":-5,"_272":-5,"_273":274},"userId",{"_7":8,"_9":10},"id","21bd6601-ed3b-4471-9a95-68b33049082f","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,"_198":199,"_200":201,"_202":203,"_206":207,"_212":213,"_216":217,"_218":219,"_220":221},"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",[197],"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",{"_204":205},"view","editor","forms",{"_208":209,"_210":211},"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",{"_214":215},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_226":227,"_228":229,"_230":231,"_232":199,"_233":201,"_234":215,"_235":236,"_237":238,"_239":240,"_241":215,"_242":243,"_244":245},"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.41.3","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","7f925e84a76ff158b7b7cdc5338bda23fa4ac65a2a770db1b28fb0018bde9114","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_248":249,"_250":251,"_252":253,"_254":255,"_256":255,"_257":258,"_265":266,"_267":268,"_269":217,"_270":215},"protocol","http:","hostname","hooks.epicreact.dev","port","","origin","http://hooks.epicreact.dev","domain","hints",{"_259":260,"_261":262,"_263":264},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/03/finished","session",{"_259":-5},"separator","online","toast","confettiId","presence",{"_275":276},"users",[277,295,302,311,320,329,335,342,347],{"_7":278,"_279":16,"_280":281,"_282":283,"_20":284,"_285":286},"bcba76fe-2f9e-4800-9e11-8b00038eaf8c","hasAccess","imageUrlSmall","https://cdn.discordapp.com/avatars/480483755119607838/7c5b3444dce2b3184a82f3f355b95551.png?size=64","imageUrlLarge","https://cdn.discordapp.com/avatars/480483755119607838/7c5b3444dce2b3184a82f3f355b95551.png?size=512","Haorong","location",{"_222":287,"_254":288,"_210":289},"MCP UI 🪟","http://localhost:5639",{"_9":290,"_291":292,"_293":294},"problem","exerciseNumber",2,"stepNumber",1,{"_7":296,"_279":215,"_280":297,"_282":298,"_20":299,"_285":300},"7b753d64-5957-4e88-b6dd-6b0040b13450","https://www.gravatar.com/avatar/cfa7e2447c25ee18e42798f908ca21c8?size=64&default=identicon","https://www.gravatar.com/avatar/cfa7e2447c25ee18e42798f908ca21c8?size=512&default=identicon","itskcheng@gmail.com",{"_222":301,"_254":288},"React Fundamentals ⚛",{"_7":303,"_279":215,"_280":304,"_282":305,"_20":306,"_285":307},"b0d639ec-8f95-4dac-a700-2147ac112c60","https://www.gravatar.com/avatar/a8a74a53d5e868b09e8c51f393debd0e?size=64&default=identicon","https://www.gravatar.com/avatar/a8a74a53d5e868b09e8c51f393debd0e?size=512&default=identicon","ZIHAO WANG",{"_222":308,"_254":288,"_210":309},"Testing Fundamentals",{"_9":310,"_291":294,"_293":292},"solution",{"_7":312,"_279":215,"_280":313,"_282":314,"_20":315,"_285":316},"52e3d4d7-24dd-4c74-bb80-662b70615ec9","https://avatars.githubusercontent.com/u/152537587?v=4&size=64","https://avatars.githubusercontent.com/u/152537587?v=4&size=512","Adil Murat Kartal",{"_222":317,"_254":288,"_210":318},"Advanced React Patterns 🤯",{"_291":319},6,{"_7":321,"_279":215,"_280":322,"_282":323,"_20":324,"_285":325},"0538d5bc-649e-4018-9c94-df631baf307f","https://www.gravatar.com/avatar/56085cd29b493c04bd484ebc63804e6d?size=64&default=identicon","https://www.gravatar.com/avatar/56085cd29b493c04bd484ebc63804e6d?size=512&default=identicon","Anthony Lacruz V",{"_222":326,"_254":288,"_210":327},"Full Stack Foundations 🔭",{"_9":310,"_291":294,"_293":328},4,{"_7":330,"_279":215,"_280":331,"_282":332,"_20":-5,"_285":333},"235dda8d-594a-4406-a9e4-b33d09d2fa62","https://cdn.discordapp.com/avatars/271725418686447627/d44a5c3792ad1f4b6bcf59fda2627420.png?size=64","https://cdn.discordapp.com/avatars/271725418686447627/d44a5c3792ad1f4b6bcf59fda2627420.png?size=512",{"_222":301,"_254":288,"_210":334},{"_291":294},{"_7":336,"_285":337},"unj8le3g9pfdvim845o20kq4",{"_222":338,"_254":339,"_210":340},"📐 Pixel Perfect Tailwind","http://epicweb-dev-pixel-perfect-tailwind.fly.dev",{"_9":290,"_291":341,"_293":292},8,{"_7":343,"_285":344},"056b6c0d-0406-4bad-8a1c-a25c68e223c8",{"_222":301,"_254":345,"_210":346},"http://172.19.240.1:5639",{"_9":290,"_291":292,"_293":292},{"_7":348,"_285":349},"f3812cc6-371b-4591-a010-516af38e701e",{"_222":167,"_254":255,"_210":350},{"_291":351,"_293":-5,"_9":-5},3,"routes/_app+/_layout",{"_222":167,"_354":355,"_493":494,"_496":16},"exercises",[356,395,412,435,458,469],{"_291":294,"_166":357,"_358":359,"_371":372,"_378":379},"Managing UI State","solutions",[360,362,364,366,368],{"_293":294,"_166":361,"_20":27},"useState",{"_293":292,"_166":363,"_20":35},"Controlling Inputs",{"_293":351,"_166":365,"_20":43},"Derive State",{"_293":328,"_166":367,"_20":51},"Initialize State",{"_293":369,"_166":370,"_20":59},5,"Init Callback","problems",[373,374,375,376,377],{"_293":294,"_166":361,"_20":21},{"_293":292,"_166":363,"_20":31},{"_293":351,"_166":365,"_20":39},{"_293":328,"_166":367,"_20":47},{"_293":369,"_166":370,"_20":55},"steps",[380,383,386,389,392],{"_293":294,"_166":361,"_20":21,"_290":381,"_310":382},{"_20":21,"_166":361},{"_20":27,"_166":361},{"_293":292,"_166":363,"_20":31,"_290":384,"_310":385},{"_20":31,"_166":363},{"_20":35,"_166":363},{"_293":351,"_166":365,"_20":39,"_290":387,"_310":388},{"_20":39,"_166":365},{"_20":43,"_166":365},{"_293":328,"_166":367,"_20":47,"_290":390,"_310":391},{"_20":47,"_166":367},{"_20":51,"_166":367},{"_293":369,"_166":370,"_20":55,"_290":393,"_310":394},{"_20":55,"_166":370},{"_20":59,"_166":370},{"_291":292,"_166":396,"_358":397,"_371":402,"_378":405},"Side-Effects",[398,400],{"_293":294,"_166":399,"_20":67},"useEffect",{"_293":292,"_166":401,"_20":75},"Effect Cleanup",[403,404],{"_293":294,"_166":399,"_20":63},{"_293":292,"_166":401,"_20":71},[406,409],{"_293":294,"_166":399,"_20":63,"_290":407,"_310":408},{"_20":63,"_166":399},{"_20":67,"_166":399},{"_293":292,"_166":401,"_20":71,"_290":410,"_310":411},{"_20":71,"_166":401},{"_20":75,"_166":401},{"_291":351,"_166":413,"_358":414,"_371":421,"_378":425},"Lifting State",[415,417,419],{"_293":294,"_166":416,"_20":83},"Lift State",{"_293":292,"_166":418,"_20":91},"Lift More State",{"_293":351,"_166":420,"_20":99},"Colocate State",[422,423,424],{"_293":294,"_166":416,"_20":79},{"_293":292,"_166":418,"_20":87},{"_293":351,"_166":420,"_20":95},[426,429,432],{"_293":294,"_166":416,"_20":79,"_290":427,"_310":428},{"_20":79,"_166":416},{"_20":83,"_166":416},{"_293":292,"_166":418,"_20":87,"_290":430,"_310":431},{"_20":87,"_166":418},{"_20":91,"_166":418},{"_293":351,"_166":420,"_20":95,"_290":433,"_310":434},{"_20":95,"_166":420},{"_20":99,"_166":420},{"_291":328,"_166":436,"_358":437,"_371":444,"_378":448},"DOM Side-Effects",[438,440,442],{"_293":294,"_166":439,"_20":107},"Refs",{"_293":292,"_166":441,"_20":115},"Dependencies",{"_293":351,"_166":443,"_20":123},"Primitive Dependencies",[445,446,447],{"_293":294,"_166":439,"_20":103},{"_293":292,"_166":441,"_20":111},{"_293":351,"_166":443,"_20":119},[449,452,455],{"_293":294,"_166":439,"_20":103,"_290":450,"_310":451},{"_20":103,"_166":439},{"_20":107,"_166":439},{"_293":292,"_166":441,"_20":111,"_290":453,"_310":454},{"_20":111,"_166":441},{"_20":115,"_166":441},{"_293":351,"_166":443,"_20":119,"_290":456,"_310":457},{"_20":119,"_166":443},{"_20":123,"_166":443},{"_291":369,"_166":459,"_358":460,"_371":463,"_378":465},"Unique IDs",[461],{"_293":294,"_166":462,"_20":131},"useId",[464],{"_293":294,"_166":462,"_20":127},[466],{"_293":294,"_166":462,"_20":127,"_290":467,"_310":468},{"_20":127,"_166":462},{"_20":131,"_166":462},{"_291":319,"_166":470,"_358":471,"_371":478,"_378":483},"Tic Tac Toe",[472,474,476],{"_293":294,"_166":473,"_20":139},"Real World Review: Tic Tac Toe",{"_293":292,"_166":475,"_20":147},"Preserve State in localStorage",{"_293":351,"_166":477,"_20":155},"Add Game History Feature",[479,481,482],{"_293":294,"_166":480,"_20":135},"setState callback",{"_293":292,"_166":475,"_20":143},{"_293":351,"_166":477,"_20":151},[484,487,490],{"_293":294,"_166":480,"_20":135,"_290":485,"_310":486},{"_20":135,"_166":480},{"_20":139,"_166":473},{"_293":292,"_166":475,"_20":143,"_290":488,"_310":489},{"_20":143,"_166":475},{"_20":147,"_166":475},{"_293":351,"_166":477,"_20":151,"_290":491,"_310":492},{"_20":151,"_166":477},{"_20":155,"_166":477},"playground",{"_495":-5,"_291":-2,"_293":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_499":500,"_222":167,"_210":501,"_632":633,"_634":635,"_636":637,"_641":642,"_647":648},"articleId","workshop-react-hooks-3-finished",{"_22":502,"_291":351,"_503":504,"_166":413,"_505":506,"_507":508,"_509":510,"_512":513,"_378":515,"_371":600,"_358":616},"/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",[511],"https://www.epicreact.dev/workshops/react-hooks/intro-to-lifting-state","finishedEpicVideoEmbeds",[514],"https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-lifting-state",[516,554,577],{"_293":294,"_290":517,"_310":542},{"_20":79,"_166":416,"_503":518,"_22":80,"_24":81,"_505":519,"_520":521,"_523":524,"_536":537,"_539":540,"_291":351,"_293":294,"_9":290,"_541":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",[522],"https://www.epicreact.dev/workshops/react-hooks/lift-state","test",{"_9":525,"_526":527,"_528":529},"browser","pathname","/app/03.01.problem/test/","testFiles",[530,531,532,533,534,535],"controlled-checkbox.test.ts","controlled-search.test.ts","filtering.test.ts","like-post.test.ts","popstate.test.ts","search-params.test.ts","dev",{"_9":525,"_526":538},"/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":416,"_503":543,"_22":84,"_24":85,"_505":544,"_520":545,"_523":547,"_536":550,"_539":552,"_291":351,"_293":294,"_9":310,"_553":-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;",[546],"https://www.epicreact.dev/workshops/react-hooks/lift-state/solution",{"_9":525,"_526":548,"_528":549},"/app/03.01.solution/test/",[530,531,532,533,534,535],{"_9":525,"_526":551},"/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",{"_293":292,"_290":555,"_310":566},{"_20":87,"_166":418,"_503":556,"_22":88,"_24":89,"_505":557,"_520":558,"_523":560,"_536":563,"_539":565,"_291":351,"_293":292,"_9":290,"_541":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;",[559],"https://www.epicreact.dev/workshops/react-hooks/lift-more-state",{"_9":525,"_526":561,"_528":562},"/app/03.02.problem/test/",[530,531,532,533,534,535],{"_9":525,"_526":564},"/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":418,"_503":567,"_22":92,"_24":93,"_505":568,"_520":569,"_523":571,"_536":574,"_539":576,"_291":351,"_293":292,"_9":310,"_553":-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;",[570],"https://www.epicreact.dev/workshops/react-hooks/lift-more-state/solution",{"_9":525,"_526":572,"_528":573},"/app/03.02.solution/test/",[530,531,532,533,534,535],{"_9":525,"_526":575},"/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",{"_293":351,"_290":578,"_310":589},{"_20":95,"_166":420,"_503":579,"_22":96,"_24":97,"_505":580,"_520":581,"_523":583,"_536":586,"_539":588,"_291":351,"_293":351,"_9":290,"_541":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;",[582],"https://www.epicreact.dev/workshops/react-hooks/colocate-state",{"_9":525,"_526":584,"_528":585},"/app/03.03.problem/test/",[530,531,532,533,534,535],{"_9":525,"_526":587},"/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":420,"_503":590,"_22":100,"_24":101,"_505":591,"_520":592,"_523":594,"_536":597,"_539":599,"_291":351,"_293":351,"_9":310,"_553":-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;",[593],"https://www.epicreact.dev/workshops/react-hooks/colocate-state/solution",{"_9":525,"_526":595,"_528":596},"/app/03.03.solution/test/",[530,531,532,533,534,535],{"_9":525,"_526":598},"/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",[601,606,611],{"_20":79,"_166":416,"_503":518,"_22":80,"_24":81,"_505":519,"_520":602,"_523":603,"_536":605,"_539":540,"_291":351,"_293":294,"_9":290,"_541":83},[522],{"_9":525,"_526":527,"_528":604},[530,531,532,533,534,535],{"_9":525,"_526":538},{"_20":87,"_166":418,"_503":556,"_22":88,"_24":89,"_505":557,"_520":607,"_523":608,"_536":610,"_539":565,"_291":351,"_293":292,"_9":290,"_541":91},[559],{"_9":525,"_526":561,"_528":609},[530,531,532,533,534,535],{"_9":525,"_526":564},{"_20":95,"_166":420,"_503":579,"_22":96,"_24":97,"_505":580,"_520":612,"_523":613,"_536":615,"_539":588,"_291":351,"_293":351,"_9":290,"_541":99},[582],{"_9":525,"_526":584,"_528":614},[530,531,532,533,534,535],{"_9":525,"_526":587},[617,622,627],{"_20":83,"_166":416,"_503":543,"_22":84,"_24":85,"_505":544,"_520":618,"_523":619,"_536":621,"_539":552,"_291":351,"_293":294,"_9":310,"_553":-5},[546],{"_9":525,"_526":548,"_528":620},[530,531,532,533,534,535],{"_9":525,"_526":551},{"_20":91,"_166":418,"_503":567,"_22":92,"_24":93,"_505":568,"_520":623,"_523":624,"_536":626,"_539":576,"_291":351,"_293":292,"_9":310,"_553":-5},[570],{"_9":525,"_526":572,"_528":625},[530,531,532,533,534,535],{"_9":525,"_526":575},{"_20":99,"_166":420,"_503":590,"_22":100,"_24":101,"_505":591,"_520":628,"_523":629,"_536":631,"_539":599,"_291":351,"_293":351,"_9":310,"_553":-5},[593],{"_9":525,"_526":595,"_528":630},[530,531,532,533,534,535],{"_9":525,"_526":598},"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",635],"exerciseFinished",{"_638":639,"_24":640},"file","/myapp/workshop-content/exercises/03.lifting-state/FINISHED.mdx","exercises/03.lifting-state/FINISHED.mdx","prevStepLink",{"_643":644,"_645":646},"to","/exercise/03/03/solution","aria-label","Colocate State (solution)","nextStepLink",{"_643":649,"_645":436},"/exercise/04","actionData","errors"]

03. Lifting State/Elaboration