[{"_1":2,"_634":-5,"_635":-5},"loaderData",{"_3":4,"_349":350,"_518":519},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_166":167,"_169":170,"_171":16,"_172":173,"_230":175,"_231":177,"_178":179,"_232":233,"_254":255,"_279":-5,"_280":-5,"_281":282},"userId",{"_7":8,"_9":10},"id","s0y3mch662ypm5m7racli0q5","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,158,162],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.use-reducer/01.problem.new-state","relativePath","exercises/01.use-reducer/01.problem.new-state",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.use-reducer/01.solution.new-state","exercises/01.use-reducer/01.solution.new-state",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.use-reducer/02.problem.previous-state","exercises/01.use-reducer/02.problem.previous-state",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.use-reducer/02.solution.previous-state","exercises/01.use-reducer/02.solution.previous-state",{"_20":39,"_22":40,"_24":41},"01.03.problem","/myapp/workshop-content/exercises/01.use-reducer/03.problem.object","exercises/01.use-reducer/03.problem.object",{"_20":43,"_22":44,"_24":45},"01.03.solution","/myapp/workshop-content/exercises/01.use-reducer/03.solution.object","exercises/01.use-reducer/03.solution.object",{"_20":47,"_22":48,"_24":49},"01.04.problem","/myapp/workshop-content/exercises/01.use-reducer/04.problem.function","exercises/01.use-reducer/04.problem.function",{"_20":51,"_22":52,"_24":53},"01.04.solution","/myapp/workshop-content/exercises/01.use-reducer/04.solution.function","exercises/01.use-reducer/04.solution.function",{"_20":55,"_22":56,"_24":57},"01.05.problem","/myapp/workshop-content/exercises/01.use-reducer/05.problem.traditional","exercises/01.use-reducer/05.problem.traditional",{"_20":59,"_22":60,"_24":61},"01.05.solution","/myapp/workshop-content/exercises/01.use-reducer/05.solution.traditional","exercises/01.use-reducer/05.solution.traditional",{"_20":63,"_22":64,"_24":65},"01.06.problem","/myapp/workshop-content/exercises/01.use-reducer/06.problem.tic-tac-toe","exercises/01.use-reducer/06.problem.tic-tac-toe",{"_20":67,"_22":68,"_24":69},"01.06.solution","/myapp/workshop-content/exercises/01.use-reducer/06.solution.tic-tac-toe","exercises/01.use-reducer/06.solution.tic-tac-toe",{"_20":71,"_22":72,"_24":73},"02.01.problem","/myapp/workshop-content/exercises/02.state-optimization/01.problem.optimize","exercises/02.state-optimization/01.problem.optimize",{"_20":75,"_22":76,"_24":77},"02.01.solution","/myapp/workshop-content/exercises/02.state-optimization/01.solution.optimize","exercises/02.state-optimization/01.solution.optimize",{"_20":79,"_22":80,"_24":81},"03.01.problem","/myapp/workshop-content/exercises/03.custom-hooks/01.problem.function","exercises/03.custom-hooks/01.problem.function",{"_20":83,"_22":84,"_24":85},"03.01.solution","/myapp/workshop-content/exercises/03.custom-hooks/01.solution.function","exercises/03.custom-hooks/01.solution.function",{"_20":87,"_22":88,"_24":89},"03.02.problem","/myapp/workshop-content/exercises/03.custom-hooks/02.problem.callback","exercises/03.custom-hooks/02.problem.callback",{"_20":91,"_22":92,"_24":93},"03.02.solution","/myapp/workshop-content/exercises/03.custom-hooks/02.solution.callback","exercises/03.custom-hooks/02.solution.callback",{"_20":95,"_22":96,"_24":97},"04.01.problem","/myapp/workshop-content/exercises/04.context/01.problem.provider","exercises/04.context/01.problem.provider",{"_20":99,"_22":100,"_24":101},"04.01.solution","/myapp/workshop-content/exercises/04.context/01.solution.provider","exercises/04.context/01.solution.provider",{"_20":103,"_22":104,"_24":105},"04.02.problem","/myapp/workshop-content/exercises/04.context/02.problem.hook","exercises/04.context/02.problem.hook",{"_20":107,"_22":108,"_24":109},"04.02.solution","/myapp/workshop-content/exercises/04.context/02.solution.hook","exercises/04.context/02.solution.hook",{"_20":111,"_22":112,"_24":113},"05.01.problem","/myapp/workshop-content/exercises/05.portals/01.problem.create","exercises/05.portals/01.problem.create",{"_20":115,"_22":116,"_24":117},"05.01.solution","/myapp/workshop-content/exercises/05.portals/01.solution.create","exercises/05.portals/01.solution.create",{"_20":119,"_22":120,"_24":121},"06.01.problem","/myapp/workshop-content/exercises/06.layout-computation/01.problem.layout-effect","exercises/06.layout-computation/01.problem.layout-effect",{"_20":123,"_22":124,"_24":125},"06.01.solution","/myapp/workshop-content/exercises/06.layout-computation/01.solution.layout-effect","exercises/06.layout-computation/01.solution.layout-effect",{"_20":127,"_22":128,"_24":129},"07.01.problem","/myapp/workshop-content/exercises/07.imperative-handle/01.problem.ref","exercises/07.imperative-handle/01.problem.ref",{"_20":131,"_22":132,"_24":133},"07.01.solution","/myapp/workshop-content/exercises/07.imperative-handle/01.solution.ref","exercises/07.imperative-handle/01.solution.ref",{"_20":135,"_22":136,"_24":137},"08.01.problem","/myapp/workshop-content/exercises/08.focus/01.problem.flush-sync","exercises/08.focus/01.problem.flush-sync",{"_20":139,"_22":140,"_24":141},"08.01.solution","/myapp/workshop-content/exercises/08.focus/01.solution.flush-sync","exercises/08.focus/01.solution.flush-sync",{"_20":143,"_22":144,"_24":145},"09.01.problem","/myapp/workshop-content/exercises/09.sync-external/01.problem.sub","exercises/09.sync-external/01.problem.sub",{"_20":147,"_22":148,"_24":149},"09.01.solution","/myapp/workshop-content/exercises/09.sync-external/01.solution.sub","exercises/09.sync-external/01.solution.sub",{"_20":151,"_22":152,"_24":153},"09.02.problem","/myapp/workshop-content/exercises/09.sync-external/02.problem.util","exercises/09.sync-external/02.problem.util",{"_20":155,"_22":156,"_24":157},"09.02.solution","/myapp/workshop-content/exercises/09.sync-external/02.solution.util","exercises/09.sync-external/02.solution.util",{"_20":159,"_22":160,"_24":161},"09.03.problem","/myapp/workshop-content/exercises/09.sync-external/03.problem.ssr","exercises/09.sync-external/03.problem.ssr",{"_20":163,"_22":164,"_24":165},"09.03.solution","/myapp/workshop-content/exercises/09.sync-external/03.solution.ssr","exercises/09.sync-external/03.solution.ssr","repoUpdates",{"_168":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_174":175,"_176":177,"_178":179,"_185":186,"_203":204,"_206":207,"_208":209,"_210":211,"_214":215,"_220":221,"_224":225,"_226":227,"_228":229},"title","Advanced React APIs 🔥","subtitle","Learn the more advanced React APIs and different use cases to enable great user experiences.","instructor",{"_20":180,"_181":182,"_183":184},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","advanced-react-apis","discordChannelId","1285244676286189569","discordTags",[201,202],"1285246046498328627","1285245763428810815","onboardingVideo",[205],"https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/advanced-react-apis","githubRoot","https://github.com/epicweb-dev/advanced-react-apis/tree/main","stackBlitzConfig",{"_212":213},"view","editor","forms",{"_216":217,"_218":219},"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",{"_222":223},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_234":235,"_236":237,"_238":239,"_240":207,"_241":209,"_242":223,"_243":244,"_245":246,"_247":248,"_249":223,"_250":251,"_252":253},"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.40.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","543f2d8cad9cac575698f3b9a9bdb16c4b095ea8e6eb5f8ac8e0fa1964d59249","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_256":257,"_258":259,"_260":261,"_262":263,"_264":263,"_265":266,"_273":274,"_275":276,"_277":225,"_278":223},"protocol","http:","hostname","advanced-apis.epicreact.dev","port","","origin","http://advanced-apis.epicreact.dev","domain","hints",{"_267":268,"_269":270,"_271":272},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/03/finished","session",{"_267":-5},"separator","online","toast","confettiId","presence",{"_283":284},"users",[285,303,312,320,326,333,338,345],{"_7":286,"_287":223,"_288":289,"_290":291,"_20":292,"_293":294},"692eea5a-c75a-4f1f-8de9-b34b85e3d392","hasAccess","imageUrlSmall","https://cdn.discordapp.com/avatars/316066013969907715/6183a2142ad6efe60e4f63c699c1ee5f.png?size=64","imageUrlLarge","https://cdn.discordapp.com/avatars/316066013969907715/6183a2142ad6efe60e4f63c699c1ee5f.png?size=512","Wutthipong Bunyafakpol","location",{"_230":295,"_262":296,"_218":297},"MCP Auth 🔐","http://localhost:5639",{"_9":298,"_299":300,"_301":302},"problem","exerciseNumber",1,"stepNumber",2,{"_7":304,"_287":223,"_288":305,"_290":306,"_20":180,"_293":307},"4ef27e5f-00b4-4aa3-b3c4-4a58ae76f50b","https://cdn.discordapp.com/avatars/105755735731781632/a_1afdce133caaa4d8d17d02c07b0d2b69.gif?size=64","https://cdn.discordapp.com/avatars/105755735731781632/a_1afdce133caaa4d8d17d02c07b0d2b69.gif?size=512",{"_230":308,"_262":296,"_218":309},"React Router RSC 💫",{"_9":310,"_299":300,"_301":311},"solution",5,{"_7":313,"_287":223,"_288":314,"_290":315,"_20":316,"_293":317},"5a56e298-33e3-4133-a535-e4fbcce54b2f","https://cdn.discordapp.com/embed/avatars/3.png?size=64","https://cdn.discordapp.com/embed/avatars/3.png?size=512","tj1892",{"_230":318,"_262":296,"_218":319},"Advanced MCP Features 🐡",{"_9":298,"_299":300,"_301":300},{"_7":321,"_287":223,"_288":322,"_290":323,"_20":324,"_293":325},"4fa240de-adbd-4295-9fb6-85d28f2c7d31","https://avatars.githubusercontent.com/u/77246?v=4&size=64","https://avatars.githubusercontent.com/u/77246?v=4&size=512","Guilherme Carvalho",{"_230":318,"_262":296},{"_7":327,"_287":16,"_288":328,"_290":329,"_20":-5,"_293":330},"102258aa-122f-4fc3-9a1b-cf978800eeef","https://cdn.discordapp.com/avatars/427875504285024267/dc0a0523e8233b348b32f48a10c69571.png?size=64","https://cdn.discordapp.com/avatars/427875504285024267/dc0a0523e8233b348b32f48a10c69571.png?size=512",{"_230":331,"_262":296,"_218":332},"MCP Fundamentals 🧱",{"_9":310,"_299":302,"_301":300},{"_7":334,"_293":335},"x9gw8d7u307pq5ulv865t5tu",{"_230":175,"_262":296,"_218":336},{"_9":310,"_299":300,"_301":337},3,{"_7":339,"_287":223,"_288":340,"_290":341,"_20":-5,"_293":342},"579b4b89-cfd5-4159-940a-b8501d53e542","https://www.gravatar.com/avatar/885d0b420d2e87effb06dc949e221c70?size=64&default=identicon","https://www.gravatar.com/avatar/885d0b420d2e87effb06dc949e221c70?size=512&default=identicon",{"_230":343,"_262":296,"_218":344},"MCP UI 🪟",{"_9":298,"_299":311,"_301":302},{"_7":346,"_293":347},"ibikg4gjcjda7onxdmu367wf",{"_230":175,"_262":263,"_218":348},{"_299":337,"_301":-5,"_9":-5},"routes/_app+/_layout",{"_230":175,"_351":352,"_514":515,"_517":16},"exercises",[353,399,410,427,444,455,466,478,490],{"_299":300,"_174":354,"_355":356,"_371":372,"_379":380},"Advanced State Management","solutions",[357,359,361,363,366,368],{"_301":300,"_174":358,"_20":27},"New state",{"_301":302,"_174":360,"_20":35},"Previous State",{"_301":337,"_174":362,"_20":43},"State Object",{"_301":364,"_174":365,"_20":51},4,"Action Function",{"_301":311,"_174":367,"_20":59},"Traditional Reducer",{"_301":369,"_174":370,"_20":67},6,"Real World","problems",[373,374,375,376,377,378],{"_301":300,"_174":358,"_20":21},{"_301":302,"_174":360,"_20":31},{"_301":337,"_174":362,"_20":39},{"_301":364,"_174":365,"_20":47},{"_301":311,"_174":367,"_20":55},{"_301":369,"_174":370,"_20":63},"steps",[381,384,387,390,393,396],{"_301":300,"_174":358,"_20":21,"_298":382,"_310":383},{"_20":21,"_174":358},{"_20":27,"_174":358},{"_301":302,"_174":360,"_20":31,"_298":385,"_310":386},{"_20":31,"_174":360},{"_20":35,"_174":360},{"_301":337,"_174":362,"_20":39,"_298":388,"_310":389},{"_20":39,"_174":362},{"_20":43,"_174":362},{"_301":364,"_174":365,"_20":47,"_298":391,"_310":392},{"_20":47,"_174":365},{"_20":51,"_174":365},{"_301":311,"_174":367,"_20":55,"_298":394,"_310":395},{"_20":55,"_174":367},{"_20":59,"_174":367},{"_301":369,"_174":370,"_20":63,"_298":397,"_310":398},{"_20":63,"_174":370},{"_20":67,"_174":370},{"_299":302,"_174":400,"_355":401,"_371":404,"_379":406},"State Optimization",[402],{"_301":300,"_174":403,"_20":75},"Optimize state updates",[405],{"_301":300,"_174":403,"_20":71},[407],{"_301":300,"_174":403,"_20":71,"_298":408,"_310":409},{"_20":71,"_174":403},{"_20":75,"_174":403},{"_299":337,"_174":411,"_355":412,"_371":417,"_379":420},"Custom Hooks",[413,415],{"_301":300,"_174":414,"_20":83},"Hook Function",{"_301":302,"_174":416,"_20":91},"useCallback",[418,419],{"_301":300,"_174":414,"_20":79},{"_301":302,"_174":416,"_20":87},[421,424],{"_301":300,"_174":414,"_20":79,"_298":422,"_310":423},{"_20":79,"_174":414},{"_20":83,"_174":414},{"_301":302,"_174":416,"_20":87,"_298":425,"_310":426},{"_20":87,"_174":416},{"_20":91,"_174":416},{"_299":364,"_174":428,"_355":429,"_371":434,"_379":437},"Shared Context",[430,432],{"_301":300,"_174":431,"_20":99},"Context Provider",{"_301":302,"_174":433,"_20":107},"Context Hook",[435,436],{"_301":300,"_174":431,"_20":95},{"_301":302,"_174":433,"_20":103},[438,441],{"_301":300,"_174":431,"_20":95,"_298":439,"_310":440},{"_20":95,"_174":431},{"_20":99,"_174":431},{"_301":302,"_174":433,"_20":103,"_298":442,"_310":443},{"_20":103,"_174":433},{"_20":107,"_174":433},{"_299":311,"_174":445,"_355":446,"_371":449,"_379":451},"Portals",[447],{"_301":300,"_174":448,"_20":115},"createPortal",[450],{"_301":300,"_174":448,"_20":111},[452],{"_301":300,"_174":448,"_20":111,"_298":453,"_310":454},{"_20":111,"_174":448},{"_20":115,"_174":448},{"_299":369,"_174":456,"_355":457,"_371":460,"_379":462},"Layout Computation",[458],{"_301":300,"_174":459,"_20":123},"useLayoutEffect",[461],{"_301":300,"_174":459,"_20":119},[463],{"_301":300,"_174":459,"_20":119,"_298":464,"_310":465},{"_20":119,"_174":459},{"_20":123,"_174":459},{"_299":467,"_174":468,"_355":469,"_371":472,"_379":474},7,"Imperative Handles",[470],{"_301":300,"_174":471,"_20":131},"useImperativeHandle",[473],{"_301":300,"_174":471,"_20":127},[475],{"_301":300,"_174":471,"_20":127,"_298":476,"_310":477},{"_20":127,"_174":471},{"_20":131,"_174":471},{"_299":479,"_174":480,"_355":481,"_371":484,"_379":486},8,"Focus Management",[482],{"_301":300,"_174":483,"_20":139},"flushSync",[485],{"_301":300,"_174":483,"_20":135},[487],{"_301":300,"_174":483,"_20":135,"_298":488,"_310":489},{"_20":135,"_174":483},{"_20":139,"_174":483},{"_299":491,"_174":492,"_355":493,"_371":500,"_379":504},9,"Sync External State",[494,496,498],{"_301":300,"_174":495,"_20":147},"useSyncExternalStore",{"_301":302,"_174":497,"_20":155},"Make Store Utility",{"_301":337,"_174":499,"_20":163},"Handling Server Rendering",[501,502,503],{"_301":300,"_174":495,"_20":143},{"_301":302,"_174":497,"_20":151},{"_301":337,"_174":499,"_20":159},[505,508,511],{"_301":300,"_174":495,"_20":143,"_298":506,"_310":507},{"_20":143,"_174":495},{"_20":147,"_174":495},{"_301":302,"_174":497,"_20":151,"_298":509,"_310":510},{"_20":151,"_174":497},{"_20":155,"_174":497},{"_301":337,"_174":499,"_20":159,"_298":512,"_310":513},{"_20":159,"_174":499},{"_20":163,"_174":499},"playground",{"_516":-5,"_299":-2,"_301":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_520":521,"_230":175,"_218":522,"_616":617,"_618":619,"_620":621,"_625":626,"_631":632},"articleId","workshop-advanced-react-apis-3-finished",{"_22":523,"_299":337,"_524":525,"_174":411,"_526":527,"_528":529,"_530":531,"_533":534,"_379":536,"_371":594,"_355":605},"/myapp/workshop-content/exercises/03.custom-hooks","dirName","03.custom-hooks","instructionsCode","var Component=(()=>{var b=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var l in e)r(n,l,{get:e[l],enumerable:!0})},o=(n,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of y(e))!u.call(n,s)&&s!==l&&r(n,s,{get:()=>e[s],enumerable:!(c=p(e,s))||c.enumerable});return n};var g=(n,e,l)=>(l=n!=null?b(v(n)):{},o(e||!n||!n.__esModule?r(l,\"default\",{value:n,enumerable:!0}):l,n)),f=n=>o(r({},\"__esModule\",{value:!0}),n);var i=m((C,t)=>{t.exports=_jsx_runtime});var D={};k(D,{default:()=>h,frontmatter:()=>E});var a=g(i()),E=void 0;function d(n){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",h1:\"h1\",h3:\"h3\",p:\"p\",pre:\"pre\",span:\"span\",...n.components},{EpicVideo:l}=e;return l||N(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Custom Hooks\"}),`\n`,(0,a.jsx)(l,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-custom-hooks\"}),`\n`,(0,a.jsxs)(e.blockquote,{children:[`\n`,(0,a.jsx)(e.p,{children:(0,a.jsx)(e.a,{href:\"https://twitter.com/kentcdodds/status/1763633880349987151\",children:\"Custom hooks are functions that use other hooks.\"})}),`\n`]}),`\n`,(0,a.jsx)(e.p,{children:\"That's it. That's the entire idea behind custom hooks. So...\"}),`\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(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCount\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setCount\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"increment\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" () \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCount\"}),\"((\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Counter\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" } \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCount\"}),\"()\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"button\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onClick\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"The \",(0,a.jsx)(e.code,{children:\"useCount\"}),\" function is a custom hook. The \",(0,a.jsx)(e.code,{children:\"use\"}),` prefix is a convention to\nindicate that this function is a hook and has to follow all of the\n`,(0,a.jsx)(e.a,{href:\"https://react.dev/warnings/invalid-hook-call-warning\",children:\"rules of hooks\"})]}),`\n`,(0,a.jsx)(e.p,{children:`Custom hooks are fantastic because they allow you to encapsulate complex logic\nand share that logic between components.`}),`\n`,(0,a.jsxs)(e.p,{children:[`However, all abstraction has a cost, and that's true of custom hooks as well.\nIn particular, if you have a utility function you want to share and people call\nthat function within a `,(0,a.jsx)(e.code,{children:\"useEffect\"}),` or other hook which has a dependency array\nyou suddenly need to start worrying about identity and referential equality.`]}),`\n`,(0,a.jsxs)(e.p,{children:[\"For example, consider our \",(0,a.jsx)(e.code,{children:\"increment\"}),\" function from the \",(0,a.jsx)(e.code,{children:\"useCount\"}),` hook. Let's\npretend we're going to use it in a `,(0,a.jsx)(e.code,{children:\"useEffect\"}),\":\"]}),`\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(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Counter\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" } \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCount\"}),\"()\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"React\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useEffect\"}),\"(() \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// set up a timer to increment the count every second or something...\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setInterval\"}),\"(() \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"increment\"}),\"()\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t}, \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1000\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" () \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"clearInterval\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t}, [\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\"]) \",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// <-- we need to include increment in the dependency list\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"The problem with this is that \",(0,a.jsx)(e.code,{children:\"increment\"}),` is a new function every render as we\ncurrently have it defined. So every re-render of `,(0,a.jsx)(e.code,{children:\"Counter\"}),` will cause the\n`,(0,a.jsx)(e.code,{children:\"useEffect\"}),` cleanup to be run clearing the interval and setting up a new one.\nThis is not what we want. So we have to make sure that the `,(0,a.jsx)(e.code,{children:\"increment\"}),` function\nnever changes. We can do that with the `,(0,a.jsx)(e.code,{children:\"useCallback\"}),\" hook.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"Before we get into \",(0,a.jsx)(e.code,{children:\"useCallback\"}),\", let's talk about memoization in general.\"]}),`\n`,(0,a.jsx)(e.h3,{children:\"Memoization in general\"}),`\n`,(0,a.jsx)(e.p,{children:`Memoization: a performance optimization technique which eliminates the need to\nrecompute a value for a given input by storing the original computation and\nreturning that stored value when the same input is provided. Memoization is a\nform of caching. Here's a simple implementation of memoization:`}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",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(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"values\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" {}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"addOne\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"num\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"number\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"values\"}),\"[\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"num\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"undefined\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"values\"}),\"[\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"num\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"num\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// <-- here's the computation\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"values\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"[\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"num]\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:\"One other aspect of memoization is value referential equality. For example:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",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(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dog1\"}),\" \",(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:\"Dog\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"sam\"}),\"'\",\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dog2\"}),\" \",(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:\"Dog\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"sam\"}),\"'\",\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"console\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"log\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dog1\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dog2\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// false\"}),`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`Even though those two dogs have the same name, they are not the same. However,\nwe can use memoization to get the same dog:`}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",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(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dogs\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" {}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getDog\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dogs\"}),\"[\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"undefined\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dogs\"}),\"[\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\"] \",(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:\"Dog\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dogs\"}),\"[\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\"]\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dog1\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getDog\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"sam\"}),\"'\",\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dog2\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getDog\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"sam\"}),\"'\",\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"console\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"log\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dog1\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"dog2\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// true\"}),`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`You might have noticed that our memoization examples look very similar.\nMemoization is something you can implement as a generic abstraction:`}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",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(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"memoize\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ArgType\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ReturnValue\"}),\">(\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"cb\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"arg\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ArgType\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ReturnValue\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"cache\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Record\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ArgType\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ReturnValue\"}),\"> \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" {}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"memoized\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"arg\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ArgType\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"cache\"}),\"[\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"arg\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"undefined\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"cache\"}),\"[\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"arg\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"cb\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"arg\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"cache\"}),\"[\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"arg\"}),\"]\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"addOne\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"memoize\"}),\"((\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"num\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"number\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"num\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"getDog\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"memoize\"}),\"((\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"new\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Dog\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\"))\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`Our abstraction only supports one argument, if you want to make it work for any\ntype/number of arguments, knock yourself out.`}),`\n`,(0,a.jsx)(e.h3,{children:\"Memoization in React\"}),`\n`,(0,a.jsxs)(e.p,{children:[`Luckily, in React we don't have to implement a memoization abstraction. They\nmade two for us! `,(0,a.jsx)(e.code,{children:\"useMemo\"}),\" and \",(0,a.jsx)(e.code,{children:\"useCallback\"}),`. For more on this read:\n`,(0,a.jsx)(e.a,{href:\"https://epicreact.dev/memoization-and-react\",children:\"Memoization and React\"}),\".\"]}),`\n`,(0,a.jsx)(e.p,{children:\"So, going back to our earlier example, here's how you solve the problem:\"}),`\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(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCount\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setCount\"}),\"] \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"0\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-highlight\":\"true\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCallback\"}),\"(() \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCount\"}),\"((\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\"), [])\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Counter\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" } \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCount\"}),\"()\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useEffect\"}),\"(() \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setInterval\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1000\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" () \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"clearInterval\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"id\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t}, [\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\"])\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`What that does is we pass React a function and React gives that same function\nback to us... Sounds kinda useless right? Imagine:`}),`\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(--base03)\"},children:\"// this is not how React actually implements this function. We're just imagining!\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCallback\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"callback\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"callback\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`Uhhh... But there's a catch! On subsequent renders, if the elements in the\ndependency list are unchanged, instead of giving the same function back that we\ngive to it, React will give us the same function it gave us last time. So\nimagine:`}),`\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(--base03)\"},children:\"// this is not how React actually implements this function. We're just imagining!\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"let\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"lastCallback\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCallback\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"callback\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"deps\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"if\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"depsChanged\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"deps\"}),\")) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"lastCallback\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"callback\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"callback\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t} \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"else\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"lastCallback\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"So while we still create a new function every render (to pass to \",(0,a.jsx)(e.code,{children:\"useCallback\"}),`),\nReact only gives us the new one if the dependency list changes.`]}),`\n`,(0,a.jsxs)(e.p,{children:[\"In this exercise, we're going to be using \",(0,a.jsx)(e.code,{children:\"useCallback\"}),\", but \",(0,a.jsx)(e.code,{children:\"useCallback\"}),` is\njust a shortcut to using `,(0,a.jsx)(e.code,{children:\"useMemo\"}),\" for functions:\"]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",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(--base03)\"},children:\"// the useMemo version:\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useMemo\"}),\"(() \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" () \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCount\"}),\"((\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\"), [])\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// the useCallback version\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"increment\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useCallback\"}),\"(() \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setCount\"}),\"((\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"+\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),\"), [])\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"One other thing to note is that \",(0,a.jsx)(e.code,{children:\"useCallback\"}),\" and \",(0,a.jsx)(e.code,{children:\"useMemo\"}),` also have dependency\narray and it functions the same way as the dependency array in `,(0,a.jsx)(e.code,{children:\"useEffect\"}),`. If\nyou don't include all the dependencies, you'll have bugs. And if the things you\ninclude in the dependency array are not stable, then it'll undo the stability\nof the memoization as well. This is how dependency arrays can spider out into\neverything you do which is one reason why it's handy to avoid abstracting early.`]}),`\n`,(0,a.jsxs)(e.p,{children:[`There's a strategy to help you avoid dependency arrays talked about in\n`,(0,a.jsxs)(e.a,{href:\"https://epicreact.dev/myths-about-useeffect\",children:[\"Myths about \",(0,a.jsx)(e.code,{children:\"useEffect\"})]}),`.\nAdditionally, there's a pattern you can use to help reduce the issue (with its\nown set of trade-offs) which we'll explore in the React Patterns workshop.`]}),`\n`,(0,a.jsxs)(e.p,{children:[\"\\u{1F989} Better understand memoization by diving deep on caching with my talk \",(0,a.jsx)(e.a,{href:\"https://www.epicweb.dev/talks/caching-for-cash\",children:\"Caching for Cash\"}),\".\"]}),`\n`,(0,a.jsxs)(e.p,{children:[`\\u{1F989} A common question with this is: \"Why don't we just wrap every function in\n`,(0,a.jsx)(e.code,{children:\"useCallback\"}),`?\" You can read about this in my blog post\n`,(0,a.jsx)(e.a,{href:\"https://kentcdodds.com/blog/usememo-and-usecallback\",children:\"When to useMemo and useCallback\"}),\".\"]}),`\n`,(0,a.jsxs)(e.p,{children:[`\\u{1F989} And if the concept of a \"closure\" is new or confusing to you, then\n`,(0,a.jsx)(e.a,{href:\"https://mdn.io/closure\",children:\"give this a read\"}),`. (Closures are one of the reasons\nit's important to keep dependency lists correct.)`]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function N(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return f(D);})();\n;return Component;","finishedCode","var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),b=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},i=(t,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!k.call(t,r)&&r!==n&&c(t,r,{get:()=>e[r],enumerable:!(s=l(e,r))||s.enumerable});return t};var j=(t,e,n)=>(n=t!=null?p(f(t)):{},i(e||!t||!t.__esModule?c(n,\"default\",{value:t,enumerable:!0}):n,t)),w=t=>i(c({},\"__esModule\",{value:!0}),t);var a=x((v,d)=>{d.exports=_jsx_runtime});var g={};b(g,{default:()=>u,frontmatter:()=>_});var o=j(a()),_=void 0;function h(t){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||y(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Custom Hooks\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-custom-hooks\"}),`\n`,(0,o.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great job!\"}),`\n`,(0,o.jsx)(e.p,{children:\"\\u{1F989} Remember,\"}),`\n`,(0,o.jsxs)(e.blockquote,{children:[`\n`,(0,o.jsx)(e.p,{children:(0,o.jsx)(e.a,{href:\"https://twitter.com/kentcdodds/status/1763633880349987151\",children:\"Custom hooks are functions that use other hooks.\"})}),`\n`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"That's the only technical requirement. The \",(0,o.jsx)(e.code,{children:\"use\"}),` prefix is a useful convention,\nbut they're just functions.`]})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(h,{...t})}):h(t)}function y(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(g);})();\n;return Component;","instructionsEpicVideoEmbeds",[532],"https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-custom-hooks","finishedEpicVideoEmbeds",[535],"https://www.epicreact.dev/workshops/advanced-react-apis/dad-joke-break-custom-hooks",[537,570],{"_301":300,"_298":538,"_310":558},{"_20":79,"_174":414,"_524":539,"_22":80,"_24":81,"_526":540,"_541":542,"_544":545,"_552":553,"_555":556,"_299":337,"_301":300,"_9":298,"_557":83},"01.problem.function","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(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))!y.call(t,o)&&o!==a&&r(t,o,{get:()=>e[o],enumerable:!(s=u(e,o))||s.enumerable});return t};var w=(t,e,a)=>(a=t!=null?p(f(t)):{},c(e||!t||!t.__esModule?r(a,\"default\",{value:t,enumerable:!0}):a,t)),k=t=>c(r({},\"__esModule\",{value:!0}),t);var l=b((S,i)=>{i.exports=_jsx_runtime});var j={};g(j,{default:()=>d,frontmatter:()=>x});var n=w(l()),x=void 0;function h(t){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...t.components},{EpicVideo:a}=e;return a||v(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Hook Function\"}),`\n`,(0,n.jsx)(a,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/hook-function\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} We now want to create a reusable \",(0,n.jsx)(e.code,{children:\"useSearchParams\"}),` function which will handle\nthe search params for us generally so we can use that logic in other components.`]}),`\n`,(0,n.jsx)(\"callout-info\",{children:(0,n.jsxs)(e.p,{children:[`There's a much more complete version of this hook as a part of\n`,(0,n.jsx)(e.a,{href:\"https://reactrouter.com/en/main/hooks/use-search-params\",children:\"react-router\"}),` which\nyou'll likely want to use in a real application. This is just a simple\nexample.`]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"So your job is to take the logic from the \",(0,n.jsx)(e.code,{children:\"App\"}),` component that relates to the\nsearch params and put it in a new function called `,(0,n.jsx)(e.code,{children:\"useSearchParams\"}),`, then you'll\nuse that function in the `,(0,n.jsx)(e.code,{children:\"App\"}),\" component.\"]}),`\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:\"searchParams\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setSearchParams\"}),\"] \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useSearchParams\"}),\"()\",`\n`]})})}),`\n`,(0,n.jsxs)(e.p,{children:[`For the types of that tuple, you may find this article helpful:\n`,(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/wrapping-react-use-state-with-type-script\",children:\"Wrapping React.useState with TypeScript\"})]}),`\n`,(0,n.jsx)(\"callout-info\",{class:\"aside\",children:(0,n.jsxs)(e.p,{children:[`There are actually not a lot of lines changed in this step of the exercise,\nbut we're going to be bringing in `,(0,n.jsx)(e.code,{children:\"useCallback\"}),` in the next step so keep\ngoing!`]})}),`\n`,(0,n.jsx)(\"callout-info\",{class:\"aside\",children:(0,n.jsx)(e.p,{children:`\\u{1F6A8} this is just a refactor so the tests are passing already, you just need to\nmake sure they don't fail!`})}),`\n`,(0,n.jsx)(e.p,{children:\"Good luck!\"})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(h,{...t})}):h(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 k(j);})();\n;return Component;","epicVideoEmbeds",[543],"https://www.epicreact.dev/workshops/advanced-react-apis/hook-function","test",{"_9":546,"_547":548,"_549":550},"browser","pathname","/app/03.01.problem/test/","testFiles",[551],"search-params.test.ts","dev",{"_9":546,"_547":554},"/app/03.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/03.custom-hooks/01.problem.function?view=editor&title=Hook+Function+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":83,"_174":414,"_524":559,"_22":84,"_24":85,"_526":560,"_541":561,"_544":563,"_552":566,"_555":568,"_299":337,"_301":300,"_9":310,"_569":-5},"01.solution.function","var Component=(()=>{var m=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var _=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),j=(e,o)=>{for(var t in o)c(e,t,{get:o[t],enumerable:!0})},s=(e,o,t,i)=>{if(o&&typeof o==\"object\"||typeof o==\"function\")for(let r of h(o))!l.call(e,r)&&r!==t&&c(e,r,{get:()=>o[r],enumerable:!(i=f(o,r))||i.enumerable});return e};var w=(e,o,t)=>(t=e!=null?m(x(e)):{},s(o||!e||!e.__esModule?c(t,\"default\",{value:e,enumerable:!0}):t,e)),k=e=>s(c({},\"__esModule\",{value:!0}),e);var d=_((b,a)=>{a.exports=_jsx_runtime});var E={};j(E,{default:()=>u,frontmatter:()=>g});var n=w(d()),g=void 0;function p(e){let o={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:t}=o;return t||v(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.h1,{children:\"Hook Function\"}),`\n`,(0,n.jsx)(t,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/hook-function/solution\"}),`\n`,(0,n.jsx)(o.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great job! You've made a custom hook!\"})]})}function u(e={}){let{wrapper:o}=e.components||{};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}function v(e,o){throw new Error(\"Expected \"+(o?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(E);})();\n;return Component;",[562],"https://www.epicreact.dev/workshops/advanced-react-apis/hook-function/solution",{"_9":546,"_547":564,"_549":565},"/app/03.01.solution/test/",[551],{"_9":546,"_547":567},"/app/03.01.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/03.custom-hooks/01.solution.function?view=editor&title=Hook+Function+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_301":302,"_298":571,"_310":583},{"_20":87,"_174":416,"_524":572,"_22":88,"_24":89,"_526":573,"_541":574,"_544":576,"_552":580,"_555":582,"_299":337,"_301":302,"_9":298,"_557":91},"02.problem.callback","var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var r in e)o(a,r,{get:e[r],enumerable:!0})},l=(a,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of b(e))!y.call(a,s)&&s!==r&&o(a,s,{get:()=>e[s],enumerable:!(c=m(e,s))||c.enumerable});return a};var k=(a,e,r)=>(r=a!=null?p(u(a)):{},l(e||!a||!a.__esModule?o(r,\"default\",{value:a,enumerable:!0}):r,a)),w=a=>l(o({},\"__esModule\",{value:!0}),a);var i=v((C,t)=>{t.exports=_jsx_runtime});var _={};f(_,{default:()=>h,frontmatter:()=>x});var n=k(i()),x=void 0;function d(a){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components},{EpicVideo:r}=e;return r||E(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"useCallback\"}),`\n`,(0,n.jsx)(r,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/usecallback\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} We only call the \",(0,n.jsx)(e.code,{children:\"setSearchParams\"}),` function inside event handlers, so we\ndon't have any problems, but we're making a reusable hook and we want to make\ncertain people don't have problems if they need to use it in a `,(0,n.jsx)(e.code,{children:\"useEffect\"}),` or\nother hook that requires a dependency array. For 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(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"searchParams\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setSearchParams\"}),\"] \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useSearchParams\"}),\"()\",`\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:\"useEffect\"}),\"(() \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},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:\"if\"}),\" (\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"someCondition\"}),\") {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"setSearchParams\"}),\"({ foo: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"bar\"}),\"'\",\" })\",`\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:[\"}, [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setSearchParams\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"someCondition\"}),\"])\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"So I want you to wrap our \",(0,n.jsx)(e.code,{children:\"setSearchParams\"}),\" function in \",(0,n.jsx)(e.code,{children:\"useCallback\"}),` to memoize\nit and avoid issues with the dependency array.`]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function E(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(_);})();\n;return Component;",[575],"https://www.epicreact.dev/workshops/advanced-react-apis/usecallback",{"_9":546,"_547":577,"_549":578},"/app/03.02.problem/test/",[579,551],"callback.test.tsx",{"_9":546,"_547":581},"/app/03.02.problem/","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/03.custom-hooks/02.problem.callback?view=editor&title=useCallback+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":91,"_174":416,"_524":584,"_22":92,"_24":93,"_526":585,"_541":586,"_544":588,"_552":591,"_555":593,"_299":337,"_301":302,"_9":310,"_569":-5},"02.solution.callback","var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},s=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of m(t))!w.call(e,r)&&r!==o&&a(e,r,{get:()=>t[r],enumerable:!(c=l(t,r))||c.enumerable});return e};var j=(e,t,o)=>(o=e!=null?h(f(e)):{},s(t||!e||!e.__esModule?a(o,\"default\",{value:e,enumerable:!0}):o,e)),b=e=>s(a({},\"__esModule\",{value:!0}),e);var d=x((E,i)=>{i.exports=_jsx_runtime});var y={};_(y,{default:()=>u,frontmatter:()=>g});var n=j(d()),g=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"useCallback\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/advanced-react-apis/usecallback/solution\"}),`\n`,(0,n.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great job! Now we have a pretty good reusable hook for anyone who wants to\ncontrol the search params!`})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.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(y);})();\n;return Component;",[587],"https://www.epicreact.dev/workshops/advanced-react-apis/usecallback/solution",{"_9":546,"_547":589,"_549":590},"/app/03.02.solution/test/",[579,551],{"_9":546,"_547":592},"/app/03.02.solution/","https://stackblitz.com/github/epicweb-dev/advanced-react-apis/tree/main/exercises/03.custom-hooks/02.solution.callback?view=editor&title=useCallback+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[595,600],{"_20":79,"_174":414,"_524":539,"_22":80,"_24":81,"_526":540,"_541":596,"_544":597,"_552":599,"_555":556,"_299":337,"_301":300,"_9":298,"_557":83},[543],{"_9":546,"_547":548,"_549":598},[551],{"_9":546,"_547":554},{"_20":87,"_174":416,"_524":572,"_22":88,"_24":89,"_526":573,"_541":601,"_544":602,"_552":604,"_555":582,"_299":337,"_301":302,"_9":298,"_557":91},[575],{"_9":546,"_547":577,"_549":603},[579,551],{"_9":546,"_547":581},[606,611],{"_20":83,"_174":414,"_524":559,"_22":84,"_24":85,"_526":560,"_541":607,"_544":608,"_552":610,"_555":568,"_299":337,"_301":300,"_9":310,"_569":-5},[562],{"_9":546,"_547":564,"_549":609},[551],{"_9":546,"_547":567},{"_20":91,"_174":416,"_524":584,"_22":92,"_24":93,"_526":585,"_541":612,"_544":613,"_552":615,"_555":593,"_299":337,"_301":302,"_9":310,"_569":-5},[587],{"_9":546,"_547":589,"_549":614},[579,551],{"_9":546,"_547":592},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=Advanced%20React%20APIs%20%F0%9F%94%A5&entry.428900931=Custom%20Hooks","epicVideoInfosPromise",["P",619],"exerciseFinished",{"_622":623,"_24":624},"file","/myapp/workshop-content/exercises/03.custom-hooks/FINISHED.mdx","exercises/03.custom-hooks/FINISHED.mdx","prevStepLink",{"_627":628,"_629":630},"to","/exercise/03/02/solution","aria-label","useCallback (solution)","nextStepLink",{"_627":633,"_629":428},"/exercise/04","actionData","errors"]

03. Custom Hooks/Elaboration