[{"_1":2,"_811":-5,"_812":-5},"loaderData",{"_3":4,"_513":514,"_658":659},"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","t50rligybkyzb3vf6dtyf7fs","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.36.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","734cd7804aec9491f8a819b03ede282bbb1cce4e9bfc2d90a3b93d6ceb968842","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,304,313,319,327,334,342,349,359,368,375,382,389,397,404,412,419,426,433,439,446,452,457,463,469,472,476,480,485,491,497,503,509],{"_7":278,"_279":215,"_280":281,"_282":283,"_20":284,"_285":286},"1569790b-c1b2-4871-949f-fcb53ef12b5a","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/ac5f77198a2eb7fb5839189e12c35a45?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/ac5f77198a2eb7fb5839189e12c35a45?size=512&default=identicon","Gábor","location",{"_222":287,"_254":288,"_210":289},"MCP Fundamentals 🧱","http://localhost:5640",{"_9":290,"_291":292,"_293":294},"problem","exerciseNumber",2,"stepNumber",1,{"_7":296,"_279":215,"_280":297,"_282":298,"_20":299,"_285":300},"929ff7e3-ab28-408e-b630-cc93a2013371","https://cdn.discordapp.com/avatars/190587588749426688/585e3ef71aa100ea62b37ab07d507a98.png?size=64","https://cdn.discordapp.com/avatars/190587588749426688/585e3ef71aa100ea62b37ab07d507a98.png?size=512","Chris",{"_222":301,"_254":302,"_210":303},"Advanced MCP Features 🐡","http://localhost:5639",{"_9":290,"_291":294,"_293":294},{"_7":305,"_279":215,"_280":306,"_282":307,"_20":308,"_285":309},"0c98e138-ac56-4ff4-8937-f970beec4470","https://www.gravatar.com/avatar/d89994ef2da5e9ec55a8ad41192c0465?size=64&default=identicon","https://www.gravatar.com/avatar/d89994ef2da5e9ec55a8ad41192c0465?size=512&default=identicon","Markus Leitvoll",{"_222":310,"_254":302,"_210":311},"React Server Components 🤹",{"_9":290,"_291":312,"_293":294},5,{"_7":314,"_279":215,"_280":315,"_282":316,"_20":317,"_285":318},"aa113987-6b8d-47c0-9e82-802a4c6439a1","https://www.gravatar.com/avatar/045f13e5f6463cc2b8f5f1547fcaad9b?size=64&default=identicon","https://www.gravatar.com/avatar/045f13e5f6463cc2b8f5f1547fcaad9b?size=512&default=identicon","Daniel Moreno",{"_222":287,"_254":288},{"_7":320,"_279":215,"_280":321,"_282":322,"_20":323,"_285":324},"4bac82b1-11fe-4145-9439-047940b5e76f","https://www.gravatar.com/avatar/cc59d06392dd1c4e30745495c476fe75?size=64&default=identicon","https://www.gravatar.com/avatar/cc59d06392dd1c4e30745495c476fe75?size=512&default=identicon","Sarveswaran MG",{"_222":325,"_254":302,"_210":326},"React Fundamentals ⚛",{"_291":294},{"_7":328,"_279":215,"_280":329,"_282":330,"_20":331,"_285":332},"74445977-a2ee-42eb-9cc2-5d52370b3b83","https://cdn.discordapp.com/avatars/691345686209363999/ffe885743f43c77c51e49eb436fe9258.png?size=64","https://cdn.discordapp.com/avatars/691345686209363999/ffe885743f43c77c51e49eb436fe9258.png?size=512","Dimitar",{"_222":301,"_254":302,"_210":333},{"_291":292},{"_7":335,"_279":215,"_280":336,"_282":337,"_20":338,"_285":339},"b1d67030-b10f-435d-ad8a-c32de47f4875","https://www.gravatar.com/avatar/9b937261589c3e633f5ec14b269779cb?size=64&default=identicon","https://www.gravatar.com/avatar/9b937261589c3e633f5ec14b269779cb?size=512&default=identicon","Alba",{"_222":325,"_254":302,"_210":340},{"_9":290,"_291":341,"_293":312},8,{"_7":343,"_279":215,"_280":344,"_282":345,"_20":346,"_285":347},"70078aa1-7b41-40f4-9930-79013303627b","https://avatars.githubusercontent.com/u/4356894?v=4&size=64","https://avatars.githubusercontent.com/u/4356894?v=4&size=512","Thor Anderson",{"_222":287,"_254":302,"_210":348},{"_9":290,"_291":292,"_293":292},{"_7":350,"_279":215,"_280":351,"_282":352,"_20":353,"_285":354},"ad3251c9-2810-4e8f-be7e-f4740807dc35","https://www.gravatar.com/avatar/35dcfd1f36937f8b58c693625de734f4?size=64&default=identicon","https://www.gravatar.com/avatar/35dcfd1f36937f8b58c693625de734f4?size=512&default=identicon","accounts@lehnerchristian.com",{"_222":355,"_254":302,"_210":356},"React Suspense 🔀",{"_9":357,"_291":358,"_293":294},"solution",3,{"_7":360,"_279":215,"_280":361,"_282":362,"_20":363,"_285":364},"1c7280fe-b2ca-4416-9d2e-11e4fa91e655","https://cdn.discordapp.com/avatars/603759289391382556/8c5277b23a4e81afd524afce2dc19dc2.png?size=64","https://cdn.discordapp.com/avatars/603759289391382556/8c5277b23a4e81afd524afce2dc19dc2.png?size=512","Lenin",{"_222":365,"_254":302,"_210":366},"Advanced React APIs 🔥",{"_9":357,"_291":294,"_293":367},4,{"_7":369,"_279":215,"_280":370,"_282":371,"_20":372,"_285":373},"c3bd78dc-c18b-4b73-86c8-719a669c94cf","https://www.gravatar.com/avatar/9a2574c26339f9d957efb4da27c813ed?size=64&default=identicon","https://www.gravatar.com/avatar/9a2574c26339f9d957efb4da27c813ed?size=512&default=identicon","René",{"_222":301,"_254":302,"_210":374},{"_291":358},{"_7":376,"_279":215,"_280":377,"_282":378,"_20":379,"_285":380},"3ee89ee5-8953-45d1-b5ab-ad021cd9d0c2","https://avatars.githubusercontent.com/u/26024074?v=4&size=64","https://avatars.githubusercontent.com/u/26024074?v=4&size=512","Rob Mellett",{"_222":287,"_254":302,"_210":381},{"_9":357,"_291":367,"_293":292},{"_7":383,"_279":215,"_280":384,"_282":385,"_20":386,"_285":387},"a3a68f6e-99e3-461b-aaf9-b3c19c41f9ce","https://www.gravatar.com/avatar/cfb21b8ddb358003cdc45fb85c5dbd97?size=64&default=identicon","https://www.gravatar.com/avatar/cfb21b8ddb358003cdc45fb85c5dbd97?size=512&default=identicon","Kola Sai Kumar",{"_222":325,"_254":302,"_210":388},{"_9":290,"_291":292,"_293":294},{"_7":390,"_279":215,"_280":391,"_282":392,"_20":393,"_285":394},"b08ba0b9-15fc-4a79-9101-f8978cdb91ec","https://www.gravatar.com/avatar/a798abb868ea9519c266fcc16c7dcb3a?size=64&default=identicon","https://www.gravatar.com/avatar/a798abb868ea9519c266fcc16c7dcb3a?size=512&default=identicon","Adam Lapczynski",{"_222":395,"_254":302,"_210":396},"Data Modeling Deep Dive 💾",{"_9":357,"_291":292,"_293":292},{"_7":398,"_279":215,"_280":399,"_282":400,"_20":401,"_285":402},"f950ecc1-9a37-4281-976f-fabe8fa99b7c","https://avatars.githubusercontent.com/u/57518241?v=4&size=64","https://avatars.githubusercontent.com/u/57518241?v=4&size=512","Eva",{"_222":301,"_254":302,"_210":403},{"_9":357,"_291":367,"_293":292},{"_7":405,"_279":215,"_280":406,"_282":407,"_20":408,"_285":409},"6b483b47-62f7-42cb-888f-6835e58a4e13","https://www.gravatar.com/avatar/aebe2aeead1ced652077892cce271ded?size=64&default=identicon","https://www.gravatar.com/avatar/aebe2aeead1ced652077892cce271ded?size=512&default=identicon","sebastian.sporek@techsterowniki.pl",{"_222":410,"_254":302,"_210":411},"Full Stack Foundations 🔭",{"_9":290,"_291":292,"_293":358},{"_7":413,"_279":215,"_280":414,"_282":415,"_20":416,"_285":417},"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ü",{"_222":365,"_254":302,"_210":418},{"_9":290,"_291":294,"_293":294},{"_7":420,"_279":215,"_280":421,"_282":422,"_20":423,"_285":424},"a7fd98bd-77b9-4e08-92df-1f7ac71c94da","https://cdn.discordapp.com/avatars/592944375382671370/b5c7fb365472b8a6a29f4ce219027ab4.png?size=64","https://cdn.discordapp.com/avatars/592944375382671370/b5c7fb365472b8a6a29f4ce219027ab4.png?size=512","shadab",{"_222":301,"_254":302,"_210":425},{"_9":357,"_291":358,"_293":292},{"_7":427,"_279":215,"_280":428,"_282":429,"_20":430,"_285":431},"afcb5fbb-9f5e-4dcc-a201-f6b2b7c22aaf","https://www.gravatar.com/avatar/3906494abe29e7418425dbce15264502?size=64&default=identicon","https://www.gravatar.com/avatar/3906494abe29e7418425dbce15264502?size=512&default=identicon","Yuri",{"_222":287,"_254":302,"_210":432},{"_9":290,"_291":367,"_293":292},{"_7":434,"_279":215,"_280":435,"_282":436,"_20":437,"_285":438},"5cc86b55-3cf3-4fc4-a3af-19337c74816b","https://cdn.discordapp.com/avatars/747729180405399602/ea9aba5c94d6e582b9454ba99145c009.png?size=64","https://cdn.discordapp.com/avatars/747729180405399602/ea9aba5c94d6e582b9454ba99145c009.png?size=512","Oliver",{"_222":287,"_254":302},{"_7":440,"_279":215,"_280":441,"_282":442,"_20":443,"_285":444},"9537696e-381f-4933-bb6a-6798a41947ea","https://www.gravatar.com/avatar/715d9d1a4d48c173cb24b84f62c3c71b?size=64&default=identicon","https://www.gravatar.com/avatar/715d9d1a4d48c173cb24b84f62c3c71b?size=512&default=identicon","Guilherme ",{"_222":287,"_254":302,"_210":445},{"_9":290,"_291":358,"_293":292},{"_7":447,"_279":215,"_280":448,"_282":449,"_20":450,"_285":451},"5356fc58-f432-4ca8-a45b-44f448dd0797","https://avatars.githubusercontent.com/u/77640534?v=4&size=64","https://avatars.githubusercontent.com/u/77640534?v=4&size=512","pterechine",{"_222":301,"_254":302},{"_7":453,"_285":454},"l3zw2wa4bvf9th3rxuebjxyb",{"_222":287,"_254":455,"_210":456},"http://mcp-fundamentals.epicai.pro",{"_9":357,"_291":294,"_293":294},{"_7":458,"_279":215,"_280":459,"_282":460,"_20":-5,"_285":461},"67fff984-cf53-447f-b148-425aa7713d15","https://cdn.discordapp.com/avatars/703322171786788964/f046c55d25e73c3119ef0a1286e9da74.png?size=64","https://cdn.discordapp.com/avatars/703322171786788964/f046c55d25e73c3119ef0a1286e9da74.png?size=512",{"_222":301,"_254":302,"_210":462},{"_9":290,"_291":294,"_293":292},{"_7":464,"_279":215,"_280":465,"_282":466,"_20":-5,"_285":467},"ae27c3f4-c4b7-46bd-8a63-3a1dfa8c4c6a","https://www.gravatar.com/avatar/5ef620e42108c6e3b753861b95a87190?size=64&default=identicon","https://www.gravatar.com/avatar/5ef620e42108c6e3b753861b95a87190?size=512&default=identicon",{"_222":287,"_254":302,"_210":468},{"_291":358},{"_7":470,"_285":471},"wmldbgbimmtkbcdno8u135ty",{"_222":287,"_254":455},{"_7":473,"_285":474},"r74um1qyb5rn1tygnj6y76tr",{"_222":287,"_254":302,"_210":475},{"_291":358},{"_7":477,"_285":478},"nof53tqvccavh7s7x9n7ya4z",{"_222":167,"_254":302,"_210":479},{"_291":358},{"_7":481,"_285":482},"twb7t20jik9535s3ve5u67yg",{"_222":325,"_254":483,"_210":484},"http://fundamentals.epicreact.dev",{"_291":294},{"_7":486,"_279":16,"_280":487,"_282":488,"_20":-5,"_285":489},"4cc4a7f7-e1d7-4831-8bce-8c1e715da102","https://www.gravatar.com/avatar/cfeb8c0b20d4ae4ea140e86fadf4ffb8?size=64&default=identicon","https://www.gravatar.com/avatar/cfeb8c0b20d4ae4ea140e86fadf4ffb8?size=512&default=identicon",{"_222":287,"_254":302,"_210":490},{"_9":290,"_291":358,"_293":294},{"_7":492,"_279":215,"_280":493,"_282":494,"_20":-5,"_285":495},"56b78920-a568-4fad-b8e1-635ffe0f634f","https://cdn.discordapp.com/avatars/411561782763716609/2cd2a71147cad75dcce0c1149a7f0586.png?size=64","https://cdn.discordapp.com/avatars/411561782763716609/2cd2a71147cad75dcce0c1149a7f0586.png?size=512",{"_222":287,"_254":302,"_210":496},{"_291":358},{"_7":498,"_279":215,"_280":499,"_282":500,"_20":-5,"_285":501},"579b4b89-cfd5-4159-940a-b8501d53e542","https://www.gravatar.com/avatar/885d0b420d2e87effb06dc949e221c70?size=64&default=identicon","https://www.gravatar.com/avatar/885d0b420d2e87effb06dc949e221c70?size=512&default=identicon",{"_222":502,"_254":302},"MCP UI 🪟",{"_7":504,"_279":215,"_280":505,"_282":506,"_20":-5,"_285":507},"c5814f1d-a9d8-440c-a1e4-95aa8f7e351d","https://www.gravatar.com/avatar/1959b7a7525a61d2a09a75de7d97eae3?size=64&default=identicon","https://www.gravatar.com/avatar/1959b7a7525a61d2a09a75de7d97eae3?size=512&default=identicon",{"_222":325,"_254":302,"_210":508},{"_9":357,"_291":292,"_293":294},{"_7":510,"_285":511},"vvykl5hl92fdlq3ok7sgowgh",{"_222":167,"_254":255,"_210":512},{"_291":358,"_293":-5,"_9":-5},"routes/_app+/_layout",{"_222":167,"_515":516,"_654":655,"_657":16},"exercises",[517,555,572,595,618,629],{"_291":294,"_166":518,"_519":520,"_531":532,"_538":539},"Managing UI State","solutions",[521,523,525,527,529],{"_293":294,"_166":522,"_20":27},"useState",{"_293":292,"_166":524,"_20":35},"Controlling Inputs",{"_293":358,"_166":526,"_20":43},"Derive State",{"_293":367,"_166":528,"_20":51},"Initialize State",{"_293":312,"_166":530,"_20":59},"Init Callback","problems",[533,534,535,536,537],{"_293":294,"_166":522,"_20":21},{"_293":292,"_166":524,"_20":31},{"_293":358,"_166":526,"_20":39},{"_293":367,"_166":528,"_20":47},{"_293":312,"_166":530,"_20":55},"steps",[540,543,546,549,552],{"_293":294,"_166":522,"_20":21,"_290":541,"_357":542},{"_20":21,"_166":522},{"_20":27,"_166":522},{"_293":292,"_166":524,"_20":31,"_290":544,"_357":545},{"_20":31,"_166":524},{"_20":35,"_166":524},{"_293":358,"_166":526,"_20":39,"_290":547,"_357":548},{"_20":39,"_166":526},{"_20":43,"_166":526},{"_293":367,"_166":528,"_20":47,"_290":550,"_357":551},{"_20":47,"_166":528},{"_20":51,"_166":528},{"_293":312,"_166":530,"_20":55,"_290":553,"_357":554},{"_20":55,"_166":530},{"_20":59,"_166":530},{"_291":292,"_166":556,"_519":557,"_531":562,"_538":565},"Side-Effects",[558,560],{"_293":294,"_166":559,"_20":67},"useEffect",{"_293":292,"_166":561,"_20":75},"Effect Cleanup",[563,564],{"_293":294,"_166":559,"_20":63},{"_293":292,"_166":561,"_20":71},[566,569],{"_293":294,"_166":559,"_20":63,"_290":567,"_357":568},{"_20":63,"_166":559},{"_20":67,"_166":559},{"_293":292,"_166":561,"_20":71,"_290":570,"_357":571},{"_20":71,"_166":561},{"_20":75,"_166":561},{"_291":358,"_166":573,"_519":574,"_531":581,"_538":585},"Lifting State",[575,577,579],{"_293":294,"_166":576,"_20":83},"Lift State",{"_293":292,"_166":578,"_20":91},"Lift More State",{"_293":358,"_166":580,"_20":99},"Colocate State",[582,583,584],{"_293":294,"_166":576,"_20":79},{"_293":292,"_166":578,"_20":87},{"_293":358,"_166":580,"_20":95},[586,589,592],{"_293":294,"_166":576,"_20":79,"_290":587,"_357":588},{"_20":79,"_166":576},{"_20":83,"_166":576},{"_293":292,"_166":578,"_20":87,"_290":590,"_357":591},{"_20":87,"_166":578},{"_20":91,"_166":578},{"_293":358,"_166":580,"_20":95,"_290":593,"_357":594},{"_20":95,"_166":580},{"_20":99,"_166":580},{"_291":367,"_166":596,"_519":597,"_531":604,"_538":608},"DOM Side-Effects",[598,600,602],{"_293":294,"_166":599,"_20":107},"Refs",{"_293":292,"_166":601,"_20":115},"Dependencies",{"_293":358,"_166":603,"_20":123},"Primitive Dependencies",[605,606,607],{"_293":294,"_166":599,"_20":103},{"_293":292,"_166":601,"_20":111},{"_293":358,"_166":603,"_20":119},[609,612,615],{"_293":294,"_166":599,"_20":103,"_290":610,"_357":611},{"_20":103,"_166":599},{"_20":107,"_166":599},{"_293":292,"_166":601,"_20":111,"_290":613,"_357":614},{"_20":111,"_166":601},{"_20":115,"_166":601},{"_293":358,"_166":603,"_20":119,"_290":616,"_357":617},{"_20":119,"_166":603},{"_20":123,"_166":603},{"_291":312,"_166":619,"_519":620,"_531":623,"_538":625},"Unique IDs",[621],{"_293":294,"_166":622,"_20":131},"useId",[624],{"_293":294,"_166":622,"_20":127},[626],{"_293":294,"_166":622,"_20":127,"_290":627,"_357":628},{"_20":127,"_166":622},{"_20":131,"_166":622},{"_291":630,"_166":631,"_519":632,"_531":639,"_538":644},6,"Tic Tac Toe",[633,635,637],{"_293":294,"_166":634,"_20":139},"Real World Review: Tic Tac Toe",{"_293":292,"_166":636,"_20":147},"Preserve State in localStorage",{"_293":358,"_166":638,"_20":155},"Add Game History Feature",[640,642,643],{"_293":294,"_166":641,"_20":135},"setState callback",{"_293":292,"_166":636,"_20":143},{"_293":358,"_166":638,"_20":151},[645,648,651],{"_293":294,"_166":641,"_20":135,"_290":646,"_357":647},{"_20":135,"_166":641},{"_20":139,"_166":634},{"_293":292,"_166":636,"_20":143,"_290":649,"_357":650},{"_20":143,"_166":636},{"_20":147,"_166":636},{"_293":358,"_166":638,"_20":151,"_290":652,"_357":653},{"_20":151,"_166":638},{"_20":155,"_166":638},"playground",{"_656":-5,"_291":-2,"_293":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_660":661,"_222":167,"_210":662,"_793":794,"_795":796,"_797":798,"_802":803,"_808":809},"articleId","workshop-react-hooks-3-finished",{"_22":663,"_291":358,"_664":665,"_166":573,"_666":667,"_668":669,"_670":671,"_673":674,"_538":676,"_531":761,"_519":777},"/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",[672],"https://www.epicreact.dev/workshops/react-hooks/intro-to-lifting-state","finishedEpicVideoEmbeds",[675],"https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-lifting-state",[677,715,738],{"_293":294,"_290":678,"_357":703},{"_20":79,"_166":576,"_664":679,"_22":80,"_24":81,"_666":680,"_681":682,"_684":685,"_697":698,"_700":701,"_291":358,"_293":294,"_9":290,"_702":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",[683],"https://www.epicreact.dev/workshops/react-hooks/lift-state","test",{"_9":686,"_687":688,"_689":690},"browser","pathname","/app/03.01.problem/test/","testFiles",[691,692,693,694,695,696],"controlled-checkbox.test.ts","controlled-search.test.ts","filtering.test.ts","like-post.test.ts","popstate.test.ts","search-params.test.ts","dev",{"_9":686,"_687":699},"/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":576,"_664":704,"_22":84,"_24":85,"_666":705,"_681":706,"_684":708,"_697":711,"_700":713,"_291":358,"_293":294,"_9":357,"_714":-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;",[707],"https://www.epicreact.dev/workshops/react-hooks/lift-state/solution",{"_9":686,"_687":709,"_689":710},"/app/03.01.solution/test/",[691,692,693,694,695,696],{"_9":686,"_687":712},"/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":716,"_357":727},{"_20":87,"_166":578,"_664":717,"_22":88,"_24":89,"_666":718,"_681":719,"_684":721,"_697":724,"_700":726,"_291":358,"_293":292,"_9":290,"_702":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;",[720],"https://www.epicreact.dev/workshops/react-hooks/lift-more-state",{"_9":686,"_687":722,"_689":723},"/app/03.02.problem/test/",[691,692,693,694,695,696],{"_9":686,"_687":725},"/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":578,"_664":728,"_22":92,"_24":93,"_666":729,"_681":730,"_684":732,"_697":735,"_700":737,"_291":358,"_293":292,"_9":357,"_714":-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;",[731],"https://www.epicreact.dev/workshops/react-hooks/lift-more-state/solution",{"_9":686,"_687":733,"_689":734},"/app/03.02.solution/test/",[691,692,693,694,695,696],{"_9":686,"_687":736},"/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":358,"_290":739,"_357":750},{"_20":95,"_166":580,"_664":740,"_22":96,"_24":97,"_666":741,"_681":742,"_684":744,"_697":747,"_700":749,"_291":358,"_293":358,"_9":290,"_702":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;",[743],"https://www.epicreact.dev/workshops/react-hooks/colocate-state",{"_9":686,"_687":745,"_689":746},"/app/03.03.problem/test/",[691,692,693,694,695,696],{"_9":686,"_687":748},"/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":580,"_664":751,"_22":100,"_24":101,"_666":752,"_681":753,"_684":755,"_697":758,"_700":760,"_291":358,"_293":358,"_9":357,"_714":-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;",[754],"https://www.epicreact.dev/workshops/react-hooks/colocate-state/solution",{"_9":686,"_687":756,"_689":757},"/app/03.03.solution/test/",[691,692,693,694,695,696],{"_9":686,"_687":759},"/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",[762,767,772],{"_20":79,"_166":576,"_664":679,"_22":80,"_24":81,"_666":680,"_681":763,"_684":764,"_697":766,"_700":701,"_291":358,"_293":294,"_9":290,"_702":83},[683],{"_9":686,"_687":688,"_689":765},[691,692,693,694,695,696],{"_9":686,"_687":699},{"_20":87,"_166":578,"_664":717,"_22":88,"_24":89,"_666":718,"_681":768,"_684":769,"_697":771,"_700":726,"_291":358,"_293":292,"_9":290,"_702":91},[720],{"_9":686,"_687":722,"_689":770},[691,692,693,694,695,696],{"_9":686,"_687":725},{"_20":95,"_166":580,"_664":740,"_22":96,"_24":97,"_666":741,"_681":773,"_684":774,"_697":776,"_700":749,"_291":358,"_293":358,"_9":290,"_702":99},[743],{"_9":686,"_687":745,"_689":775},[691,692,693,694,695,696],{"_9":686,"_687":748},[778,783,788],{"_20":83,"_166":576,"_664":704,"_22":84,"_24":85,"_666":705,"_681":779,"_684":780,"_697":782,"_700":713,"_291":358,"_293":294,"_9":357,"_714":-5},[707],{"_9":686,"_687":709,"_689":781},[691,692,693,694,695,696],{"_9":686,"_687":712},{"_20":91,"_166":578,"_664":728,"_22":92,"_24":93,"_666":729,"_681":784,"_684":785,"_697":787,"_700":737,"_291":358,"_293":292,"_9":357,"_714":-5},[731],{"_9":686,"_687":733,"_689":786},[691,692,693,694,695,696],{"_9":686,"_687":736},{"_20":99,"_166":580,"_664":751,"_22":100,"_24":101,"_666":752,"_681":789,"_684":790,"_697":792,"_700":760,"_291":358,"_293":358,"_9":357,"_714":-5},[754],{"_9":686,"_687":756,"_689":791},[691,692,693,694,695,696],{"_9":686,"_687":759},"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",796],"exerciseFinished",{"_799":800,"_24":801},"file","/myapp/workshop-content/exercises/03.lifting-state/FINISHED.mdx","exercises/03.lifting-state/FINISHED.mdx","prevStepLink",{"_804":805,"_806":807},"to","/exercise/03/03/solution","aria-label","Colocate State (solution)","nextStepLink",{"_804":810,"_806":596},"/exercise/04","actionData","errors"]

03. Lifting State/Elaboration