[{"_1":2,"_683":-5,"_684":-5},"loaderData",{"_3":4,"_393":394,"_554":555},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_178":179,"_181":182,"_183":16,"_184":185,"_242":187,"_243":189,"_190":191,"_244":245,"_266":267,"_291":-5,"_292":-5,"_293":294},"userId",{"_7":8,"_9":10},"id","pj16mw2tf44f2pnrnht8fy8o","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,166,170,174],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.elements/01.problem.reuse","relativePath","exercises/01.elements/01.problem.reuse",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.elements/01.solution.reuse","exercises/01.elements/01.solution.reuse",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.elements/02.problem.props","exercises/01.elements/02.problem.props",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.elements/02.solution.props","exercises/01.elements/02.solution.props",{"_20":39,"_22":40,"_24":41},"01.03.problem","/myapp/workshop-content/exercises/01.elements/03.problem.context","exercises/01.elements/03.problem.context",{"_20":43,"_22":44,"_24":45},"01.03.solution","/myapp/workshop-content/exercises/01.elements/03.solution.context","exercises/01.elements/03.solution.context",{"_20":47,"_22":48,"_24":49},"01.04.problem","/myapp/workshop-content/exercises/01.elements/04.problem.use-memo","exercises/01.elements/04.problem.use-memo",{"_20":51,"_22":52,"_24":53},"01.04.solution","/myapp/workshop-content/exercises/01.elements/04.solution.use-memo","exercises/01.elements/04.solution.use-memo",{"_20":55,"_22":56,"_24":57},"01.05.problem","/myapp/workshop-content/exercises/01.elements/05.problem.memo","exercises/01.elements/05.problem.memo",{"_20":59,"_22":60,"_24":61},"01.05.solution","/myapp/workshop-content/exercises/01.elements/05.solution.memo","exercises/01.elements/05.solution.memo",{"_20":63,"_22":64,"_24":65},"02.01.problem","/myapp/workshop-content/exercises/02.context/01.problem.memo-context","exercises/02.context/01.problem.memo-context",{"_20":67,"_22":68,"_24":69},"02.01.solution","/myapp/workshop-content/exercises/02.context/01.solution.memo-context","exercises/02.context/01.solution.memo-context",{"_20":71,"_22":72,"_24":73},"02.02.problem","/myapp/workshop-content/exercises/02.context/02.problem.provider-component","exercises/02.context/02.problem.provider-component",{"_20":75,"_22":76,"_24":77},"02.02.solution","/myapp/workshop-content/exercises/02.context/02.solution.provider-component","exercises/02.context/02.solution.provider-component",{"_20":79,"_22":80,"_24":81},"02.03.problem","/myapp/workshop-content/exercises/02.context/03.problem.split-context","exercises/02.context/03.problem.split-context",{"_20":83,"_22":84,"_24":85},"02.03.solution","/myapp/workshop-content/exercises/02.context/03.solution.split-context","exercises/02.context/03.solution.split-context",{"_20":87,"_22":88,"_24":89},"03.01.problem","/myapp/workshop-content/exercises/03.concurrent-rendering/01.problem.deferred","exercises/03.concurrent-rendering/01.problem.deferred",{"_20":91,"_22":92,"_24":93},"03.01.solution","/myapp/workshop-content/exercises/03.concurrent-rendering/01.solution.deferred","exercises/03.concurrent-rendering/01.solution.deferred",{"_20":95,"_22":96,"_24":97},"04.01.problem","/myapp/workshop-content/exercises/04.code-splitting/01.problem.lazy","exercises/04.code-splitting/01.problem.lazy",{"_20":99,"_22":100,"_24":101},"04.01.solution","/myapp/workshop-content/exercises/04.code-splitting/01.solution.lazy","exercises/04.code-splitting/01.solution.lazy",{"_20":103,"_22":104,"_24":105},"04.02.problem","/myapp/workshop-content/exercises/04.code-splitting/02.problem.eager","exercises/04.code-splitting/02.problem.eager",{"_20":107,"_22":108,"_24":109},"04.02.solution","/myapp/workshop-content/exercises/04.code-splitting/02.solution.eager","exercises/04.code-splitting/02.solution.eager",{"_20":111,"_22":112,"_24":113},"04.03.problem","/myapp/workshop-content/exercises/04.code-splitting/03.problem.transition","exercises/04.code-splitting/03.problem.transition",{"_20":115,"_22":116,"_24":117},"04.03.solution","/myapp/workshop-content/exercises/04.code-splitting/03.solution.transition","exercises/04.code-splitting/03.solution.transition",{"_20":119,"_22":120,"_24":121},"05.01.problem","/myapp/workshop-content/exercises/05.calculations/01.problem.use-memo","exercises/05.calculations/01.problem.use-memo",{"_20":123,"_22":124,"_24":125},"05.01.solution","/myapp/workshop-content/exercises/05.calculations/01.solution.use-memo","exercises/05.calculations/01.solution.use-memo",{"_20":127,"_22":128,"_24":129},"05.02.problem","/myapp/workshop-content/exercises/05.calculations/02.problem.worker","exercises/05.calculations/02.problem.worker",{"_20":131,"_22":132,"_24":133},"05.02.solution","/myapp/workshop-content/exercises/05.calculations/02.solution.worker","exercises/05.calculations/02.solution.worker",{"_20":135,"_22":136,"_24":137},"05.03.problem","/myapp/workshop-content/exercises/05.calculations/03.problem.async","exercises/05.calculations/03.problem.async",{"_20":139,"_22":140,"_24":141},"05.03.solution","/myapp/workshop-content/exercises/05.calculations/03.solution.async","exercises/05.calculations/03.solution.async",{"_20":143,"_22":144,"_24":145},"06.01.problem","/myapp/workshop-content/exercises/06.rerenders/01.problem.memo","exercises/06.rerenders/01.problem.memo",{"_20":147,"_22":148,"_24":149},"06.01.solution","/myapp/workshop-content/exercises/06.rerenders/01.solution.memo","exercises/06.rerenders/01.solution.memo",{"_20":151,"_22":152,"_24":153},"06.02.problem","/myapp/workshop-content/exercises/06.rerenders/02.problem.comparator","exercises/06.rerenders/02.problem.comparator",{"_20":155,"_22":156,"_24":157},"06.02.solution","/myapp/workshop-content/exercises/06.rerenders/02.solution.comparator","exercises/06.rerenders/02.solution.comparator",{"_20":159,"_22":160,"_24":161},"06.03.problem","/myapp/workshop-content/exercises/06.rerenders/03.problem.primitives","exercises/06.rerenders/03.problem.primitives",{"_20":163,"_22":164,"_24":165},"06.03.solution","/myapp/workshop-content/exercises/06.rerenders/03.solution.primitives","exercises/06.rerenders/03.solution.primitives",{"_20":167,"_22":168,"_24":169},"07.01.problem","/myapp/workshop-content/exercises/07.windowing/01.problem.virtualizer","exercises/07.windowing/01.problem.virtualizer",{"_20":171,"_22":172,"_24":173},"07.01.solution","/myapp/workshop-content/exercises/07.windowing/01.solution.virtualizer","exercises/07.windowing/01.solution.virtualizer",{"_20":175,"_22":176,"_24":177},"example.unnecessary-rerenders","/myapp/workshop-content/examples/unnecessary-rerenders","examples/unnecessary-rerenders","repoUpdates",{"_180":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_186":187,"_188":189,"_190":191,"_197":198,"_215":216,"_218":219,"_220":221,"_222":223,"_226":227,"_232":233,"_236":237,"_238":239,"_240":241},"title","React Performance ⚡","subtitle","React is fast, until it isn't. Let's make your React app fast.","instructor",{"_20":192,"_193":194,"_195":196},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-performance","discordChannelId","1285244676286189569","discordTags",[213,214],"1285246046498328627","1285245910070071437","onboardingVideo",[217],"https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/react-performance","githubRoot","https://github.com/epicweb-dev/react-performance/tree/main","stackBlitzConfig",{"_224":225},"view","editor","forms",{"_228":229,"_230":231},"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",{"_234":235},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_246":247,"_248":249,"_250":251,"_252":219,"_253":221,"_254":235,"_255":256,"_257":258,"_259":260,"_261":235,"_262":263,"_264":265},"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","e9b89368f19ca821ea499377d21d7dba1577cd8e52f646f9b4afe1380e3a5eb4","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_268":269,"_270":271,"_272":273,"_274":275,"_276":275,"_277":278,"_285":286,"_287":288,"_289":237,"_290":235},"protocol","http:","hostname","performance.epicreact.dev","port","","origin","http://performance.epicreact.dev","domain","hints",{"_279":280,"_281":282,"_283":284},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/06/finished","session",{"_279":-5},"separator","online","toast","confettiId","presence",{"_295":296},"users",[297,314,323,332,340,347,356,363,371,377,383,388],{"_7":298,"_299":16,"_300":301,"_302":303,"_20":304,"_305":306},"104bc35a-f87b-449c-90f5-04a6a6f5d67c","hasAccess","imageUrlSmall","https://avatars.githubusercontent.com/u/28957748?v=4&size=64","imageUrlLarge","https://avatars.githubusercontent.com/u/28957748?v=4&size=512","Thanh Nguyen","location",{"_242":307,"_274":308,"_230":309},"Advanced MCP Features 🐡","http://localhost:5639",{"_9":310,"_311":312,"_313":312},"problem","exerciseNumber",1,"stepNumber",{"_7":315,"_299":235,"_300":316,"_302":317,"_20":318,"_305":319},"7fa7ad76-0a3e-4415-b855-a8b34a19b674","https://www.gravatar.com/avatar/b7c21b54f9f99de2291067d50f59dad8?size=64&default=identicon","https://www.gravatar.com/avatar/b7c21b54f9f99de2291067d50f59dad8?size=512&default=identicon","Mohamed Amir ghezala",{"_242":320,"_274":308,"_230":321},"Web Authentication 🔐",{"_9":310,"_311":322,"_313":312},2,{"_7":324,"_299":235,"_300":325,"_302":326,"_20":327,"_305":328},"70078aa1-7b41-40f4-9930-79013303627b","https://avatars.githubusercontent.com/u/4356894?v=4&size=64","https://avatars.githubusercontent.com/u/4356894?v=4&size=512","Thor Anderson",{"_242":329,"_274":308,"_230":330},"MCP Fundamentals 🧱",{"_9":310,"_311":322,"_313":331},3,{"_7":333,"_299":235,"_300":334,"_302":335,"_20":336,"_305":337},"b3a47ad0-7c04-42be-8067-dfb308cc3d24","https://www.gravatar.com/avatar/19bd33f2b37cf3af0b977c40bb0b8ea6?size=64&default=identicon","https://www.gravatar.com/avatar/19bd33f2b37cf3af0b977c40bb0b8ea6?size=512&default=identicon","MARIO ALFREDO JORGE",{"_242":338,"_274":308,"_230":339},"React Hooks 🎣",{"_311":322},{"_7":341,"_299":235,"_300":342,"_302":343,"_20":344,"_305":345},"c99fa51f-d2e2-4545-b14e-ac592bf273bf","https://cdn.discordapp.com/avatars/465583985615962122/a919b960077247ac33d7a00c082bfd7b.png?size=64","https://cdn.discordapp.com/avatars/465583985615962122/a919b960077247ac33d7a00c082bfd7b.png?size=512","Nir",{"_242":329,"_274":308,"_230":346},{"_311":331},{"_7":348,"_299":235,"_300":349,"_302":350,"_20":351,"_305":352},"3c44df8f-cd2a-44e2-8ebc-f47fdfb890b2","https://www.gravatar.com/avatar/f3058659902bb50dc09708f5e3e72d86?size=64&default=identicon","https://www.gravatar.com/avatar/f3058659902bb50dc09708f5e3e72d86?size=512&default=identicon","Wyatt",{"_242":329,"_274":308,"_230":353},{"_9":354,"_311":355,"_313":312},"solution",5,{"_7":357,"_299":235,"_300":358,"_302":359,"_20":360,"_305":361},"8414cfa5-7b49-4e55-a96a-086fa37d18a2","https://cdn.discordapp.com/avatars/707707018487791726/a3aebe42238f1fe0f37d1138dff3f3c2.png?size=64","https://cdn.discordapp.com/avatars/707707018487791726/a3aebe42238f1fe0f37d1138dff3f3c2.png?size=512","Brandon",{"_242":362,"_274":308},"MCP Auth 🔐",{"_7":364,"_299":16,"_300":365,"_302":366,"_20":-5,"_305":367},"354f7afc-146f-4229-907e-5ba35202de8a","https://www.gravatar.com/avatar/e7f57254f66d4ae1eed1d5c6a852c76b?size=64&default=identicon","https://www.gravatar.com/avatar/e7f57254f66d4ae1eed1d5c6a852c76b?size=512&default=identicon",{"_242":368,"_274":308,"_230":369},"React Suspense 🔀",{"_311":370},4,{"_7":372,"_305":373},"clojls0c2t21w2dqct9qo2w8",{"_242":374,"_274":308,"_230":375},"React Fundamentals ⚛",{"_9":310,"_311":376,"_313":355},7,{"_7":378,"_305":379},"tn392l9b8lvoh9jd24fcmg8y",{"_242":380,"_274":381,"_230":382},"Build React Hooks 🪝","http://build-hooks.epicreact.dev",{"_9":310,"_311":312,"_313":312},{"_7":384,"_305":385},"ho7jscwf63vn8dmkuqvfpiek",{"_242":368,"_274":386,"_230":387},"http://127.0.0.1:5639",{"_9":310,"_311":322,"_313":312},{"_7":389,"_305":390},"he3wzo3lbr8r7yzymj0ve13s",{"_242":187,"_274":275,"_230":391},{"_311":392,"_313":-5,"_9":-5},6,"routes/_app+/_layout",{"_242":187,"_395":396,"_550":551,"_553":16},"exercises",[397,435,458,469,492,515,539],{"_311":312,"_186":398,"_399":400,"_411":412,"_418":419},"Element Optimization","solutions",[401,403,405,407,409],{"_313":312,"_186":402,"_20":27},"Reusing Elements",{"_313":322,"_186":404,"_20":35},"Element Props",{"_313":331,"_186":406,"_20":43},"Context",{"_313":370,"_186":408,"_20":51},"Memoize Elements",{"_313":355,"_186":410,"_20":59},"Memoize Components","problems",[413,414,415,416,417],{"_313":312,"_186":402,"_20":21},{"_313":322,"_186":404,"_20":31},{"_313":331,"_186":406,"_20":39},{"_313":370,"_186":408,"_20":47},{"_313":355,"_186":410,"_20":55},"steps",[420,423,426,429,432],{"_313":312,"_186":402,"_20":21,"_310":421,"_354":422},{"_20":21,"_186":402},{"_20":27,"_186":402},{"_313":322,"_186":404,"_20":31,"_310":424,"_354":425},{"_20":31,"_186":404},{"_20":35,"_186":404},{"_313":331,"_186":406,"_20":39,"_310":427,"_354":428},{"_20":39,"_186":406},{"_20":43,"_186":406},{"_313":370,"_186":408,"_20":47,"_310":430,"_354":431},{"_20":47,"_186":408},{"_20":51,"_186":408},{"_313":355,"_186":410,"_20":55,"_310":433,"_354":434},{"_20":55,"_186":410},{"_20":59,"_186":410},{"_311":322,"_186":436,"_399":437,"_411":444,"_418":448},"Optimize Context",[438,440,442],{"_313":312,"_186":439,"_20":67},"Memoize Context",{"_313":322,"_186":441,"_20":75},"Provider Component",{"_313":331,"_186":443,"_20":83},"Split Context",[445,446,447],{"_313":312,"_186":439,"_20":63},{"_313":322,"_186":441,"_20":71},{"_313":331,"_186":443,"_20":79},[449,452,455],{"_313":312,"_186":439,"_20":63,"_310":450,"_354":451},{"_20":63,"_186":439},{"_20":67,"_186":439},{"_313":322,"_186":441,"_20":71,"_310":453,"_354":454},{"_20":71,"_186":441},{"_20":75,"_186":441},{"_313":331,"_186":443,"_20":79,"_310":456,"_354":457},{"_20":79,"_186":443},{"_20":83,"_186":443},{"_311":331,"_186":459,"_399":460,"_411":463,"_418":465},"Concurrent Rendering",[461],{"_313":312,"_186":462,"_20":91},"useDeferredValue + memo",[464],{"_313":312,"_186":462,"_20":87},[466],{"_313":312,"_186":462,"_20":87,"_310":467,"_354":468},{"_20":87,"_186":462},{"_20":91,"_186":462},{"_311":370,"_186":470,"_399":471,"_411":478,"_418":482},"Code Splitting",[472,474,476],{"_313":312,"_186":473,"_20":99},"lazy",{"_313":322,"_186":475,"_20":107},"Eager Loading",{"_313":331,"_186":477,"_20":115},"Transitions",[479,480,481],{"_313":312,"_186":473,"_20":95},{"_313":322,"_186":475,"_20":103},{"_313":331,"_186":477,"_20":111},[483,486,489],{"_313":312,"_186":473,"_20":95,"_310":484,"_354":485},{"_20":95,"_186":473},{"_20":99,"_186":473},{"_313":322,"_186":475,"_20":103,"_310":487,"_354":488},{"_20":103,"_186":475},{"_20":107,"_186":475},{"_313":331,"_186":477,"_20":111,"_310":490,"_354":491},{"_20":111,"_186":477},{"_20":115,"_186":477},{"_311":355,"_186":493,"_399":494,"_411":501,"_418":505},"Expensive Calculations",[495,497,499],{"_313":312,"_186":496,"_20":123},"useMemo",{"_313":322,"_186":498,"_20":131},"Web Worker",{"_313":331,"_186":500,"_20":139},"Async Results",[502,503,504],{"_313":312,"_186":496,"_20":119},{"_313":322,"_186":498,"_20":127},{"_313":331,"_186":500,"_20":135},[506,509,512],{"_313":312,"_186":496,"_20":119,"_310":507,"_354":508},{"_20":119,"_186":496},{"_20":123,"_186":496},{"_313":322,"_186":498,"_20":127,"_310":510,"_354":511},{"_20":127,"_186":498},{"_20":131,"_186":498},{"_313":331,"_186":500,"_20":135,"_310":513,"_354":514},{"_20":135,"_186":500},{"_20":139,"_186":500},{"_311":392,"_186":516,"_399":517,"_411":524,"_418":529},"Optimize Rendering",[518,520,522],{"_313":312,"_186":519,"_20":147},"Component Memoization",{"_313":322,"_186":521,"_20":155},"Custom Comparator",{"_313":331,"_186":523,"_20":163},"Primitive Values",[525,526,527],{"_313":312,"_186":519,"_20":143},{"_313":322,"_186":521,"_20":151},{"_313":331,"_186":528,"_20":159},"Primitives",[530,533,536],{"_313":312,"_186":519,"_20":143,"_310":531,"_354":532},{"_20":143,"_186":519},{"_20":147,"_186":519},{"_313":322,"_186":521,"_20":151,"_310":534,"_354":535},{"_20":151,"_186":521},{"_20":155,"_186":521},{"_313":331,"_186":528,"_20":159,"_310":537,"_354":538},{"_20":159,"_186":528},{"_20":163,"_186":523},{"_311":376,"_186":540,"_399":541,"_411":544,"_418":546},"Windowing",[542],{"_313":312,"_186":543,"_20":171},"Virtualizer",[545],{"_313":312,"_186":543,"_20":167},[547],{"_313":312,"_186":543,"_20":167,"_310":548,"_354":549},{"_20":167,"_186":543},{"_20":171,"_186":543},"playground",{"_552":-5,"_311":-2,"_313":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_556":557,"_242":187,"_230":558,"_665":666,"_667":668,"_669":670,"_674":675,"_680":681},"articleId","workshop-react-performance-6-finished",{"_22":559,"_311":392,"_560":561,"_186":516,"_562":563,"_564":565,"_566":567,"_569":570,"_418":572,"_411":639,"_399":652},"/myapp/workshop-content/exercises/06.rerenders","dirName","06.rerenders","instructionsCode","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var u=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),k=(a,e)=>{for(var l in e)s(a,l,{get:e[l],enumerable:!0})},o=(a,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!v.call(a,r)&&r!==l&&s(a,r,{get:()=>e[r],enumerable:!(c=b(e,r))||c.enumerable});return a};var N=(a,e,l)=>(l=a!=null?p(y(a)):{},o(e||!a||!a.__esModule?s(l,\"default\",{value:a,enumerable:!0}):l,a)),f=a=>o(s({},\"__esModule\",{value:!0}),a);var i=u((C,t)=>{t.exports=_jsx_runtime});var D={};k(D,{default:()=>h,frontmatter:()=>g});var n=N(i()),g=void 0;function d(a){let e={a:\"a\",code:\"code\",em:\"em\",h1:\"h1\",img:\"img\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...a.components},{EpicVideo:l}=e;return l||w(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Optimize Rendering\"}),`\n`,(0,n.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-performance/intro-to-optimize-rendering\"}),`\n`,(0,n.jsx)(e.p,{children:\"Here's the lifecycle of a React app:\"}),`\n`,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:\"/img/react-render-cycle.png\",alt:\"\\u2192 render \\u2192 reconciliation \\u2192 commit \\u2192 state change \\u2192 rerender\"})}),`\n`,(0,n.jsx)(e.p,{children:\"Let's define a few terms:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:'The \"render\" phase: create React elements React.createElement'}),`\n`,(0,n.jsx)(e.li,{children:'The \"reconciliation\" phase: compare previous elements with the new ones'}),`\n`,(0,n.jsx)(e.li,{children:'The \"commit\" phase: update the DOM (if needed).'}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:`React exists in its current form (in large part) because updating the DOM is the\nslowest part of this process. By separating us from the DOM, React can perform\nthe most surgically optimal updates to the DOM to speed things up for us\nbig-time.`}),`\n`,(0,n.jsx)(e.p,{children:\"A React Component can rerender for any of the following reasons:\"}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"Its props change\"}),`\n`,(0,n.jsx)(e.li,{children:\"Its internal state changes\"}),`\n`,(0,n.jsx)(e.li,{children:\"It is consuming context values which have changed\"}),`\n`,(0,n.jsx)(e.li,{children:\"Its parent rerenders\"}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"React is really fast, however, \",(0,n.jsx)(e.em,{children:\"sometimes\"}),` it can be useful to give React little\ntips about certain parts of the React tree when there's a state update. You can\nopt-out of state updates for a part of the React tree by using\n`,(0,n.jsx)(e.a,{href:\"https://react.dev/reference/react/memo\",children:(0,n.jsx)(e.code,{children:\"memo\"})}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[`I want to emphasize that I've seen many projects make the mistake of using these\nutilities as band-aids over more problematic performance problems in their apps.\nPlease read more about this in my blog post:\n`,(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render\",children:\"Fix the slow render before you fix the rerender\"}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[`Let's look at an example to learn how this works. You can pull this example up\nat `,(0,n.jsx)(\"a\",{target:\"_blank\",href:\"/app/example.unnecessary-rerenders/\",children:\"/app/example.unnecessary-rerenders\"}),`\n(and feel free to play with it in `,(0,n.jsx)(e.code,{children:\"examples/unnecessary-rerenders\"}),`). Pull this\nup and profile it with the React DevTools.`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's the implementation:\"}),`\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:\"CountButton\"}),\"({\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"onClick\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"}\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(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(--base0C)\"},children:\"number\"}),`\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:\"onClick\"}),(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(--base0C)\"},children:\"void\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"}) {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",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:\"onClick\"}),(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\":\"9\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"NameInput\"}),\"({\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"onNameChange\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"}\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onNameChange\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" (\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"void\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"}) {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",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\":\"19\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"label\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[\"\t\t\tName:\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\" \"}),\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"input\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"\t\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(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:\"name\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:[\"\t\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onChange\"}),(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:\"e\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onNameChange\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"e\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"currentTarget\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"value\"}),\")\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:[\"\t\t\t/>\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",children:[\"}\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"App\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setName\"}),\"] \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useState\"}),\"(\",\"''\",\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",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\":\"32\",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:\"c\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"c\"}),\" \",(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\":\"33\",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\":\"34\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"{ display: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"flex\"}),\"'\",\", flexDirection: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"column\"}),\"'\",\", gap: \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"6\"}),\" }\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"35\",children:[\"\t\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\":\"36\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountButton\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"count\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"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:\"}\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"37\",children:[\"\t\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"38\",children:[\"\t\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\":\"39\",children:[\"\t\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"NameInput\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"name\"}),(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:\"name\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onNameChange\"}),(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:\"setName\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"40\",children:[\"\t\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"41\",children:[\"\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"`${\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\"}\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"'s favorite number is \"}),\"${\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\"}`\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"null\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"42\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"43\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"44\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[`Based on how this is implemented, when you click on the counter button, the\n`,(0,n.jsx)(e.code,{children:\"\"}),\" rerenders (so we can update the \",(0,n.jsx)(e.code,{children:\"count\"}),` value). But the\n`,(0,n.jsx)(e.code,{children:\"\"}),` is also rerendered. If you have\n`,(0,n.jsx)(e.code,{children:\"Record why each component rendered while profiling.\"}),` enabled in React DevTools,\nthen you'll see that under \"Why did this render?\" it says \"The parent component\nrendered.\"`]}),`\n`,(0,n.jsx)(e.p,{children:`React does this because it has no way of knowing whether the NameInput will need\nto return different React elements based on the state change of its parent. In\nour case there were no changes necessary, so React didn't bother updating the\nDOM. This is what's called an \"unnecessary rerender\" and if that\nrender/reconciliation process is expensive, then it can be worthwhile to prevent\nit.`}),`\n`,(0,n.jsxs)(e.p,{children:[`Using one of the bail-out APIs, you can instruct React when to rerender.\nThe only relevant API these days is `,(0,n.jsx)(e.code,{children:\"memo\"}),`. What happens is that React will\ncompare the previous props with the new props and if they're the same, then\nReact will not call the component function and will not update the DOM.`]}),`\n`,(0,n.jsx)(e.p,{children:\"So here's how we can improve our example:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"memo\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react\"}),\"'\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"CountButton\"}),\"({\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"onClick\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"}\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\",(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(--base0C)\"},children:\"number\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",(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(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"void\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"}) {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",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:\"onClick\"}),(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\":\"11\",children:[\"}\",`\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:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"NameInput\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"memo\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"NameInput\"}),\"({\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"onNameChange\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"}\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onNameChange\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" (\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"void\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"}) {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",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\":\"21\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"label\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"\t\t\tName:\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\" \"}),\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"input\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:[\"\t\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"value\"}),(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:\"name\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",children:[\"\t\t\t\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onChange\"}),(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:\"e\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"onNameChange\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"e\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"currentTarget\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"value\"}),\")\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",children:[\"\t\t\t/>\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",children:[\"})\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// etc... no other changes necessary\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"The only change there was to wrap the \",(0,n.jsx)(e.code,{children:\"NameInput\"}),\" component in react's \",(0,n.jsx)(e.code,{children:\"memo\"}),`\nutility.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"If you try that out, then you'll notice the \",(0,n.jsx)(e.code,{children:\"\"}),` no longer rerenders\nwhen you click on the counter button, saving React the work of having to call\nthe `,(0,n.jsx)(e.code,{children:\"NameInput\"}),` function and compare the previous react elements with the new\nones.`]}),`\n`,(0,n.jsxs)(e.p,{children:[`Again, I want to mention that people can make the mistake of wrapping\n`,(0,n.jsx)(e.em,{children:\"everything\"}),\" in \",(0,n.jsx)(e.code,{children:\"memo\"}),` which can actually slow down your app in some cases and\nin all cases it makes your code more complex.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"In fact, why don't you try wrapping the \",(0,n.jsx)(e.code,{children:\"CountButton\"}),\" in \",(0,n.jsx)(e.code,{children:\"memo\"}),` and see what\nhappens. You'll notice that it doesn't work.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"This is because its parent is passing \",(0,n.jsx)(e.code,{children:\"increment\"}),` and that function is new every\nrender (as it's defined in the `,(0,n.jsx)(e.code,{children:\"App\"}),\"). Because \",(0,n.jsx)(e.code,{children:\"memo\"}),` relies on the same props\neach call to prevent unnecessary renders, we're not getting any benefit! If we\nreally wanted to take advantage of `,(0,n.jsx)(e.code,{children:\"memo\"}),\" here, we'd have to wrap \",(0,n.jsx)(e.code,{children:\"increment\"}),` in\n`,(0,n.jsx)(e.code,{children:\"useCallback\"}),\". Feel free to try that if you'd like.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"It's much better to use \",(0,n.jsx)(e.code,{children:\"memo\"}),` more intentionally and further, there are other\nthings you can do to reduce the amount of unnecessary rerenders throughout your\napplication (some of which we've done already).`]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function w(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return f(D);})();\n;return Component;","finishedCode","var Component=(()=>{var f=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var g=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),j=(e,n)=>{for(var o in n)i(e,o,{get:n[o],enumerable:!0})},a=(e,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of h(n))!l.call(e,r)&&r!==o&&i(e,r,{get:()=>n[r],enumerable:!(c=u(n,r))||c.enumerable});return e};var _=(e,n,o)=>(o=e!=null?f(x(e)):{},a(n||!e||!e.__esModule?i(o,\"default\",{value:e,enumerable:!0}):o,e)),w=e=>a(i({},\"__esModule\",{value:!0}),e);var p=g((E,d)=>{d.exports=_jsx_runtime});var k={};j(k,{default:()=>m,frontmatter:()=>y});var t=_(p()),y=void 0;function s(e){let n={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=n;return o||b(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{children:\"Optimize Rendering\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-performance/dad-joke-break-optimize-rendering\"}),`\n`,(0,t.jsx)(n.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} When you find yourself rendering a ton of the same component, optimizing that\none component can have an outsized impact on performance. Good job!`})]})}function m(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(s,{...e})}):s(e)}function b(e,n){throw new Error(\"Expected \"+(n?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(k);})();\n;return Component;","instructionsEpicVideoEmbeds",[568],"https://www.epicreact.dev/workshops/react-performance/intro-to-optimize-rendering","finishedEpicVideoEmbeds",[571],"https://www.epicreact.dev/workshops/react-performance/dad-joke-break-optimize-rendering",[573,601,620],{"_313":312,"_310":574,"_354":591},{"_20":143,"_186":519,"_560":575,"_22":144,"_24":145,"_562":576,"_577":578,"_580":581,"_584":585,"_588":589,"_311":392,"_313":312,"_9":310,"_590":147},"01.problem.memo","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!w.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(c=p(e,r))||c.enumerable});return t};var y=(t,e,o)=>(o=t!=null?m(f(t)):{},s(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),g=t=>s(i({},\"__esModule\",{value:!0}),t);var h=b((M,a)=>{a.exports=_jsx_runtime});var k={};x(k,{default:()=>l,frontmatter:()=>v});var n=y(h()),v=void 0;function d(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||j(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Component Memoization\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-performance/component-memoization\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} We've got a problem. Here's how you reproduce it in our component.\"}),`\n`,(0,n.jsxs)(e.p,{children:[`In this exercise, pull up the React DevTools Profiler and start a recording.\nObserve when you click the \"force rerender\" button, the `,(0,n.jsx)(e.code,{children:\"CityChooser\"}),` and\n`,(0,n.jsx)(e.code,{children:\"ListItem\"}),` components are rerendered even though no DOM updates were needed.\nThis is an unnecessary rerender and a bottleneck in our application (especially\nif we want to start showing all of the results rather than just the first 500...\nwhich we do want to do eventually). If you enable 6x throttle on the CPU (under\nthe Performance tab in Chrome DevTools) then you'll notice the issue is more\nstark.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Your job is to optimize the \",(0,n.jsx)(e.code,{children:\"ListItem\"}),\" component to be memoized via \",(0,n.jsx)(e.code,{children:\"memo\"}),`. Make\nnote of the before/after render times.`]}),`\n`,(0,n.jsx)(e.p,{children:`Make sure to check both the React Profiler and the Chrome DevTools Performance\ntab.`}),`\n`,(0,n.jsx)(e.p,{children:`As with most of these exercises, the code changes are minimal, but the impact\nis significant!`})]})}function l(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}function j(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(k);})();\n;return Component;","epicVideoEmbeds",[579],"https://www.epicreact.dev/workshops/react-performance/component-memoization","test",{"_9":582,"_582":583},"script","playwright test --config=./tests/playwright.config.js","dev",{"_9":582,"_586":587,"_236":237},"portNumber",6051,"stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/06.rerenders/01.problem.memo?view=editor&title=Component+Memoization+%28problem%29","solutionName",{"_20":147,"_186":519,"_560":592,"_22":148,"_24":149,"_562":593,"_577":594,"_580":596,"_584":597,"_588":599,"_311":392,"_313":312,"_9":354,"_600":-5},"01.solution.memo","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},s=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of h(t))!x.call(e,r)&&r!==o&&i(e,r,{get:()=>t[r],enumerable:!(c=f(t,r))||c.enumerable});return e};var j=(e,t,o)=>(o=e!=null?u(l(e)):{},s(t||!e||!e.__esModule?i(o,\"default\",{value:e,enumerable:!0}):o,e)),g=e=>s(i({},\"__esModule\",{value:!0}),e);var m=w((b,a)=>{a.exports=_jsx_runtime});var y={};_(y,{default:()=>d,frontmatter:()=>M});var n=j(m()),M=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||v(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"Component Memoization\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-performance/component-memoization/solution\"}),`\n`,(0,n.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great job! You've managed to really improve the performance of our list when\nunrelated updates occur. But what if there are updates to the list itself?\nHmm...`})]})}function d(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}function v(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(y);})();\n;return Component;",[595],"https://www.epicreact.dev/workshops/react-performance/component-memoization/solution",{"_9":582,"_582":583},{"_9":582,"_586":598,"_236":237},7051,"https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/06.rerenders/01.solution.memo?view=editor&title=Component+Memoization+%28solution%29","problemName",{"_313":322,"_310":602,"_354":611},{"_20":151,"_186":521,"_560":603,"_22":152,"_24":153,"_562":604,"_577":605,"_580":607,"_584":608,"_588":610,"_311":392,"_313":322,"_9":310,"_590":155},"02.problem.comparator","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var a in e)s(n,a,{get:e[a],enumerable:!0})},c=(n,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of v(e))!y.call(n,l)&&l!==a&&s(n,l,{get:()=>e[l],enumerable:!(o=b(e,l))||o.enumerable});return n};var g=(n,e,a)=>(a=n!=null?p(m(n)):{},c(e||!n||!n.__esModule?s(a,\"default\",{value:n,enumerable:!0}):a,n)),w=n=>c(s({},\"__esModule\",{value:!0}),n);var i=u((N,t)=>{t.exports=_jsx_runtime});var E={};f(E,{default:()=>h,frontmatter:()=>k});var r=g(i()),k=void 0;function d(n){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...n.components},{EpicVideo:a}=e;return a||x(\"EpicVideo\",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h1,{children:\"Custom Comparator\"}),`\n`,(0,r.jsx)(a,{url:\"https://www.epicreact.dev/workshops/react-performance/custom-comparator\"}),`\n`,(0,r.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} We've improved things so the \",(0,r.jsx)(e.code,{children:\"ListItem\"}),` components don't rerender when there\nare unrelated changes, but what if there are changes to the list item state?`]}),`\n`,(0,r.jsx)(e.p,{children:`Hover over one of the list items and notice they all rerender. But we really\nonly need the hovered item to rerender (as well as the one that's no longer\nhighlighted).`}),`\n`,(0,r.jsxs)(e.p,{children:[\"So let's add a custom comparator to the \",(0,r.jsx)(e.code,{children:\"memo\"}),\" call in \",(0,r.jsx)(e.code,{children:\"ListItem\"}),` to only\nrerender when the changed props will affect the output.`]}),`\n`,(0,r.jsx)(e.p,{children:\"Here's an example of the comparator:\"}),`\n`,(0,r.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,r.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"Avatar\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"memo\"}),\"(\",`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Avatar\"}),\"({ \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),\" }\",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" { \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"User\"}),\" }) {\",`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\t\",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"img\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"src\"}),(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,r.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"avatarUrl\"}),(0,r.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"alt\"}),(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,r.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,r.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t},\",`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t(\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"prevProps\"}),\", \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"nextProps\"}),\") \",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\",(0,r.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"avatarUnchanged\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"prevProps\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"user\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"avatarUrl\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"nextProps\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"user\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"avatarUrl\"}),`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\",(0,r.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"nameUnchanged\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"prevProps\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"user\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"nextProps\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"user\"}),\".\",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\",(0,r.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// return true if we don't want to re-render\"}),`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t\",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"avatarUnchanged\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"&&\"}),\" \",(0,r.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"nameUnchanged\"}),`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t},\",`\n`]}),(0,r.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\")\",`\n`]})]})}),`\n`,(0,r.jsxs)(e.p,{children:[\"So even if the user object changes, the \",(0,r.jsx)(e.code,{children:\"Avatar\"}),` component will only rerender if\nthe `,(0,r.jsx)(e.code,{children:\"avatarUrl\"}),\" or \",(0,r.jsx)(e.code,{children:\"name\"}),\" properties change.\"]}),`\n`,(0,r.jsx)(e.p,{children:`By default, React just checks the reference of the props, so by providing a\ncustom comparator, we override that default behavior to have a more fine-grained\ncontrol over when the component should rerender.`}),`\n`,(0,r.jsxs)(e.p,{children:[\"So let's add a custom comparator to the \",(0,r.jsx)(e.code,{children:\"ListItem\"}),` component so it only rerenders\nwhen absolutely necessary.`]}),`\n`,(0,r.jsx)(e.p,{children:`Pull up the React Profiler and the DevTools Performance tab to see the impact\nof this optimization as you hover over different list items.`})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(d,{...n})}):d(n)}function x(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(E);})();\n;return Component;",[606],"https://www.epicreact.dev/workshops/react-performance/custom-comparator",{"_9":582,"_582":583},{"_9":582,"_586":609,"_236":237},6052,"https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/06.rerenders/02.problem.comparator?view=editor&title=Custom+Comparator+%28problem%29",{"_20":155,"_186":521,"_560":612,"_22":156,"_24":157,"_562":613,"_577":614,"_580":616,"_584":617,"_588":619,"_311":392,"_313":322,"_9":354,"_600":-5},"02.solution.comparator","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of l(e))!x.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(c=f(e,r))||c.enumerable});return t};var j=(t,e,o)=>(o=t!=null?u(h(t)):{},s(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),y=t=>s(i({},\"__esModule\",{value:!0}),t);var p=w((M,a)=>{a.exports=_jsx_runtime});var C={};_(C,{default:()=>d,frontmatter:()=>b});var n=j(p()),b=void 0;function m(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||g(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Custom Comparator\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-performance/custom-comparator/solution\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great! The performance is better! Unfortunately, that custom comparator is\nkinda complex. I wonder if we could simplify it a bit...`})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(m,{...t})}):m(t)}function g(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(C);})();\n;return Component;",[615],"https://www.epicreact.dev/workshops/react-performance/custom-comparator/solution",{"_9":582,"_582":583},{"_9":582,"_586":618,"_236":237},7052,"https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/06.rerenders/02.solution.comparator?view=editor&title=Custom+Comparator+%28solution%29",{"_313":331,"_310":621,"_354":630},{"_20":159,"_186":528,"_560":622,"_22":160,"_24":161,"_562":623,"_577":624,"_580":626,"_584":627,"_588":629,"_311":392,"_313":331,"_9":310,"_590":163},"03.problem.primitives","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var r in e)s(n,r,{get:e[r],enumerable:!0})},o=(n,e,r,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of v(e))!y.call(n,l)&&l!==r&&s(n,l,{get:()=>e[l],enumerable:!(c=b(e,l))||c.enumerable});return n};var k=(n,e,r)=>(r=n!=null?p(m(n)):{},o(e||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),w=n=>o(s({},\"__esModule\",{value:!0}),n);var i=u((D,t)=>{t.exports=_jsx_runtime});var N={};f(N,{default:()=>h,frontmatter:()=>g});var a=k(i()),g=void 0;function d(n){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...n.components},{EpicVideo:r}=e;return r||E(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Primitives\"}),`\n`,(0,a.jsx)(r,{url:\"https://www.epicreact.dev/workshops/react-performance/primitives\"}),`\n`,(0,a.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} I would love to have the performance improvement without all the complexity\nof the custom comparator function.`}),`\n`,(0,a.jsxs)(e.p,{children:[\"The default comparator function is a simple \",(0,a.jsx)(e.code,{children:\"===\"}),` comparison. So if we changed\nthe props a bit, we could take advantage of this.`]}),`\n`,(0,a.jsx)(e.p,{children:\"Remember our Avatar example before?\"}),`\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:\"Avatar\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"memo\"}),\"(\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Avatar\"}),\"({ \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),\" }\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"User\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"img\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"src\"}),(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:\"user\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"avatarUrl\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"alt\"}),(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:\"user\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t},\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"prevProps\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"nextProps\"}),\") \",(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\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"avatarUnchanged\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"prevProps\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"user\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"avatarUrl\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"===\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"nextProps\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"user\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"avatarUrl\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"nameUnchanged\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"prevProps\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"user\"}),\".\",(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(--base08)\"},children:\"nextProps\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"user\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// return true if we don't want to re-render\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"avatarUnchanged\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"||\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"nameUnchanged\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t},\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\")\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:\"We could change the props for this component to be primitives instead of objects.\"}),`\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:\"Avatar\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"memo\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Avatar\"}),\"({\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"avatarUrl\"}),\",\",`\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:\"name\"}),\",\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"}\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"avatarUrl\"}),(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\":\"6\",children:[\"\t\",(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\":\"7\",children:[\"}) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"img\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"src\"}),(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:\"avatarUrl\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"alt\"}),(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:\"name\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"})\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[`And now we can use the default comparator function without specifying our own\nbecause a simple check with `,(0,a.jsx)(e.code,{children:\"===\"}),\" will be enough.\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"Let's do this for our \",(0,a.jsx)(e.code,{children:\"ListItem\"}),\".\"]}),`\n`,(0,a.jsx)(e.p,{children:\"And make sure to check the before/after of your work!\"}),`\n`,(0,a.jsx)(\"callout-info\",{children:(0,a.jsx)(e.p,{children:`\\u{1F6A8} There is no change in how many times the ListItem renders with this change\nso the tests will be passing from the start. But you'll want to make sure the\ntests continue to pass when you're finished.`})})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function E(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(N);})();\n;return Component;",[625],"https://www.epicreact.dev/workshops/react-performance/primitives",{"_9":582,"_582":583},{"_9":582,"_586":628,"_236":237},6053,"https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/06.rerenders/03.problem.primitives?view=editor&title=Primitives+%28problem%29",{"_20":163,"_186":523,"_560":631,"_22":164,"_24":165,"_562":632,"_577":633,"_580":635,"_584":636,"_588":638,"_311":392,"_313":331,"_9":354,"_600":-5},"03.solution.primitives","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!x.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(c=h(e,r))||c.enumerable});return t};var j=(t,e,o)=>(o=t!=null?u(l(t)):{},s(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>s(i({},\"__esModule\",{value:!0}),t);var m=w((M,a)=>{a.exports=_jsx_runtime});var y={};_(y,{default:()=>d,frontmatter:()=>g});var n=j(m()),g=void 0;function p(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||v(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Primitive Values\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-performance/primitives/solution\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Great job! That's much better! We still get the perf benefits with \",(0,n.jsx)(e.code,{children:\"memo\"}),`\nwithout all the complexity of a custom comparator function.`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(p,{...t})}):p(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 b(y);})();\n;return Component;",[634],"https://www.epicreact.dev/workshops/react-performance/primitives/solution",{"_9":582,"_582":583},{"_9":582,"_586":637,"_236":237},7053,"https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/06.rerenders/03.solution.primitives?view=editor&title=Primitive+Values+%28solution%29",[640,644,648],{"_20":143,"_186":519,"_560":575,"_22":144,"_24":145,"_562":576,"_577":641,"_580":642,"_584":643,"_588":589,"_311":392,"_313":312,"_9":310,"_590":147},[579],{"_9":582,"_582":583},{"_9":582,"_586":587,"_236":237},{"_20":151,"_186":521,"_560":603,"_22":152,"_24":153,"_562":604,"_577":645,"_580":646,"_584":647,"_588":610,"_311":392,"_313":322,"_9":310,"_590":155},[606],{"_9":582,"_582":583},{"_9":582,"_586":609,"_236":237},{"_20":159,"_186":528,"_560":622,"_22":160,"_24":161,"_562":623,"_577":649,"_580":650,"_584":651,"_588":629,"_311":392,"_313":331,"_9":310,"_590":163},[625],{"_9":582,"_582":583},{"_9":582,"_586":628,"_236":237},[653,657,661],{"_20":147,"_186":519,"_560":592,"_22":148,"_24":149,"_562":593,"_577":654,"_580":655,"_584":656,"_588":599,"_311":392,"_313":312,"_9":354,"_600":-5},[595],{"_9":582,"_582":583},{"_9":582,"_586":598,"_236":237},{"_20":155,"_186":521,"_560":612,"_22":156,"_24":157,"_562":613,"_577":658,"_580":659,"_584":660,"_588":619,"_311":392,"_313":322,"_9":354,"_600":-5},[615],{"_9":582,"_582":583},{"_9":582,"_586":618,"_236":237},{"_20":163,"_186":523,"_560":631,"_22":164,"_24":165,"_562":632,"_577":662,"_580":663,"_584":664,"_588":638,"_311":392,"_313":331,"_9":354,"_600":-5},[634],{"_9":582,"_582":583},{"_9":582,"_586":637,"_236":237},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=React%20Performance%20%E2%9A%A1&entry.428900931=Optimize%20Rendering","epicVideoInfosPromise",["P",668],"exerciseFinished",{"_671":672,"_24":673},"file","/myapp/workshop-content/exercises/06.rerenders/FINISHED.mdx","exercises/06.rerenders/FINISHED.mdx","prevStepLink",{"_676":677,"_678":679},"to","/exercise/06/03/solution","aria-label","Primitive Values (solution)","nextStepLink",{"_676":682,"_678":540},"/exercise/07","actionData","errors"]

06. Optimize Rendering/Elaboration