[{"_1":2,"_751":-5,"_752":-5},"loaderData",{"_3":4,"_453":454,"_598":599},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_158":159,"_161":162,"_163":16,"_164":165,"_166":167,"_221":169,"_222":171,"_172":173,"_223":224,"_245":246,"_270":-5,"_271":-5,"_272":273},"userId",{"_7":8,"_9":10},"id","69857405-a274-469a-937b-b9c1fbfcef56","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","loggedInProductHosts",[],"workshopConfig",{"_168":169,"_170":171,"_172":173,"_179":180,"_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":174,"_175":176,"_177":178},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-hooks","discordChannelId","1285244676286189569","discordTags",[195,196],"1285246046498328627","1285245663281549448","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.49.3","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","f3ee46d2cd3e0cf5912c8c86078ad437b8d5753689f63b1f3c6d2e00f506b31f","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","epicweb-dev-react-hooks.fly.dev","port","","origin","http://epicweb-dev-react-hooks.fly.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,298,311,322,335,347,359,373,382,392,402,411,422,431,441],{"_7":277,"_278":214,"_279":280,"_281":282,"_283":280,"_20":284,"_164":285,"_287":288,"_294":295},"0f0115c5-025e-476b-95e2-bb830aa2eeae","hasAccess","avatarUrl","https://cdn.discordapp.com/avatars/392624075429904384/98cbfbc893035ec5167043fae22e66fc.png?size=512","imageUrlSmall","https://cdn.discordapp.com/avatars/392624075429904384/98cbfbc893035ec5167043fae22e66fc.png?size=64","imageUrlLarge","Drew",[286],"www.epicai.pro","location",{"_221":289,"_290":286,"_209":291},"MCP UI 🪟","productHost",{"_292":293},"exerciseNumber",3,"locations",[296],{"_221":289,"_290":286,"_209":297},{"_292":293},{"_7":299,"_278":214,"_281":300,"_283":301,"_20":302,"_287":303,"_294":308},"eb190aa3-aeb6-4277-b6c4-b8759d25bd84","https://cdn.discordapp.com/avatars/400026418463113218/1755a7fa26d489e233510692d4648ae1.png?size=64","https://cdn.discordapp.com/avatars/400026418463113218/1755a7fa26d489e233510692d4648ae1.png?size=512","IOANNIS LAOURAKIS",{"_221":169,"_209":304},{"_9":305,"_292":306,"_307":293},"solution",1,"stepNumber",[309],{"_221":169,"_209":310},{"_9":305,"_292":306,"_307":293},{"_7":312,"_278":214,"_281":313,"_283":314,"_20":315,"_287":316,"_294":319},"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",{"_221":317,"_209":318},"Advanced React Patterns 🤯",{"_9":305,"_292":306,"_307":306},[320],{"_221":317,"_209":321},{"_9":305,"_292":306,"_307":306},{"_7":323,"_278":214,"_281":324,"_283":325,"_20":326,"_287":327,"_294":332},"3a9658f2-31b1-45cb-8399-ae4374702efe","https://www.gravatar.com/avatar/e9e2cfebe4aace3976d62dd5ababba1d?size=64&default=identicon","https://www.gravatar.com/avatar/e9e2cfebe4aace3976d62dd5ababba1d?size=512&default=identicon","M",{"_221":328,"_209":329},"MCP Fundamentals 🧱",{"_9":330,"_292":331,"_307":306},"problem",5,[333],{"_221":328,"_209":334},{"_9":330,"_292":331,"_307":306},{"_7":336,"_278":214,"_279":337,"_281":338,"_283":337,"_20":339,"_164":340,"_287":341,"_294":344},"741662f6-d098-443d-9057-d79da735e22b","https://www.gravatar.com/avatar/083f80b05d74e9405a3ce8c34fcf7d14?size=512&default=identicon","https://www.gravatar.com/avatar/083f80b05d74e9405a3ce8c34fcf7d14?size=64&default=identicon","tecteam@iconosqua.re",[182],{"_221":169,"_290":182,"_209":342},{"_292":343},4,[345],{"_221":169,"_290":182,"_209":346},{"_292":343},{"_7":348,"_278":214,"_279":349,"_281":350,"_283":349,"_20":351,"_164":352,"_287":353,"_294":356},"3b78cd18-0a95-4ede-ab9f-544b8bc2eeab","https://avatars.githubusercontent.com/u/1063328?v=4&size=512","https://avatars.githubusercontent.com/u/1063328?v=4&size=64","Adiel oz",[182],{"_221":317,"_290":182,"_209":354},{"_292":355},2,[357],{"_221":317,"_290":182,"_209":358},{"_292":355},{"_7":360,"_278":214,"_279":361,"_281":362,"_283":361,"_20":363,"_164":364,"_287":366,"_294":370},"24b6a25b-958b-43a5-bbbc-61e9f49176cc","https://www.gravatar.com/avatar/7dc6750db89551c1fa7798e558442667?size=512&default=identicon","https://www.gravatar.com/avatar/7dc6750db89551c1fa7798e558442667?size=64&default=identicon","Nafissa Hassan",[365],"www.epicweb.dev",{"_221":367,"_290":365,"_209":368},"Data Modeling Deep Dive 💾",{"_9":330,"_292":369,"_307":355},8,[371],{"_221":367,"_290":365,"_209":372},{"_9":330,"_292":369,"_307":355},{"_7":374,"_278":214,"_279":375,"_281":376,"_283":375,"_20":377,"_164":378,"_287":379,"_294":380},"2f0eeca3-c6c8-4e4b-8d7e-d0e16c91eca4","https://www.gravatar.com/avatar/6d3695f9dc99b880bb33e9ce7bd770d4?size=512&default=identicon","https://www.gravatar.com/avatar/6d3695f9dc99b880bb33e9ce7bd770d4?size=64&default=identicon","Lee Ritter",[182],{"_221":169,"_290":182},[381],{"_221":169,"_290":182},{"_7":383,"_278":214,"_279":384,"_281":385,"_283":384,"_20":-5,"_164":386,"_287":387,"_294":389},"0c9464ed-0a2d-4f89-9f75-5094fc78ea5a","https://www.gravatar.com/avatar/f9a09ba92a4237e43f709a6c7133a853?size=512&default=identicon","https://www.gravatar.com/avatar/f9a09ba92a4237e43f709a6c7133a853?size=64&default=identicon",[286],{"_221":328,"_290":286,"_209":388},{"_9":330,"_292":293,"_307":343},[390],{"_221":328,"_290":286,"_209":391},{"_9":330,"_292":293,"_307":343},{"_7":393,"_278":214,"_281":394,"_283":395,"_20":-5,"_287":396,"_294":399},"d2d99513-0d15-41ab-bf27-8dd41378a3d6","https://www.gravatar.com/avatar/d50ab37a00f37da6e53eda41574dca60?size=64&default=identicon","https://www.gravatar.com/avatar/d50ab37a00f37da6e53eda41574dca60?size=512&default=identicon",{"_221":397,"_209":398},"React Fundamentals ⚛",{"_292":331},[400],{"_221":397,"_209":401},{"_292":331},{"_7":403,"_278":16,"_164":404,"_287":405,"_294":408},"2fe00491-ee1b-45da-8ff6-824c26e81ea1",[],{"_221":406,"_290":182,"_209":407},"React Server Components 🤹",{"_292":306},[409],{"_221":406,"_290":182,"_209":410},{"_292":306},{"_7":412,"_278":16,"_164":413,"_287":414,"_294":417},"l18bznerb1eli0uvgxkhitow",[],{"_221":415,"_290":286,"_209":416},"Advanced MCP Features 🐡",{"_9":330,"_292":293,"_307":306},[418,420],{"_221":415,"_290":286,"_209":419},{"_9":330,"_292":293,"_307":306},{"_221":415,"_290":286,"_209":421},{"_292":331},{"_7":423,"_278":214,"_424":214,"_164":425,"_287":426,"_294":428},"370bcce9-136e-47d8-84ad-947aa0af720c","optOut",[182,365],{"_221":169,"_290":182,"_209":427},{"_292":306},[429],{"_221":169,"_290":182,"_209":430},{"_292":306},{"_7":432,"_278":214,"_424":214,"_164":433,"_287":434,"_294":438},"cf7ccb15-651e-407d-b924-3cf9c19ebed3",[182,365],{"_221":435,"_290":365,"_209":436},"Web Authentication 🔐",{"_9":305,"_292":437,"_307":293},7,[439],{"_221":435,"_290":365,"_209":440},{"_9":305,"_292":437,"_307":293},{"_7":442,"_164":443,"_287":444},"6782649e-e01a-4023-83ab-064650cb524c",[],{"_221":169,"_253":254,"_290":182,"_445":235,"_446":447,"_209":452},"epicshopVersion","repoStatus",{"_160":16,"_448":-5,"_449":-5,"_450":-5,"_451":-5},"commitsAhead","commitsBehind","localCommit","remoteCommit",{"_292":293,"_307":-5,"_9":-5},"routes/_app+/_layout",{"_221":169,"_455":456,"_594":595,"_597":16},"exercises",[457,495,512,535,558,569],{"_292":306,"_168":458,"_459":460,"_471":472,"_478":479},"Managing UI State","solutions",[461,463,465,467,469],{"_307":306,"_168":462,"_20":27},"useState",{"_307":355,"_168":464,"_20":35},"Controlling Inputs",{"_307":293,"_168":466,"_20":43},"Derive State",{"_307":343,"_168":468,"_20":51},"Initialize State",{"_307":331,"_168":470,"_20":59},"Init Callback","problems",[473,474,475,476,477],{"_307":306,"_168":462,"_20":21},{"_307":355,"_168":464,"_20":31},{"_307":293,"_168":466,"_20":39},{"_307":343,"_168":468,"_20":47},{"_307":331,"_168":470,"_20":55},"steps",[480,483,486,489,492],{"_307":306,"_168":462,"_20":21,"_330":481,"_305":482},{"_20":21,"_168":462},{"_20":27,"_168":462},{"_307":355,"_168":464,"_20":31,"_330":484,"_305":485},{"_20":31,"_168":464},{"_20":35,"_168":464},{"_307":293,"_168":466,"_20":39,"_330":487,"_305":488},{"_20":39,"_168":466},{"_20":43,"_168":466},{"_307":343,"_168":468,"_20":47,"_330":490,"_305":491},{"_20":47,"_168":468},{"_20":51,"_168":468},{"_307":331,"_168":470,"_20":55,"_330":493,"_305":494},{"_20":55,"_168":470},{"_20":59,"_168":470},{"_292":355,"_168":496,"_459":497,"_471":502,"_478":505},"Side-Effects",[498,500],{"_307":306,"_168":499,"_20":67},"useEffect",{"_307":355,"_168":501,"_20":75},"Effect Cleanup",[503,504],{"_307":306,"_168":499,"_20":63},{"_307":355,"_168":501,"_20":71},[506,509],{"_307":306,"_168":499,"_20":63,"_330":507,"_305":508},{"_20":63,"_168":499},{"_20":67,"_168":499},{"_307":355,"_168":501,"_20":71,"_330":510,"_305":511},{"_20":71,"_168":501},{"_20":75,"_168":501},{"_292":293,"_168":513,"_459":514,"_471":521,"_478":525},"Lifting State",[515,517,519],{"_307":306,"_168":516,"_20":83},"Lift State",{"_307":355,"_168":518,"_20":91},"Lift More State",{"_307":293,"_168":520,"_20":99},"Colocate State",[522,523,524],{"_307":306,"_168":516,"_20":79},{"_307":355,"_168":518,"_20":87},{"_307":293,"_168":520,"_20":95},[526,529,532],{"_307":306,"_168":516,"_20":79,"_330":527,"_305":528},{"_20":79,"_168":516},{"_20":83,"_168":516},{"_307":355,"_168":518,"_20":87,"_330":530,"_305":531},{"_20":87,"_168":518},{"_20":91,"_168":518},{"_307":293,"_168":520,"_20":95,"_330":533,"_305":534},{"_20":95,"_168":520},{"_20":99,"_168":520},{"_292":343,"_168":536,"_459":537,"_471":544,"_478":548},"DOM Side-Effects",[538,540,542],{"_307":306,"_168":539,"_20":107},"Refs",{"_307":355,"_168":541,"_20":115},"Dependencies",{"_307":293,"_168":543,"_20":123},"Primitive Dependencies",[545,546,547],{"_307":306,"_168":539,"_20":103},{"_307":355,"_168":541,"_20":111},{"_307":293,"_168":543,"_20":119},[549,552,555],{"_307":306,"_168":539,"_20":103,"_330":550,"_305":551},{"_20":103,"_168":539},{"_20":107,"_168":539},{"_307":355,"_168":541,"_20":111,"_330":553,"_305":554},{"_20":111,"_168":541},{"_20":115,"_168":541},{"_307":293,"_168":543,"_20":119,"_330":556,"_305":557},{"_20":119,"_168":543},{"_20":123,"_168":543},{"_292":331,"_168":559,"_459":560,"_471":563,"_478":565},"Unique IDs",[561],{"_307":306,"_168":562,"_20":131},"useId",[564],{"_307":306,"_168":562,"_20":127},[566],{"_307":306,"_168":562,"_20":127,"_330":567,"_305":568},{"_20":127,"_168":562},{"_20":131,"_168":562},{"_292":570,"_168":571,"_459":572,"_471":579,"_478":584},6,"Tic Tac Toe",[573,575,577],{"_307":306,"_168":574,"_20":139},"Real World Review: Tic Tac Toe",{"_307":355,"_168":576,"_20":147},"Preserve State in localStorage",{"_307":293,"_168":578,"_20":155},"Add Game History Feature",[580,582,583],{"_307":306,"_168":581,"_20":135},"setState callback",{"_307":355,"_168":576,"_20":143},{"_307":293,"_168":578,"_20":151},[585,588,591],{"_307":306,"_168":581,"_20":135,"_330":586,"_305":587},{"_20":135,"_168":581},{"_20":139,"_168":574},{"_307":355,"_168":576,"_20":143,"_330":589,"_305":590},{"_20":143,"_168":576},{"_20":147,"_168":576},{"_307":293,"_168":578,"_20":151,"_330":592,"_305":593},{"_20":151,"_168":578},{"_20":155,"_168":578},"playground",{"_596":-5,"_292":-2,"_307":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_600":601,"_221":169,"_209":602,"_733":734,"_735":736,"_737":738,"_742":743,"_748":749},"articleId","workshop-react-hooks-3-finished",{"_22":603,"_292":293,"_604":605,"_168":513,"_606":607,"_608":609,"_610":611,"_613":614,"_478":616,"_471":701,"_459":717},"/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",[612],"https://www.epicreact.dev/workshops/react-hooks/intro-to-lifting-state","finishedEpicVideoEmbeds",[615],"https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-lifting-state",[617,655,678],{"_307":306,"_330":618,"_305":643},{"_20":79,"_168":516,"_604":619,"_22":80,"_24":81,"_606":620,"_621":622,"_624":625,"_637":638,"_640":641,"_292":293,"_307":306,"_9":330,"_642":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",[623],"https://www.epicreact.dev/workshops/react-hooks/lift-state","test",{"_9":626,"_627":628,"_629":630},"browser","pathname","/app/03.01.problem/test/","testFiles",[631,632,633,634,635,636],"controlled-checkbox.test.ts","controlled-search.test.ts","filtering.test.ts","like-post.test.ts","popstate.test.ts","search-params.test.ts","dev",{"_9":626,"_627":639},"/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,"_168":516,"_604":644,"_22":84,"_24":85,"_606":645,"_621":646,"_624":648,"_637":651,"_640":653,"_292":293,"_307":306,"_9":305,"_654":-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;",[647],"https://www.epicreact.dev/workshops/react-hooks/lift-state/solution",{"_9":626,"_627":649,"_629":650},"/app/03.01.solution/test/",[631,632,633,634,635,636],{"_9":626,"_627":652},"/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",{"_307":355,"_330":656,"_305":667},{"_20":87,"_168":518,"_604":657,"_22":88,"_24":89,"_606":658,"_621":659,"_624":661,"_637":664,"_640":666,"_292":293,"_307":355,"_9":330,"_642":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;",[660],"https://www.epicreact.dev/workshops/react-hooks/lift-more-state",{"_9":626,"_627":662,"_629":663},"/app/03.02.problem/test/",[631,632,633,634,635,636],{"_9":626,"_627":665},"/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,"_168":518,"_604":668,"_22":92,"_24":93,"_606":669,"_621":670,"_624":672,"_637":675,"_640":677,"_292":293,"_307":355,"_9":305,"_654":-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;",[671],"https://www.epicreact.dev/workshops/react-hooks/lift-more-state/solution",{"_9":626,"_627":673,"_629":674},"/app/03.02.solution/test/",[631,632,633,634,635,636],{"_9":626,"_627":676},"/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",{"_307":293,"_330":679,"_305":690},{"_20":95,"_168":520,"_604":680,"_22":96,"_24":97,"_606":681,"_621":682,"_624":684,"_637":687,"_640":689,"_292":293,"_307":293,"_9":330,"_642":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;",[683],"https://www.epicreact.dev/workshops/react-hooks/colocate-state",{"_9":626,"_627":685,"_629":686},"/app/03.03.problem/test/",[631,632,633,634,635,636],{"_9":626,"_627":688},"/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,"_168":520,"_604":691,"_22":100,"_24":101,"_606":692,"_621":693,"_624":695,"_637":698,"_640":700,"_292":293,"_307":293,"_9":305,"_654":-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;",[694],"https://www.epicreact.dev/workshops/react-hooks/colocate-state/solution",{"_9":626,"_627":696,"_629":697},"/app/03.03.solution/test/",[631,632,633,634,635,636],{"_9":626,"_627":699},"/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",[702,707,712],{"_20":79,"_168":516,"_604":619,"_22":80,"_24":81,"_606":620,"_621":703,"_624":704,"_637":706,"_640":641,"_292":293,"_307":306,"_9":330,"_642":83},[623],{"_9":626,"_627":628,"_629":705},[631,632,633,634,635,636],{"_9":626,"_627":639},{"_20":87,"_168":518,"_604":657,"_22":88,"_24":89,"_606":658,"_621":708,"_624":709,"_637":711,"_640":666,"_292":293,"_307":355,"_9":330,"_642":91},[660],{"_9":626,"_627":662,"_629":710},[631,632,633,634,635,636],{"_9":626,"_627":665},{"_20":95,"_168":520,"_604":680,"_22":96,"_24":97,"_606":681,"_621":713,"_624":714,"_637":716,"_640":689,"_292":293,"_307":293,"_9":330,"_642":99},[683],{"_9":626,"_627":685,"_629":715},[631,632,633,634,635,636],{"_9":626,"_627":688},[718,723,728],{"_20":83,"_168":516,"_604":644,"_22":84,"_24":85,"_606":645,"_621":719,"_624":720,"_637":722,"_640":653,"_292":293,"_307":306,"_9":305,"_654":-5},[647],{"_9":626,"_627":649,"_629":721},[631,632,633,634,635,636],{"_9":626,"_627":652},{"_20":91,"_168":518,"_604":668,"_22":92,"_24":93,"_606":669,"_621":724,"_624":725,"_637":727,"_640":677,"_292":293,"_307":355,"_9":305,"_654":-5},[671],{"_9":626,"_627":673,"_629":726},[631,632,633,634,635,636],{"_9":626,"_627":676},{"_20":99,"_168":520,"_604":691,"_22":100,"_24":101,"_606":692,"_621":729,"_624":730,"_637":732,"_640":700,"_292":293,"_307":293,"_9":305,"_654":-5},[694],{"_9":626,"_627":696,"_629":731},[631,632,633,634,635,636],{"_9":626,"_627":699},"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",736],"exerciseFinished",{"_739":740,"_24":741},"file","/myapp/workshop-content/exercises/03.lifting-state/FINISHED.mdx","exercises/03.lifting-state/FINISHED.mdx","prevStepLink",{"_744":745,"_746":747},"to","/exercise/03/03/solution","aria-label","Colocate State (solution)","nextStepLink",{"_744":750,"_746":536},"/exercise/04","actionData","errors"]

03. Lifting State/Elaboration