[{"_1":2,"_695":-5,"_696":-5},"loaderData",{"_3":4,"_331":332,"_478":479},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_158":159,"_161":162,"_163":16,"_164":165,"_221":167,"_222":169,"_170":171,"_223":224,"_245":246,"_270":-5,"_271":-5,"_272":273},"userId",{"_7":8,"_9":10},"id","zpszlfzxmzcp1sfhlkxmrd1h","type","cookie.randomId","preferences","progress",[],"user","userHasAccess",false,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.managing-ui-state/01.problem.use-state","relativePath","exercises/01.managing-ui-state/01.problem.use-state",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.managing-ui-state/01.solution.use-state","exercises/01.managing-ui-state/01.solution.use-state",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.managing-ui-state/02.problem.control","exercises/01.managing-ui-state/02.problem.control",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.managing-ui-state/02.solution.control","exercises/01.managing-ui-state/02.solution.control",{"_20":39,"_22":40,"_24":41},"01.03.problem","/myapp/workshop-content/exercises/01.managing-ui-state/03.problem.derive","exercises/01.managing-ui-state/03.problem.derive",{"_20":43,"_22":44,"_24":45},"01.03.solution","/myapp/workshop-content/exercises/01.managing-ui-state/03.solution.derive","exercises/01.managing-ui-state/03.solution.derive",{"_20":47,"_22":48,"_24":49},"01.04.problem","/myapp/workshop-content/exercises/01.managing-ui-state/04.problem.init","exercises/01.managing-ui-state/04.problem.init",{"_20":51,"_22":52,"_24":53},"01.04.solution","/myapp/workshop-content/exercises/01.managing-ui-state/04.solution.init","exercises/01.managing-ui-state/04.solution.init",{"_20":55,"_22":56,"_24":57},"01.05.problem","/myapp/workshop-content/exercises/01.managing-ui-state/05.problem.cb","exercises/01.managing-ui-state/05.problem.cb",{"_20":59,"_22":60,"_24":61},"01.05.solution","/myapp/workshop-content/exercises/01.managing-ui-state/05.solution.cb","exercises/01.managing-ui-state/05.solution.cb",{"_20":63,"_22":64,"_24":65},"02.01.problem","/myapp/workshop-content/exercises/02.side-effects/01.problem.effects","exercises/02.side-effects/01.problem.effects",{"_20":67,"_22":68,"_24":69},"02.01.solution","/myapp/workshop-content/exercises/02.side-effects/01.solution.effects","exercises/02.side-effects/01.solution.effects",{"_20":71,"_22":72,"_24":73},"02.02.problem","/myapp/workshop-content/exercises/02.side-effects/02.problem.cleanup","exercises/02.side-effects/02.problem.cleanup",{"_20":75,"_22":76,"_24":77},"02.02.solution","/myapp/workshop-content/exercises/02.side-effects/02.solution.cleanup","exercises/02.side-effects/02.solution.cleanup",{"_20":79,"_22":80,"_24":81},"03.01.problem","/myapp/workshop-content/exercises/03.lifting-state/01.problem.lift","exercises/03.lifting-state/01.problem.lift",{"_20":83,"_22":84,"_24":85},"03.01.solution","/myapp/workshop-content/exercises/03.lifting-state/01.solution.lift","exercises/03.lifting-state/01.solution.lift",{"_20":87,"_22":88,"_24":89},"03.02.problem","/myapp/workshop-content/exercises/03.lifting-state/02.problem.lift-array","exercises/03.lifting-state/02.problem.lift-array",{"_20":91,"_22":92,"_24":93},"03.02.solution","/myapp/workshop-content/exercises/03.lifting-state/02.solution.lift-array","exercises/03.lifting-state/02.solution.lift-array",{"_20":95,"_22":96,"_24":97},"03.03.problem","/myapp/workshop-content/exercises/03.lifting-state/03.problem.colocate","exercises/03.lifting-state/03.problem.colocate",{"_20":99,"_22":100,"_24":101},"03.03.solution","/myapp/workshop-content/exercises/03.lifting-state/03.solution.colocate","exercises/03.lifting-state/03.solution.colocate",{"_20":103,"_22":104,"_24":105},"04.01.problem","/myapp/workshop-content/exercises/04.dom/01.problem.ref","exercises/04.dom/01.problem.ref",{"_20":107,"_22":108,"_24":109},"04.01.solution","/myapp/workshop-content/exercises/04.dom/01.solution.ref","exercises/04.dom/01.solution.ref",{"_20":111,"_22":112,"_24":113},"04.02.problem","/myapp/workshop-content/exercises/04.dom/02.problem.deps","exercises/04.dom/02.problem.deps",{"_20":115,"_22":116,"_24":117},"04.02.solution","/myapp/workshop-content/exercises/04.dom/02.solution.deps","exercises/04.dom/02.solution.deps",{"_20":119,"_22":120,"_24":121},"04.03.problem","/myapp/workshop-content/exercises/04.dom/03.problem.primitives","exercises/04.dom/03.problem.primitives",{"_20":123,"_22":124,"_24":125},"04.03.solution","/myapp/workshop-content/exercises/04.dom/03.solution.primitives","exercises/04.dom/03.solution.primitives",{"_20":127,"_22":128,"_24":129},"05.01.problem","/myapp/workshop-content/exercises/05.unique-ids/01.problem.use-id","exercises/05.unique-ids/01.problem.use-id",{"_20":131,"_22":132,"_24":133},"05.01.solution","/myapp/workshop-content/exercises/05.unique-ids/01.solution.use-id","exercises/05.unique-ids/01.solution.use-id",{"_20":135,"_22":136,"_24":137},"06.01.problem","/myapp/workshop-content/exercises/06.tic-tac-toe/01.problem.set-state-callback","exercises/06.tic-tac-toe/01.problem.set-state-callback",{"_20":139,"_22":140,"_24":141},"06.01.solution","/myapp/workshop-content/exercises/06.tic-tac-toe/01.solution.set-state-callback","exercises/06.tic-tac-toe/01.solution.set-state-callback",{"_20":143,"_22":144,"_24":145},"06.02.problem","/myapp/workshop-content/exercises/06.tic-tac-toe/02.problem.local-storage","exercises/06.tic-tac-toe/02.problem.local-storage",{"_20":147,"_22":148,"_24":149},"06.02.solution","/myapp/workshop-content/exercises/06.tic-tac-toe/02.solution.local-storage","exercises/06.tic-tac-toe/02.solution.local-storage",{"_20":151,"_22":152,"_24":153},"06.03.problem","/myapp/workshop-content/exercises/06.tic-tac-toe/03.problem.history","exercises/06.tic-tac-toe/03.problem.history",{"_20":155,"_22":156,"_24":157},"06.03.solution","/myapp/workshop-content/exercises/06.tic-tac-toe/03.solution.history","exercises/06.tic-tac-toe/03.solution.history","repoUpdates",{"_160":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_166":167,"_168":169,"_170":171,"_177":178,"_195":196,"_197":198,"_199":200,"_201":202,"_205":206,"_211":212,"_215":216,"_217":218,"_219":220},"title","React Hooks 🎣","subtitle","Understand the building blocks of React","instructor",{"_20":172,"_173":174,"_175":176},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-hooks","discordChannelId","1285244676286189569","discordTags",[193,194],"1285246046498328627","1285245663281549448","onboardingVideo","https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/react-hooks","githubRoot","https://github.com/epicweb-dev/react-hooks/tree/main","stackBlitzConfig",{"_203":204},"view","editor","forms",{"_207":208,"_209":210},"workshop","https://docs.google.com/forms/d/e/1FAIpQLSdRmj9p8-5zyoqRzxp3UpqSbC3aFkweXvvJIKes0a5s894gzg/viewform?hl=en&embedded=true&entry.2123647600={workshopTitle}","exercise","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234={workshopTitle}&entry.428900931={exerciseTitle}","testTab",{"_213":214},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_225":226,"_227":228,"_229":230,"_231":198,"_232":200,"_233":214,"_234":235,"_236":237,"_238":239,"_240":214,"_241":242,"_243":244},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_WORKSHOP_INSTANCE_ID","4e1570b81d1baf3d16bd3a08ece570cb","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","6.23.6","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","07d9afa05daeec49cda96afb8dd60bca891d2b582ede017828a03606f4701864","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_247":248,"_249":250,"_251":252,"_253":254,"_255":254,"_256":257,"_264":265,"_266":267,"_268":216,"_269":214},"protocol","http:","hostname","hooks.epicreact.dev","port","","origin","http://hooks.epicreact.dev","domain","hints",{"_258":259,"_260":261,"_262":263},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/01/finished","session",{"_258":-5},"separator","online","toast","confettiId","presence",{"_274":275},"users",[276,294,301,308,315,318,327],{"_7":277,"_278":214,"_279":280,"_281":282,"_20":283,"_284":285},"71964b55-f18b-45fc-b0f9-0a8593f77195","hasAccess","imageUrlSmall","https://cdn.discordapp.com/avatars/596181061638160434/fef142073f5b1087e4477f84d6860b7f.png?size=64","imageUrlLarge","https://cdn.discordapp.com/avatars/596181061638160434/fef142073f5b1087e4477f84d6860b7f.png?size=512","Victor Rhea","location",{"_221":286,"_253":287,"_209":288},"React Fundamentals ⚛","http://localhost:5639",{"_9":289,"_290":291,"_292":293},"problem","exerciseNumber",7,"stepNumber",5,{"_7":295,"_278":214,"_279":296,"_281":297,"_20":298,"_284":299},"6c5131b7-848a-48f8-832d-db5c3b42b00a","https://cdn.discordapp.com/avatars/707707018487791726/a3aebe42238f1fe0f37d1138dff3f3c2.png?size=64","https://cdn.discordapp.com/avatars/707707018487791726/a3aebe42238f1fe0f37d1138dff3f3c2.png?size=512","Brandon Perfetti",{"_221":300,"_253":287},"Advanced React APIs 🔥",{"_7":302,"_284":303},"a38su5ctbmc61rqgubwijcm4",{"_221":304,"_253":305,"_209":306},"MCP Fundamentals 🧱","http://mcp-fundamentals.epicai.pro",{"_290":307},1,{"_7":309,"_278":214,"_279":310,"_281":311,"_20":-5,"_284":312},"a77492e4-9323-48f6-ab92-21359ef191da","https://www.gravatar.com/avatar/d748cd68e6e9062b0bd9a671f4a96c4b?size=64&default=identicon","https://www.gravatar.com/avatar/d748cd68e6e9062b0bd9a671f4a96c4b?size=512&default=identicon",{"_221":313,"_253":287,"_209":314},"Testing Fundamentals",{"_9":289,"_290":307,"_292":307},{"_7":316,"_284":317},"dpip3069tlr843i9ufh0x7ri",{"_221":300,"_253":287},{"_7":319,"_278":214,"_279":320,"_281":321,"_20":-5,"_284":322},"ea70e32f-a0d1-4551-9c96-ae430df0b89c","https://www.gravatar.com/avatar/5d473a91ab0dc634fe07e7d70f27ac97?size=64&default=identicon","https://www.gravatar.com/avatar/5d473a91ab0dc634fe07e7d70f27ac97?size=512&default=identicon",{"_221":286,"_253":323,"_209":324},"http://localhost:5640",{"_9":325,"_290":291,"_292":326},"solution",2,{"_7":328,"_284":329},"ajzvbc0mjiwpkiiwdmahjk7h",{"_221":167,"_253":254,"_209":330},{"_290":307,"_292":-5,"_9":-5},"routes/_app+/_layout",{"_221":167,"_333":334,"_474":475,"_477":16},"exercises",[335,375,392,415,438,449],{"_290":307,"_166":336,"_337":338,"_351":352,"_358":359},"Managing UI State","solutions",[339,341,343,346,349],{"_292":307,"_166":340,"_20":27},"useState",{"_292":326,"_166":342,"_20":35},"Controlling Inputs",{"_292":344,"_166":345,"_20":43},3,"Derive State",{"_292":347,"_166":348,"_20":51},4,"Initialize State",{"_292":293,"_166":350,"_20":59},"Init Callback","problems",[353,354,355,356,357],{"_292":307,"_166":340,"_20":21},{"_292":326,"_166":342,"_20":31},{"_292":344,"_166":345,"_20":39},{"_292":347,"_166":348,"_20":47},{"_292":293,"_166":350,"_20":55},"steps",[360,363,366,369,372],{"_292":307,"_166":340,"_20":21,"_289":361,"_325":362},{"_20":21,"_166":340},{"_20":27,"_166":340},{"_292":326,"_166":342,"_20":31,"_289":364,"_325":365},{"_20":31,"_166":342},{"_20":35,"_166":342},{"_292":344,"_166":345,"_20":39,"_289":367,"_325":368},{"_20":39,"_166":345},{"_20":43,"_166":345},{"_292":347,"_166":348,"_20":47,"_289":370,"_325":371},{"_20":47,"_166":348},{"_20":51,"_166":348},{"_292":293,"_166":350,"_20":55,"_289":373,"_325":374},{"_20":55,"_166":350},{"_20":59,"_166":350},{"_290":326,"_166":376,"_337":377,"_351":382,"_358":385},"Side-Effects",[378,380],{"_292":307,"_166":379,"_20":67},"useEffect",{"_292":326,"_166":381,"_20":75},"Effect Cleanup",[383,384],{"_292":307,"_166":379,"_20":63},{"_292":326,"_166":381,"_20":71},[386,389],{"_292":307,"_166":379,"_20":63,"_289":387,"_325":388},{"_20":63,"_166":379},{"_20":67,"_166":379},{"_292":326,"_166":381,"_20":71,"_289":390,"_325":391},{"_20":71,"_166":381},{"_20":75,"_166":381},{"_290":344,"_166":393,"_337":394,"_351":401,"_358":405},"Lifting State",[395,397,399],{"_292":307,"_166":396,"_20":83},"Lift State",{"_292":326,"_166":398,"_20":91},"Lift More State",{"_292":344,"_166":400,"_20":99},"Colocate State",[402,403,404],{"_292":307,"_166":396,"_20":79},{"_292":326,"_166":398,"_20":87},{"_292":344,"_166":400,"_20":95},[406,409,412],{"_292":307,"_166":396,"_20":79,"_289":407,"_325":408},{"_20":79,"_166":396},{"_20":83,"_166":396},{"_292":326,"_166":398,"_20":87,"_289":410,"_325":411},{"_20":87,"_166":398},{"_20":91,"_166":398},{"_292":344,"_166":400,"_20":95,"_289":413,"_325":414},{"_20":95,"_166":400},{"_20":99,"_166":400},{"_290":347,"_166":416,"_337":417,"_351":424,"_358":428},"DOM Side-Effects",[418,420,422],{"_292":307,"_166":419,"_20":107},"Refs",{"_292":326,"_166":421,"_20":115},"Dependencies",{"_292":344,"_166":423,"_20":123},"Primitive Dependencies",[425,426,427],{"_292":307,"_166":419,"_20":103},{"_292":326,"_166":421,"_20":111},{"_292":344,"_166":423,"_20":119},[429,432,435],{"_292":307,"_166":419,"_20":103,"_289":430,"_325":431},{"_20":103,"_166":419},{"_20":107,"_166":419},{"_292":326,"_166":421,"_20":111,"_289":433,"_325":434},{"_20":111,"_166":421},{"_20":115,"_166":421},{"_292":344,"_166":423,"_20":119,"_289":436,"_325":437},{"_20":119,"_166":423},{"_20":123,"_166":423},{"_290":293,"_166":439,"_337":440,"_351":443,"_358":445},"Unique IDs",[441],{"_292":307,"_166":442,"_20":131},"useId",[444],{"_292":307,"_166":442,"_20":127},[446],{"_292":307,"_166":442,"_20":127,"_289":447,"_325":448},{"_20":127,"_166":442},{"_20":131,"_166":442},{"_290":450,"_166":451,"_337":452,"_351":459,"_358":464},6,"Tic Tac Toe",[453,455,457],{"_292":307,"_166":454,"_20":139},"Real World Review: Tic Tac Toe",{"_292":326,"_166":456,"_20":147},"Preserve State in localStorage",{"_292":344,"_166":458,"_20":155},"Add Game History Feature",[460,462,463],{"_292":307,"_166":461,"_20":135},"setState callback",{"_292":326,"_166":456,"_20":143},{"_292":344,"_166":458,"_20":151},[465,468,471],{"_292":307,"_166":461,"_20":135,"_289":466,"_325":467},{"_20":135,"_166":461},{"_20":139,"_166":454},{"_292":326,"_166":456,"_20":143,"_289":469,"_325":470},{"_20":143,"_166":456},{"_20":147,"_166":456},{"_292":344,"_166":458,"_20":151,"_289":472,"_325":473},{"_20":151,"_166":458},{"_20":155,"_166":458},"playground",{"_476":-5,"_290":-2,"_292":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_480":481,"_221":167,"_209":482,"_677":678,"_679":680,"_681":682,"_686":687,"_692":693},"articleId","workshop-react-hooks-1-finished",{"_22":483,"_290":307,"_484":485,"_166":336,"_486":487,"_488":489,"_490":491,"_493":494,"_358":496,"_351":625,"_337":651},"/myapp/workshop-content/exercises/01.managing-ui-state","dirName","01.managing-ui-state","instructionsCode","var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var a in e)r(t,a,{get:e[a],enumerable:!0})},c=(t,e,a,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of m(e))!b.call(t,o)&&o!==a&&r(t,o,{get:()=>e[o],enumerable:!(s=p(e,o))||s.enumerable});return t};var y=(t,e,a)=>(a=t!=null?u(f(t)):{},c(e||!t||!t.__esModule?r(a,\"default\",{value:t,enumerable:!0}):a,t)),g=t=>c(r({},\"__esModule\",{value:!0}),t);var l=w((E,i)=>{i.exports=_jsx_runtime});var C={};v(C,{default:()=>d,frontmatter:()=>k});var n=y(l()),k=void 0;function h(t){let e={a:\"a\",code:\"code\",h1:\"h1\",img:\"img\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...t.components},{EpicVideo:a}=e;return a||x(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Managing UI State\"}),`\n`,(0,n.jsx)(a,{url:\"https://www.epicreact.dev/workshops/react-hooks/intro-to-managing-ui-state\"}),`\n`,(0,n.jsx)(e.p,{children:`Dynamic applications allow users to interact and make changes to what they see\non the page and the application should respond by updating the UI based on what\nthe user has done. We accomplish this by using state. When state changes (for\nexample as the result of user interaction and input), we update the UI. Here's\nhow that works with React:`}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/react-app-lifecycle.png\",alt:\"render --> set up the DOM --> user interacts --> state changes --> re-render --> update the DOM --> return to user interacts\"})}),`\n`,(0,n.jsx)(e.p,{children:`There's a cycle of user interaction, state changes, and re-rendering. This\nis the core of how React works for interactive applications.`}),`\n`,(0,n.jsxs)(e.p,{children:[\"The \",(0,n.jsx)(e.code,{children:\"render\"}),` phase is what we've done so far with creating React elements.\nHandling user interactions is what we do with event listeners like `,(0,n.jsx)(e.code,{children:\"onChange\"}),`.\nNow we're going to get into the `,(0,n.jsx)(e.code,{children:\"state changes\"}),\" bit.\"]}),`\n`,(0,n.jsx)(e.p,{children:`In React, you use special functions called \"hooks\" to do this. Common built-in\nhooks include:`}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"useState\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"useRef\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"use\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"useReducer\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.code,{children:\"useEffect\"})}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`Each of these is a special function that you can call inside your custom React\ncomponent function to store data (like state) or perform actions (or\nside-effects). There are a few more built-in hooks that have special use cases,\nbut the ones above are what you'll be using most of the time.`}),`\n`,(0,n.jsxs)(e.p,{children:[\"Each of the hooks has a unique API. Some return a value (like \",(0,n.jsx)(e.code,{children:\"useRef\"}),` and\n`,(0,n.jsx)(e.code,{children:\"use\"}),\"), others return a pair of values (like \",(0,n.jsx)(e.code,{children:\"useState\"}),` and\n`,(0,n.jsx)(e.code,{children:\"useReducer\"}),\"), and others return nothing at all (like \",(0,n.jsx)(e.code,{children:\"useEffect\"}),\").\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Here's an example of a component that uses the \",(0,n.jsx)(e.code,{children:\"useState\"}),` hook and an onClick\nevent handler to update that state:`]}),`\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:\"Counter\"}),\"() {\",`\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.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"increment\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},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\"}),\")\",`\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\"}),\" <\",(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(--base08)\"},children:\"increment\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},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\":\"5\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useState\"}),` is a function that accepts a single argument. That argument is\nthe initial state for the instance of the component. In our case, the state will\nstart as `,(0,n.jsx)(e.code,{children:\"0\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"useState\"}),` returns a pair of values. It does this by returning an array\nwith two elements (and we use destructuring syntax to assign each of those\nvalues to distinct variables). The first of the pair is the state value and the\nsecond is a function we can call to update the state. We can name these\nvariables whatever we want. Common convention is to choose a name for the state\nvariable, then prefix `,(0,n.jsx)(e.code,{children:\"set\"}),\" in front of that for the updater function.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[`State can be defined as: data that changes over time. So how does this work over\ntime? When the button is clicked, our `,(0,n.jsx)(e.code,{children:\"increment\"}),` function will be called at\nwhich time we update the `,(0,n.jsx)(e.code,{children:\"count\"}),\" by calling \",(0,n.jsx)(e.code,{children:\"setCount\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"When we call \",(0,n.jsx)(e.code,{children:\"setCount\"}),`, that tells React to re-render our component. When it\ndoes this, the entire `,(0,n.jsx)(e.code,{children:\"Counter\"}),\" function is re-run, so when \",(0,n.jsx)(e.code,{children:\"useState\"}),` is\ncalled this time, the value we get back is the value that we called `,(0,n.jsx)(e.code,{children:\"setCount\"}),`\nwith. And it continues like that until `,(0,n.jsx)(e.code,{children:\"Counter\"}),` is unmounted (removed from the\napplication), or the user closes the application.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Note that after the initial render, the argument passed to \",(0,n.jsx)(e.code,{children:\"useState\"}),` is\nignored. The only time it's used is when the component is first created. The\nonly way to change the state value of the component while it's around is to\ncall the updater function returned by `,(0,n.jsx)(e.code,{children:\"useState\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F4DC} To get a deeper dive on how React keeps track of hooks, read/watch this great\npost/talk by `,(0,n.jsx)(e.a,{href:\"https://twitter.com/swyx\",children:\"Shawn Wang\"}),`:\n`,(0,n.jsx)(e.a,{href:\"https://www.swyx.io/getting-closure-on-hooks/\",children:\"Getting Closure on Hooks\"})]}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F4DC} And here's a reference to\n`,(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/hooks\",children:\"the hooks official documentation\"}),\".\"]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.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 g(C);})();\n;return Component;","finishedCode","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var l=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),g=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,a)=>{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:!(a=h(t,r))||a.enumerable});return e};var _=(e,t,n)=>(n=e!=null?u(w(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=l((y,s)=>{s.exports=_jsx_runtime});var E={};g(E,{default:()=>m,frontmatter:()=>k});var o=_(d()),k=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||M(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Managing UI State\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-managing-ui-state\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work! You now know how to manage client-side component state in a React\napplication!`})]})}function m(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function M(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(E);})();\n;return Component;","instructionsEpicVideoEmbeds",[492],"https://www.epicreact.dev/workshops/react-hooks/intro-to-managing-ui-state","finishedEpicVideoEmbeds",[495],"https://www.epicreact.dev/workshops/react-hooks/dad-joke-break-managing-ui-state",[497,530,554,578,602],{"_292":307,"_289":498,"_325":518},{"_20":21,"_166":340,"_484":499,"_22":23,"_24":25,"_486":500,"_501":502,"_504":505,"_512":513,"_515":516,"_290":307,"_292":307,"_9":289,"_517":27},"01.problem.use-state","var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var m=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),k=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},a=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of f(e))!g.call(t,s)&&s!==n&&r(t,s,{get:()=>e[s],enumerable:!(i=p(e,s))||i.enumerable});return t};var b=(t,e,n)=>(n=t!=null?l(w(t)):{},a(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),x=t=>a(r({},\"__esModule\",{value:!0}),t);var c=m((M,h)=>{h.exports=_jsx_runtime});var _={};k(_,{default:()=>d,frontmatter:()=>y});var o=b(c()),y=void 0;function u(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||v(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"useState\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-hooks/usestate\"}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} We've got you working on a blog search page. Allow me to introduce you to\n\\u{1F9DD}\\u200D\\u2642\\uFE0F Kellie the coworker who put this together.`}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F9DD}\\u200D\\u2642\\uFE0F Hello! I'm Kellie the coworker and I do things for you sometimes. I've\nstarted up this app that you're going to be working with. There's a search\ninput, a couple checkboxes, a submit button, and a list of blog posts. You've\nbeen asked to make it so when the user types into the search field it filters\nthe list of blog posts. And when the checkboxes are checked, we want to update\nthe filter for the user to include those values. You might find it helpful to\nreview the code before you get started.`}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Thanks Kellie! Ok, so we're going to take this step-by-step. For this first\nstep, we just want you to create a state variable for the user's query and pass\nthat along to the `,(0,o.jsx)(e.code,{children:\"\"}),\".\"]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(u,{...t})}):u(t)}function v(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(_);})();\n;return Component;","epicVideoEmbeds",[503],"https://www.epicreact.dev/workshops/react-hooks/usestate","test",{"_9":506,"_507":508,"_509":510},"browser","pathname","/app/01.01.problem/test/","testFiles",[511],"filtering.test.ts","dev",{"_9":506,"_507":514},"/app/01.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/01.managing-ui-state/01.problem.use-state?view=editor&title=useState+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":27,"_166":340,"_484":519,"_22":28,"_24":29,"_486":520,"_501":521,"_504":523,"_512":526,"_515":528,"_290":307,"_292":307,"_9":325,"_529":-5},"01.solution.use-state","var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),x=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let s of f(t))!g.call(e,s)&&s!==n&&r(e,s,{get:()=>t[s],enumerable:!(i=l(t,s))||i.enumerable});return e};var y=(e,t,n)=>(n=e!=null?u(m(e)):{},c(t||!e||!e.__esModule?r(n,\"default\",{value:e,enumerable:!0}):n,e)),_=e=>c(r({},\"__esModule\",{value:!0}),e);var d=w((v,a)=>{a.exports=_jsx_runtime});var M={};x(M,{default:()=>p,frontmatter:()=>k});var o=y(d()),k=void 0;function h(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||j(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"useState\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-hooks/usestate/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Super! You've successfully filtered the blog posts based on what the user has\ntyped. This is where we start getting into why React is so great. It makes doing\nstateful dynamic things like this super easy compared to the alternative of\nworking with the DOM directly. Let's keep going.`})]})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}function j(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(M);})();\n;return Component;",[522],"https://www.epicreact.dev/workshops/react-hooks/usestate/solution",{"_9":506,"_507":524,"_509":525},"/app/01.01.solution/test/",[511],{"_9":506,"_507":527},"/app/01.01.solution/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/01.managing-ui-state/01.solution.use-state?view=editor&title=useState+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_292":326,"_289":531,"_325":543},{"_20":31,"_166":342,"_484":532,"_22":32,"_24":33,"_486":533,"_501":534,"_504":536,"_512":540,"_515":542,"_290":307,"_292":326,"_9":289,"_517":35},"02.problem.control","var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)c(n,o,{get:e[o],enumerable:!0})},a=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!w.call(n,r)&&r!==o&&c(n,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return n};var k=(n,e,o)=>(o=n!=null?u(m(n)):{},a(e||!n||!n.__esModule?c(o,\"default\",{value:n,enumerable:!0}):o,n)),v=n=>a(c({},\"__esModule\",{value:!0}),n);var s=x((C,h)=>{h.exports=_jsx_runtime});var y={};g(y,{default:()=>d,frontmatter:()=>b});var t=k(s()),b=void 0;function l(n){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:o}=e;return o||_(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Controlling Inputs\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-hooks/controlling-inputs\"}),`\n`,(0,t.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} When the user clicks on one of the checkboxes, we want to auto-fill that\nvalue into the search input for them. This means we need to \"control\" the input\nvalue so we can set it programmatically. We can do this by using the `,(0,t.jsx)(e.code,{children:\"value\"}),`\nprop on the input.`]}),`\n`,(0,t.jsxs)(e.p,{children:[`\\u{1F4DC} You can read up more on this in the React docs:\n`,(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable\",children:\"Controlling an input with a state variable\"})]}),`\n`,(0,t.jsxs)(e.p,{children:[`Once we add the query as the value for the input, we'll also want to have a\nfunction responsible for updating the query when the user checks or unchecks the\ncheckboxes and call that in the `,(0,t.jsx)(e.code,{children:\"onChange\"}),\" handler of the checkboxes.\"]}),`\n`,(0,t.jsx)(e.p,{children:\"Good luck!\"})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(l,{...n})}):l(n)}function _(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return v(y);})();\n;return Component;",[535],"https://www.epicreact.dev/workshops/react-hooks/controlling-inputs",{"_9":506,"_507":537,"_509":538},"/app/01.02.problem/test/",[539,511],"controlled-search.test.ts",{"_9":506,"_507":541},"/app/01.02.problem/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/01.managing-ui-state/02.problem.control?view=editor&title=Controlling+Inputs+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":35,"_166":342,"_484":544,"_22":36,"_24":37,"_486":545,"_501":546,"_504":548,"_512":551,"_515":553,"_290":307,"_292":326,"_9":325,"_529":-5},"02.solution.control","var Component=(()=>{var l=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!x.call(t,r)&&r!==o&&c(t,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return t};var y=(t,e,o)=>(o=t!=null?l(f(t)):{},s(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),_=t=>s(c({},\"__esModule\",{value:!0}),t);var h=w((E,a)=>{a.exports=_jsx_runtime});var b={};g(b,{default:()=>d,frontmatter:()=>j});var n=y(h()),j=void 0;function u(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Controlling Inputs\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-hooks/controlling-inputs/solution\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Great! Now you can add/remove each of these tags to the search when they're\nchecked. Programmatically controlling the input value is why you use the `,(0,n.jsx)(e.code,{children:\"value\"}),`\nprop.`]}),`\n`,(0,n.jsx)(e.p,{children:`But the feature is incomplete because a user could manually type the tag into\nthe search input and it would not be reflected in the checkbox. Let's look at\nthat next.`})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}function k(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(b);})();\n;return Component;",[547],"https://www.epicreact.dev/workshops/react-hooks/controlling-inputs/solution",{"_9":506,"_507":549,"_509":550},"/app/01.02.solution/test/",[539,511],{"_9":506,"_507":552},"/app/01.02.solution/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/01.managing-ui-state/02.solution.control?view=editor&title=Controlling+Inputs+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_292":344,"_289":555,"_325":567},{"_20":39,"_166":345,"_484":556,"_22":40,"_24":41,"_486":557,"_501":558,"_504":560,"_512":564,"_515":566,"_290":307,"_292":344,"_9":289,"_517":43},"03.problem.derive","var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(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 v(e))!u.call(a,s)&&s!==l&&r(a,s,{get:()=>e[s],enumerable:!(c=p(e,s))||c.enumerable});return a};var E=(a,e,l)=>(l=a!=null?b(y(a)):{},o(e||!a||!a.__esModule?r(l,\"default\",{value:a,enumerable:!0}):l,a)),N=a=>o(r({},\"__esModule\",{value:!0}),a);var i=m((x,t)=>{t.exports=_jsx_runtime});var C={};k(C,{default:()=>h,frontmatter:()=>w});var n=E(i()),w=void 0;function d(a){let e={code:\"code\",h1:\"h1\",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:\"Derive State\"}),`\n`,(0,n.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-hooks/derive-state\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F989} Often, it can be easy to think you need to keep track of two elements of\nstate when you really only need one. For example, let's say you have a counter\nthat will display the number of times a user has clicked a button and also it\nwill display whether that number is odd or even. You might be tempted to write\nthe following code:`}),`\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(--base0E)\"},children:\"export\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" \",(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\":\"4\",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.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"isEven\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setIsEven\"}),\"] \",(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:\"true\"}),\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"handleClick\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"newCount\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(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\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCount\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"newCount\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setIsEven\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"newCount\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"%\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"2\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:`\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:\"p\"}),\">\",(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\":\"16\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"isEven\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Even\"}),\"'\",\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Odd\"}),\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",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(--base08)\"},children:\"handleClick\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">Increment\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[`This code works, but it's not ideal because it's keeping track of two pieces of\nstate when it only needs to keep track of one. Imagine if we had multiple places\nwhere the count could be changed. We'd have to remember to update the `,(0,n.jsx)(e.code,{children:\"isEven\"}),`\nstate in all of those places. This is a recipe for bugs.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Instead, we can derive the \",(0,n.jsx)(e.code,{children:\"isEven\"}),\" state from the \",(0,n.jsx)(e.code,{children:\"count\"}),\" state:\"]}),`\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(--base0E)\"},children:\"export\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"default\"}),\" \",(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\":\"4\",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\":\"5\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"handleClick\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"newCount\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(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\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCount\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"newCount\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t}\",`\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:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// this is the derived state\"}),`\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:\"isEven\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(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:\"2\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(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:\"p\"}),\">\",(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\":\"17\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"isEven\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Even\"}),\"'\",\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Odd\"}),\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",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(--base08)\"},children:\"handleClick\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">Increment\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This is a much better solution because we only have to keep track of the \",(0,n.jsx)(e.code,{children:\"count\"}),`\nstate. The `,(0,n.jsx)(e.code,{children:\"isEven\"}),\" state is derived from the \",(0,n.jsx)(e.code,{children:\"count\"}),` state. This means we don't\nhave to worry about keeping the `,(0,n.jsx)(e.code,{children:\"isEven\"}),\" state in sync with the \",(0,n.jsx)(e.code,{children:\"count\"}),\" state.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Thanks Olivia! So what we want to do in this step is derive the checkboxes'\n`,(0,n.jsx)(e.code,{children:\"checked\"}),\" state based on whether the query contains the word they represent.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Give that a shot.\"})]})}function h(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 N(C);})();\n;return Component;",[559],"https://www.epicreact.dev/workshops/react-hooks/derive-state",{"_9":506,"_507":561,"_509":562},"/app/01.03.problem/test/",[563,539,511],"controlled-checkbox.test.ts",{"_9":506,"_507":565},"/app/01.03.problem/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/01.managing-ui-state/03.problem.derive?view=editor&title=Derive+State+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":43,"_166":345,"_484":568,"_22":44,"_24":45,"_486":569,"_501":570,"_504":572,"_512":575,"_515":577,"_290":307,"_292":344,"_9":325,"_529":-5},"03.solution.derive","var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),k=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},i=(e,t,o,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of m(t))!x.call(e,r)&&r!==o&&c(e,r,{get:()=>t[r],enumerable:!(s=u(t,r))||s.enumerable});return e};var _=(e,t,o)=>(o=e!=null?p(f(e)):{},i(t||!e||!e.__esModule?c(o,\"default\",{value:e,enumerable:!0}):o,e)),y=e=>i(c({},\"__esModule\",{value:!0}),e);var l=w((E,a)=>{a.exports=_jsx_runtime});var b={};k(b,{default:()=>h,frontmatter:()=>g});var n=_(l()),g=void 0;function d(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||j(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"Derive State\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-hooks/derive-state/solution\"}),`\n`,(0,n.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Awesome work! It looks really cool to have the checkboxes check and uncheck\nautomatically as you type! We're now controlling both all the inputs on here\nall based on a single element of state. Well done.`})]})}function h(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}function j(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(b);})();\n;return Component;",[571],"https://www.epicreact.dev/workshops/react-hooks/derive-state/solution",{"_9":506,"_507":573,"_509":574},"/app/01.03.solution/test/",[563,539,511],{"_9":506,"_507":576},"/app/01.03.solution/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/01.managing-ui-state/03.solution.derive?view=editor&title=Derive+State+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_292":347,"_289":579,"_325":591},{"_20":47,"_166":348,"_484":580,"_22":48,"_24":49,"_486":581,"_501":582,"_504":584,"_512":588,"_515":590,"_290":307,"_292":347,"_9":289,"_517":51},"04.problem.init","var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),w=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},l=(n,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of b(e))!m.call(n,t)&&t!==r&&o(n,t,{get:()=>e[t],enumerable:!(s=u(e,t))||s.enumerable});return n};var f=(n,e,r)=>(r=n!=null?p(y(n)):{},l(e||!n||!n.__esModule?o(r,\"default\",{value:n,enumerable:!0}):r,n)),g=n=>l(o({},\"__esModule\",{value:!0}),n);var i=v((j,c)=>{c.exports=_jsx_runtime});var E={};w(E,{default:()=>d,frontmatter:()=>x});var a=f(i()),x=void 0;function h(n){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...n.components},{EpicVideo:r}=e;return r||k(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Initialize State\"}),`\n`,(0,a.jsx)(r,{url:\"https://www.epicreact.dev/workshops/react-hooks/initialize-state\"}),`\n`,(0,a.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} We want users to be able to share a link to this page with a prefilled\nsearch. For example:\n`,(0,a.jsx)(e.a,{href:\"/app/playground?query=cat+dog\",children:(0,a.jsx)(e.code,{children:\"https://www.example.com/search?query=cat+dog\"})}),\".\"]}),`\n`,(0,a.jsx)(e.p,{children:`Right now, this won't work, because we don't have a way to initialize the\nstate of the search box from the URL. Let's fix that.`}),`\n`,(0,a.jsxs)(e.p,{children:[\"The \",(0,a.jsx)(e.code,{children:\"useState\"}),` hook supports an initial value. Right now we're just passing\n`,(0,a.jsx)(e.code,{children:\"''\"}),\" as the initial value, but we can use the \",(0,a.jsx)(e.code,{children:\"URLSearchParams\"}),` API to get the\nquery string from the URL and use that as the initial value.`]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"params\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"URLSearchParams\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"window\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"location\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"search\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"initialQuery\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"params\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"get\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"query\"}),\"'\",\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"??\"}),\" \",\"''\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"Then you can pass that \",(0,a.jsx)(e.code,{children:\"initialQuery\"}),\" to \",(0,a.jsx)(e.code,{children:\"useState\"}),`. Give that a shot and then\nthe link above should work!`]})]})}function d(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(h,{...n})}):h(n)}function k(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(E);})();\n;return Component;",[583],"https://www.epicreact.dev/workshops/react-hooks/initialize-state",{"_9":506,"_507":585,"_509":586},"/app/01.04.problem/test/",[563,539,511,587],"search-params.test.ts",{"_9":506,"_507":589},"/app/01.04.problem/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/01.managing-ui-state/04.problem.init?view=editor&title=Initialize+State+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":51,"_166":348,"_484":592,"_22":52,"_24":53,"_486":593,"_501":594,"_504":596,"_512":599,"_515":601,"_290":307,"_292":347,"_9":325,"_529":-5},"04.solution.init","var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=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)r(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let i of m(t))!x.call(e,i)&&i!==n&&r(e,i,{get:()=>t[i],enumerable:!(s=l(t,i))||s.enumerable});return e};var g=(e,t,n)=>(n=e!=null?u(f(e)):{},c(t||!e||!e.__esModule?r(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(r({},\"__esModule\",{value:!0}),e);var p=w((z,a)=>{a.exports=_jsx_runtime});var M={};_(M,{default:()=>d,frontmatter:()=>k});var o=g(p()),k=void 0;function h(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:\"Initialize State\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-hooks/initialize-state/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great! Now our users can share links to this page that initialize the search\nto something specific.`})]})}function d(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(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;",[595],"https://www.epicreact.dev/workshops/react-hooks/initialize-state/solution",{"_9":506,"_507":597,"_509":598},"/app/01.04.solution/test/",[563,539,511,587],{"_9":506,"_507":600},"/app/01.04.solution/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/01.managing-ui-state/04.solution.init?view=editor&title=Initialize+State+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_292":293,"_289":603,"_325":614},{"_20":55,"_166":350,"_484":604,"_22":56,"_24":57,"_486":605,"_501":606,"_504":608,"_512":611,"_515":613,"_290":307,"_292":293,"_9":289,"_517":59},"05.problem.cb","var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var t in e)l(a,t,{get:e[t],enumerable:!0})},s=(a,e,t,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!m.call(a,r)&&r!==t&&l(a,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return a};var f=(a,e,t)=>(t=a!=null?u(y(a)):{},s(e||!a||!a.__esModule?l(t,\"default\",{value:a,enumerable:!0}):t,a)),w=a=>s(l({},\"__esModule\",{value:!0}),a);var c=v((j,i)=>{i.exports=_jsx_runtime});var S={};g(S,{default:()=>h,frontmatter:()=>k});var n=f(c()),k=void 0;function d(a){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components},{EpicVideo:t}=e;return t||x(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Init Callback\"}),`\n`,(0,n.jsx)(t,{url:\"https://www.epicreact.dev/workshops/react-hooks/init-callback\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F989} There's one more thing you should know about \",(0,n.jsx)(e.code,{children:\"useState\"}),` initialization and\nthat is a small performance optimization. `,(0,n.jsx)(e.code,{children:\"useState\"}),\" can accept a function.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"You may recall from earlier we mentioned that the first argument to \",(0,n.jsx)(e.code,{children:\"useState\"}),`\nis only used during the initial render. It's not used on subsequent renders.\nThis is because the initial value is only used when the component is first\nrendered. After that, the value is managed by React and you use the updater\nfunction to update it.`]}),`\n`,(0,n.jsxs)(e.p,{children:[`But imagine a situation where calculating that initial value were\ncomputationally expensive. It would be a waste to compute the initial value for\nall but the initial render right? That's where the function form of `,(0,n.jsx)(e.code,{children:\"useState\"}),`\ncomes in.`]}),`\n`,(0,n.jsx)(e.p,{children:`Let's imagine we have a function that calculates the initial value and it's\ncomputationally expensive:`}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"val\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setVal\"}),\"] \",(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(--base0D)\"},children:\"calculateInitialValue\"}),\"())\",`\n`]})})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This will work just fine, but it's not ideal. The \",(0,n.jsx)(e.code,{children:\"calculateInitialValue\"}),` will\nbe called on every render, even though it's only needed for the initial render.\nSo instead of calling the function, we can just pass it:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"val\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setVal\"}),\"] \",(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(--base08)\"},children:\"calculateInitialValue\"}),\")\",`\n`]})})}),`\n`,(0,n.jsx)(e.p,{children:`Typically doing this is unnecessary, but it's good to know about in case you\nneed it.`}),`\n`,(0,n.jsx)(e.p,{children:\"So\"}),`\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(--base03)\"},children:\"// This will call getQueryParam on every render, undermining our optimization! \\u{1F635}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"query\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setQuery\"}),\"] \",(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(--base0D)\"},children:\"getQueryParam\"}),\"())\",`\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:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// This will _only_ call getQueryParam on init. Great! \\u2705\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"query\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setQuery\"}),\"] \",(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(--base08)\"},children:\"getQueryParam\"}),\")\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"You're going to be making the \",(0,n.jsx)(e.code,{children:\"getQueryParam\"}),\" function. Got it? Great, let's go!\"]}),`\n`,(0,n.jsx)(\"callout-info\",{children:(0,n.jsx)(e.p,{children:`\\u{1F6A8} Note, we can't reasonably test whether you're doing this right so the tests\nare passing from the get-go, but you'll know you didn't break anything if the\ntests are still working when you're finished.`})})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function x(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(S);})();\n;return Component;",[607],"https://www.epicreact.dev/workshops/react-hooks/init-callback",{"_9":506,"_507":609,"_509":610},"/app/01.05.problem/test/",[563,539,511,587],{"_9":506,"_507":612},"/app/01.05.problem/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/01.managing-ui-state/05.problem.cb?view=editor&title=Init+Callback+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":59,"_166":350,"_484":615,"_22":60,"_24":61,"_486":616,"_501":617,"_504":619,"_512":622,"_515":624,"_290":307,"_292":293,"_9":325,"_529":-5},"05.solution.cb","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=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})},a=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of h(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=u(t,r))||s.enumerable});return e};var y=(e,t,n)=>(n=e!=null?m(f(e)):{},a(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),b=e=>a(i({},\"__esModule\",{value:!0}),e);var d=w((M,c)=>{c.exports=_jsx_runtime});var g={};_(g,{default:()=>l,frontmatter:()=>j});var o=y(d()),j=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||k(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Init Callback\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-hooks/init-callback/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great! This isn't 100% necessary as a performance optimization, but it's easy\nand doesn't hurt readability so we may as well!`})]})}function l(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function k(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(g);})();\n;return Component;",[618],"https://www.epicreact.dev/workshops/react-hooks/init-callback/solution",{"_9":506,"_507":620,"_509":621},"/app/01.05.solution/test/",[563,539,511,587],{"_9":506,"_507":623},"/app/01.05.solution/","https://stackblitz.com/github/epicweb-dev/react-hooks/tree/main/exercises/01.managing-ui-state/05.solution.cb?view=editor&title=Init+Callback+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[626,631,636,641,646],{"_20":21,"_166":340,"_484":499,"_22":23,"_24":25,"_486":500,"_501":627,"_504":628,"_512":630,"_515":516,"_290":307,"_292":307,"_9":289,"_517":27},[503],{"_9":506,"_507":508,"_509":629},[511],{"_9":506,"_507":514},{"_20":31,"_166":342,"_484":532,"_22":32,"_24":33,"_486":533,"_501":632,"_504":633,"_512":635,"_515":542,"_290":307,"_292":326,"_9":289,"_517":35},[535],{"_9":506,"_507":537,"_509":634},[539,511],{"_9":506,"_507":541},{"_20":39,"_166":345,"_484":556,"_22":40,"_24":41,"_486":557,"_501":637,"_504":638,"_512":640,"_515":566,"_290":307,"_292":344,"_9":289,"_517":43},[559],{"_9":506,"_507":561,"_509":639},[563,539,511],{"_9":506,"_507":565},{"_20":47,"_166":348,"_484":580,"_22":48,"_24":49,"_486":581,"_501":642,"_504":643,"_512":645,"_515":590,"_290":307,"_292":347,"_9":289,"_517":51},[583],{"_9":506,"_507":585,"_509":644},[563,539,511,587],{"_9":506,"_507":589},{"_20":55,"_166":350,"_484":604,"_22":56,"_24":57,"_486":605,"_501":647,"_504":648,"_512":650,"_515":613,"_290":307,"_292":293,"_9":289,"_517":59},[607],{"_9":506,"_507":609,"_509":649},[563,539,511,587],{"_9":506,"_507":612},[652,657,662,667,672],{"_20":27,"_166":340,"_484":519,"_22":28,"_24":29,"_486":520,"_501":653,"_504":654,"_512":656,"_515":528,"_290":307,"_292":307,"_9":325,"_529":-5},[522],{"_9":506,"_507":524,"_509":655},[511],{"_9":506,"_507":527},{"_20":35,"_166":342,"_484":544,"_22":36,"_24":37,"_486":545,"_501":658,"_504":659,"_512":661,"_515":553,"_290":307,"_292":326,"_9":325,"_529":-5},[547],{"_9":506,"_507":549,"_509":660},[539,511],{"_9":506,"_507":552},{"_20":43,"_166":345,"_484":568,"_22":44,"_24":45,"_486":569,"_501":663,"_504":664,"_512":666,"_515":577,"_290":307,"_292":344,"_9":325,"_529":-5},[571],{"_9":506,"_507":573,"_509":665},[563,539,511],{"_9":506,"_507":576},{"_20":51,"_166":348,"_484":592,"_22":52,"_24":53,"_486":593,"_501":668,"_504":669,"_512":671,"_515":601,"_290":307,"_292":347,"_9":325,"_529":-5},[595],{"_9":506,"_507":597,"_509":670},[563,539,511,587],{"_9":506,"_507":600},{"_20":59,"_166":350,"_484":615,"_22":60,"_24":61,"_486":616,"_501":673,"_504":674,"_512":676,"_515":624,"_290":307,"_292":293,"_9":325,"_529":-5},[618],{"_9":506,"_507":620,"_509":675},[563,539,511,587],{"_9":506,"_507":623},"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=Managing%20UI%20State","epicVideoInfosPromise",["P",680],"exerciseFinished",{"_683":684,"_24":685},"file","/myapp/workshop-content/exercises/01.managing-ui-state/FINISHED.mdx","exercises/01.managing-ui-state/FINISHED.mdx","prevStepLink",{"_688":689,"_690":691},"to","/exercise/01/05/solution","aria-label","Init Callback (solution)","nextStepLink",{"_688":694,"_690":376},"/exercise/02","actionData","errors"]

01. Managing UI State/Elaboration