[{"_1":2,"_671":-5,"_672":-5},"loaderData",{"_3":4,"_374":375,"_518":519},"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","yn2dnwt49pi1er1hx3pxusqj","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.20.6","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","142fa553658921560e34e122d233c60524d0db2619b82aad57aedaac5929def7","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,293,299,307,314,324,332,341,350,358,365,369],{"_7":277,"_278":214,"_279":280,"_281":282,"_20":283,"_284":285},"2450ac06-d2f3-4c7a-b320-1ef1e8cc4e37","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/c21a27bb8019d0b1c963422146f0f069?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/c21a27bb8019d0b1c963422146f0f069?size=512&default=identicon","Marc T Rios","location",{"_221":286,"_253":287,"_209":288},"React Fundamentals ⚛","http://localhost:5639",{"_9":289,"_290":291,"_292":291},"problem","exerciseNumber",1,"stepNumber",{"_7":294,"_278":214,"_279":295,"_281":296,"_20":297,"_284":298},"8e3205ea-a814-47cd-942b-a1ad80c230ca","https://www.gravatar.com/avatar/2226d762c59f6db2c0c90a971eabd801?size=64&default=identicon","https://www.gravatar.com/avatar/2226d762c59f6db2c0c90a971eabd801?size=512&default=identicon","Geir Arne Sandbakken",{"_221":286,"_253":287},{"_7":300,"_278":214,"_279":301,"_281":302,"_20":303,"_284":304},"6c48bc05-cbb1-40b3-bfd6-fe236bf10b53","https://avatars.githubusercontent.com/u/17526719?v=4&size=64","https://avatars.githubusercontent.com/u/17526719?v=4&size=512","Alexandre Leite",{"_221":286,"_253":287,"_209":305},{"_290":306},9,{"_7":308,"_278":214,"_279":309,"_281":310,"_20":311,"_284":312},"9129c640-6186-4fbc-b3ec-a1a37b0d29e8","https://avatars.githubusercontent.com/u/1778432?v=4&size=64","https://avatars.githubusercontent.com/u/1778432?v=4&size=512","Yevhenii Kravchenko",{"_221":286,"_253":287,"_209":313},{"_9":289,"_290":291,"_292":291},{"_7":315,"_278":214,"_279":316,"_281":317,"_20":318,"_284":319},"c2eacba3-5071-468d-a1b5-a33a01e31e78","https://avatars.githubusercontent.com/u/45266517?v=4&size=64","https://avatars.githubusercontent.com/u/45266517?v=4&size=512","Phong Do",{"_221":320,"_253":287,"_209":321},"React Server Components 🤹",{"_9":322,"_290":323,"_292":291},"solution",2,{"_7":325,"_278":214,"_279":326,"_281":327,"_20":328,"_284":329},"e04924d8-83de-4512-91ac-909b70b0ed56","https://www.gravatar.com/avatar/c9efb061aa4edcb554784fa09e542f19?size=64&default=identicon","https://www.gravatar.com/avatar/c9efb061aa4edcb554784fa09e542f19?size=512&default=identicon","mehmet fırat kömürcü",{"_221":286,"_253":287,"_209":330},{"_9":322,"_290":331,"_292":323},7,{"_7":333,"_278":214,"_279":334,"_281":335,"_20":336,"_284":337},"6a25b47d-221f-4483-a727-8dc6ebb00d52","https://avatars.githubusercontent.com/u/49048159?v=4&size=64","https://avatars.githubusercontent.com/u/49048159?v=4&size=512","ILLICH A RADA C",{"_221":338,"_253":287,"_209":339},"Web Authentication 🔐",{"_9":289,"_290":340,"_292":291},8,{"_7":342,"_278":214,"_279":343,"_281":344,"_20":345,"_284":346},"2c407dc2-538b-4cd3-b766-6632ecefd8d7","https://www.gravatar.com/avatar/252497f174e864700d2c231db2178316?size=64&default=identicon","https://www.gravatar.com/avatar/252497f174e864700d2c231db2178316?size=512&default=identicon","Abdessattar Jaballah",{"_221":347,"_253":287,"_209":348},"Advanced React APIs 🔥",{"_9":289,"_290":291,"_292":349},6,{"_7":351,"_278":214,"_279":352,"_281":353,"_20":354,"_284":355},"ebf5721e-1c7e-4a00-aa8e-ca58dbc1cea3","https://www.gravatar.com/avatar/9ab0d3daf4e20867c9bb8bb5b7e81d1a?size=64&default=identicon","https://www.gravatar.com/avatar/9ab0d3daf4e20867c9bb8bb5b7e81d1a?size=512&default=identicon","Josiah",{"_221":167,"_253":287,"_209":356},{"_9":322,"_290":357,"_292":323},4,{"_7":359,"_284":360},"a9lapr0o7tcoqu0spjvx96a2",{"_221":361,"_253":362,"_209":363},"MCP Fundamentals 🧱","http://mcp-fundamentals.epicai.pro",{"_290":364},5,{"_7":366,"_284":367},"xxeoti73k7q7qcnk1jmsxys0",{"_221":338,"_253":287,"_209":368},{"_290":331},{"_7":370,"_284":371},"cg5iz7zrdictfyf1qere4n1l",{"_221":167,"_253":254,"_209":372},{"_290":373,"_292":-5,"_9":-5},3,"routes/_app+/_layout",{"_221":167,"_376":377,"_514":515,"_517":16},"exercises",[378,416,433,456,479,490],{"_290":291,"_166":379,"_380":381,"_392":393,"_399":400},"Managing UI State","solutions",[382,384,386,388,390],{"_292":291,"_166":383,"_20":27},"useState",{"_292":323,"_166":385,"_20":35},"Controlling Inputs",{"_292":373,"_166":387,"_20":43},"Derive State",{"_292":357,"_166":389,"_20":51},"Initialize State",{"_292":364,"_166":391,"_20":59},"Init Callback","problems",[394,395,396,397,398],{"_292":291,"_166":383,"_20":21},{"_292":323,"_166":385,"_20":31},{"_292":373,"_166":387,"_20":39},{"_292":357,"_166":389,"_20":47},{"_292":364,"_166":391,"_20":55},"steps",[401,404,407,410,413],{"_292":291,"_166":383,"_20":21,"_289":402,"_322":403},{"_20":21,"_166":383},{"_20":27,"_166":383},{"_292":323,"_166":385,"_20":31,"_289":405,"_322":406},{"_20":31,"_166":385},{"_20":35,"_166":385},{"_292":373,"_166":387,"_20":39,"_289":408,"_322":409},{"_20":39,"_166":387},{"_20":43,"_166":387},{"_292":357,"_166":389,"_20":47,"_289":411,"_322":412},{"_20":47,"_166":389},{"_20":51,"_166":389},{"_292":364,"_166":391,"_20":55,"_289":414,"_322":415},{"_20":55,"_166":391},{"_20":59,"_166":391},{"_290":323,"_166":417,"_380":418,"_392":423,"_399":426},"Side-Effects",[419,421],{"_292":291,"_166":420,"_20":67},"useEffect",{"_292":323,"_166":422,"_20":75},"Effect Cleanup",[424,425],{"_292":291,"_166":420,"_20":63},{"_292":323,"_166":422,"_20":71},[427,430],{"_292":291,"_166":420,"_20":63,"_289":428,"_322":429},{"_20":63,"_166":420},{"_20":67,"_166":420},{"_292":323,"_166":422,"_20":71,"_289":431,"_322":432},{"_20":71,"_166":422},{"_20":75,"_166":422},{"_290":373,"_166":434,"_380":435,"_392":442,"_399":446},"Lifting State",[436,438,440],{"_292":291,"_166":437,"_20":83},"Lift State",{"_292":323,"_166":439,"_20":91},"Lift More State",{"_292":373,"_166":441,"_20":99},"Colocate State",[443,444,445],{"_292":291,"_166":437,"_20":79},{"_292":323,"_166":439,"_20":87},{"_292":373,"_166":441,"_20":95},[447,450,453],{"_292":291,"_166":437,"_20":79,"_289":448,"_322":449},{"_20":79,"_166":437},{"_20":83,"_166":437},{"_292":323,"_166":439,"_20":87,"_289":451,"_322":452},{"_20":87,"_166":439},{"_20":91,"_166":439},{"_292":373,"_166":441,"_20":95,"_289":454,"_322":455},{"_20":95,"_166":441},{"_20":99,"_166":441},{"_290":357,"_166":457,"_380":458,"_392":465,"_399":469},"DOM Side-Effects",[459,461,463],{"_292":291,"_166":460,"_20":107},"Refs",{"_292":323,"_166":462,"_20":115},"Dependencies",{"_292":373,"_166":464,"_20":123},"Primitive Dependencies",[466,467,468],{"_292":291,"_166":460,"_20":103},{"_292":323,"_166":462,"_20":111},{"_292":373,"_166":464,"_20":119},[470,473,476],{"_292":291,"_166":460,"_20":103,"_289":471,"_322":472},{"_20":103,"_166":460},{"_20":107,"_166":460},{"_292":323,"_166":462,"_20":111,"_289":474,"_322":475},{"_20":111,"_166":462},{"_20":115,"_166":462},{"_292":373,"_166":464,"_20":119,"_289":477,"_322":478},{"_20":119,"_166":464},{"_20":123,"_166":464},{"_290":364,"_166":480,"_380":481,"_392":484,"_399":486},"Unique IDs",[482],{"_292":291,"_166":483,"_20":131},"useId",[485],{"_292":291,"_166":483,"_20":127},[487],{"_292":291,"_166":483,"_20":127,"_289":488,"_322":489},{"_20":127,"_166":483},{"_20":131,"_166":483},{"_290":349,"_166":491,"_380":492,"_392":499,"_399":504},"Tic Tac Toe",[493,495,497],{"_292":291,"_166":494,"_20":139},"Real World Review: Tic Tac Toe",{"_292":323,"_166":496,"_20":147},"Preserve State in localStorage",{"_292":373,"_166":498,"_20":155},"Add Game History Feature",[500,502,503],{"_292":291,"_166":501,"_20":135},"setState callback",{"_292":323,"_166":496,"_20":143},{"_292":373,"_166":498,"_20":151},[505,508,511],{"_292":291,"_166":501,"_20":135,"_289":506,"_322":507},{"_20":135,"_166":501},{"_20":139,"_166":494},{"_292":323,"_166":496,"_20":143,"_289":509,"_322":510},{"_20":143,"_166":496},{"_20":147,"_166":496},{"_292":373,"_166":498,"_20":151,"_289":512,"_322":513},{"_20":151,"_166":498},{"_20":155,"_166":498},"playground",{"_516":-5,"_290":-2,"_292":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_520":521,"_221":167,"_209":522,"_653":654,"_655":656,"_657":658,"_662":663,"_668":669},"articleId","workshop-react-hooks-3-finished",{"_22":523,"_290":373,"_524":525,"_166":434,"_526":527,"_528":529,"_530":531,"_533":534,"_399":536,"_392":621,"_380":637},"/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",[532],"https://www.epicreact.dev/workshops/react-hooks/intro-to-lifting-state","finishedEpicVideoEmbeds",[535],"https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-lifting-state",[537,575,598],{"_292":291,"_289":538,"_322":563},{"_20":79,"_166":437,"_524":539,"_22":80,"_24":81,"_526":540,"_541":542,"_544":545,"_557":558,"_560":561,"_290":373,"_292":291,"_9":289,"_562":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",[543],"https://www.epicreact.dev/workshops/react-hooks/lift-state","test",{"_9":546,"_547":548,"_549":550},"browser","pathname","/app/03.01.problem/test/","testFiles",[551,552,553,554,555,556],"controlled-checkbox.test.ts","controlled-search.test.ts","filtering.test.ts","like-post.test.ts","popstate.test.ts","search-params.test.ts","dev",{"_9":546,"_547":559},"/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":437,"_524":564,"_22":84,"_24":85,"_526":565,"_541":566,"_544":568,"_557":571,"_560":573,"_290":373,"_292":291,"_9":322,"_574":-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;",[567],"https://www.epicreact.dev/workshops/react-hooks/lift-state/solution",{"_9":546,"_547":569,"_549":570},"/app/03.01.solution/test/",[551,552,553,554,555,556],{"_9":546,"_547":572},"/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":323,"_289":576,"_322":587},{"_20":87,"_166":439,"_524":577,"_22":88,"_24":89,"_526":578,"_541":579,"_544":581,"_557":584,"_560":586,"_290":373,"_292":323,"_9":289,"_562":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;",[580],"https://www.epicreact.dev/workshops/react-hooks/lift-more-state",{"_9":546,"_547":582,"_549":583},"/app/03.02.problem/test/",[551,552,553,554,555,556],{"_9":546,"_547":585},"/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":439,"_524":588,"_22":92,"_24":93,"_526":589,"_541":590,"_544":592,"_557":595,"_560":597,"_290":373,"_292":323,"_9":322,"_574":-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;",[591],"https://www.epicreact.dev/workshops/react-hooks/lift-more-state/solution",{"_9":546,"_547":593,"_549":594},"/app/03.02.solution/test/",[551,552,553,554,555,556],{"_9":546,"_547":596},"/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":373,"_289":599,"_322":610},{"_20":95,"_166":441,"_524":600,"_22":96,"_24":97,"_526":601,"_541":602,"_544":604,"_557":607,"_560":609,"_290":373,"_292":373,"_9":289,"_562":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;",[603],"https://www.epicreact.dev/workshops/react-hooks/colocate-state",{"_9":546,"_547":605,"_549":606},"/app/03.03.problem/test/",[551,552,553,554,555,556],{"_9":546,"_547":608},"/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":441,"_524":611,"_22":100,"_24":101,"_526":612,"_541":613,"_544":615,"_557":618,"_560":620,"_290":373,"_292":373,"_9":322,"_574":-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;",[614],"https://www.epicreact.dev/workshops/react-hooks/colocate-state/solution",{"_9":546,"_547":616,"_549":617},"/app/03.03.solution/test/",[551,552,553,554,555,556],{"_9":546,"_547":619},"/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",[622,627,632],{"_20":79,"_166":437,"_524":539,"_22":80,"_24":81,"_526":540,"_541":623,"_544":624,"_557":626,"_560":561,"_290":373,"_292":291,"_9":289,"_562":83},[543],{"_9":546,"_547":548,"_549":625},[551,552,553,554,555,556],{"_9":546,"_547":559},{"_20":87,"_166":439,"_524":577,"_22":88,"_24":89,"_526":578,"_541":628,"_544":629,"_557":631,"_560":586,"_290":373,"_292":323,"_9":289,"_562":91},[580],{"_9":546,"_547":582,"_549":630},[551,552,553,554,555,556],{"_9":546,"_547":585},{"_20":95,"_166":441,"_524":600,"_22":96,"_24":97,"_526":601,"_541":633,"_544":634,"_557":636,"_560":609,"_290":373,"_292":373,"_9":289,"_562":99},[603],{"_9":546,"_547":605,"_549":635},[551,552,553,554,555,556],{"_9":546,"_547":608},[638,643,648],{"_20":83,"_166":437,"_524":564,"_22":84,"_24":85,"_526":565,"_541":639,"_544":640,"_557":642,"_560":573,"_290":373,"_292":291,"_9":322,"_574":-5},[567],{"_9":546,"_547":569,"_549":641},[551,552,553,554,555,556],{"_9":546,"_547":572},{"_20":91,"_166":439,"_524":588,"_22":92,"_24":93,"_526":589,"_541":644,"_544":645,"_557":647,"_560":597,"_290":373,"_292":323,"_9":322,"_574":-5},[591],{"_9":546,"_547":593,"_549":646},[551,552,553,554,555,556],{"_9":546,"_547":596},{"_20":99,"_166":441,"_524":611,"_22":100,"_24":101,"_526":612,"_541":649,"_544":650,"_557":652,"_560":620,"_290":373,"_292":373,"_9":322,"_574":-5},[614],{"_9":546,"_547":616,"_549":651},[551,552,553,554,555,556],{"_9":546,"_547":619},"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",656],"exerciseFinished",{"_659":660,"_24":661},"file","/myapp/workshop-content/exercises/03.lifting-state/FINISHED.mdx","exercises/03.lifting-state/FINISHED.mdx","prevStepLink",{"_664":665,"_666":667},"to","/exercise/03/03/solution","aria-label","Colocate State (solution)","nextStepLink",{"_664":670,"_666":457},"/exercise/04","actionData","errors"]

03. Lifting State/Elaboration