[{"_1":2,"_855":-5,"_856":-5},"loaderData",{"_3":4,"_542":543,"_705":706},"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","kjchvnzd36kli70148dod589","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.36.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","533f36def523f4a46c1dc17c3109c5d0bfc02498b07685c764522935cdd2439b","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/02/finished","session",{"_279":-5},"separator","online","toast","confettiId","presence",{"_295":296},"users",[297,315,323,332,340,349,358,365,372,380,387,394,401,408,415,422,430,437,444,450,457,464,471,478,485,492,499,506,513,517,522,528,534,538],{"_7":298,"_299":235,"_300":301,"_302":303,"_20":304,"_305":306},"7e0e5e64-db3c-4e1a-93ab-4d02aee98a84","hasAccess","imageUrlSmall","https://avatars.githubusercontent.com/u/22347704?v=4&size=64","imageUrlLarge","https://avatars.githubusercontent.com/u/22347704?v=4&size=512","frankfullstack","location",{"_242":307,"_274":308,"_230":309},"Advanced MCP Features 🐡","http://localhost:5639",{"_9":310,"_311":312,"_313":314},"problem","exerciseNumber",5,"stepNumber",2,{"_7":316,"_299":235,"_300":317,"_302":318,"_20":319,"_305":320},"74445977-a2ee-42eb-9cc2-5d52370b3b83","https://cdn.discordapp.com/avatars/691345686209363999/ffe885743f43c77c51e49eb436fe9258.png?size=64","https://cdn.discordapp.com/avatars/691345686209363999/ffe885743f43c77c51e49eb436fe9258.png?size=512","Dimitar",{"_242":321,"_274":308,"_230":322},"MCP Fundamentals 🧱",{"_311":312},{"_7":324,"_299":235,"_300":325,"_302":326,"_20":327,"_305":328},"9b1be242-36dd-477b-80ea-2b1c1b47e51f","https://avatars.githubusercontent.com/u/10503943?v=4&size=64","https://avatars.githubusercontent.com/u/10503943?v=4&size=512","Gustavo Lopes",{"_242":329,"_274":308,"_230":330},"React Fundamentals ⚛",{"_9":310,"_311":314,"_313":331},3,{"_7":333,"_299":235,"_300":334,"_302":335,"_20":336,"_305":337},"ca4a76af-5387-498d-a425-bf42fda155af","https://avatars.githubusercontent.com/u/24300314?v=4&size=64","https://avatars.githubusercontent.com/u/24300314?v=4&size=512","Boopesh Kumar",{"_242":321,"_274":308,"_230":338},{"_311":339},4,{"_7":341,"_299":235,"_300":342,"_302":343,"_20":344,"_305":345},"66720eb5-1c70-434d-af5b-ded6aaa14ae9","https://www.gravatar.com/avatar/b79060a617bcf646164eaf5c580627e9?size=64&default=identicon","https://www.gravatar.com/avatar/b79060a617bcf646164eaf5c580627e9?size=512&default=identicon","Mohak",{"_242":346,"_274":308,"_230":347},"Get Started with React 🏃‍➡️",{"_9":348,"_311":314,"_313":314},"solution",{"_7":350,"_299":235,"_300":351,"_302":352,"_20":353,"_305":354},"830c4488-4e79-4af8-a8d5-3048826d9ab9","https://avatars.githubusercontent.com/u/5904146?v=4&size=64","https://avatars.githubusercontent.com/u/5904146?v=4&size=512","AP",{"_242":307,"_274":355,"_230":356},"http://localhost:5640",{"_9":310,"_311":339,"_313":357},1,{"_7":359,"_299":235,"_300":360,"_302":361,"_20":362,"_305":363},"20bc3944-0476-4c27-a082-0948e67b896c","https://www.gravatar.com/avatar/8c33381d72c0c1e630186ac4e27b3cb3?size=64&default=identicon","https://www.gravatar.com/avatar/8c33381d72c0c1e630186ac4e27b3cb3?size=512&default=identicon","Nicolas Mainella",{"_242":329,"_274":308,"_230":364},{"_311":314},{"_7":366,"_299":235,"_300":367,"_302":368,"_20":369,"_305":370},"8f0b5df0-441e-40fd-8d4d-97135d2a64c4","https://cdn.discordapp.com/embed/avatars/4.png?size=64","https://cdn.discordapp.com/embed/avatars/4.png?size=512","Sergio",{"_242":321,"_274":308,"_230":371},{"_9":310,"_311":312,"_313":331},{"_7":373,"_299":235,"_300":374,"_302":375,"_20":376,"_305":377},"9ee23268-3c73-4e2d-b6b8-072e274631dc","https://www.gravatar.com/avatar/7f51e958b89a873f8d99643e39562b40?size=64&default=identicon","https://www.gravatar.com/avatar/7f51e958b89a873f8d99643e39562b40?size=512&default=identicon","Steve Zelaznik",{"_242":378,"_274":308,"_230":379},"React Hooks 🎣",{"_9":348,"_311":357,"_313":314},{"_7":381,"_299":235,"_300":382,"_302":383,"_20":384,"_305":385},"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":321,"_274":308,"_230":386},{"_9":310,"_311":314,"_313":314},{"_7":388,"_299":235,"_300":389,"_302":390,"_20":391,"_305":392},"692eea5a-c75a-4f1f-8de9-b34b85e3d392","https://cdn.discordapp.com/avatars/316066013969907715/6183a2142ad6efe60e4f63c699c1ee5f.png?size=64","https://cdn.discordapp.com/avatars/316066013969907715/6183a2142ad6efe60e4f63c699c1ee5f.png?size=512","Wutthipong Bunyafakpol",{"_242":307,"_274":308,"_230":393},{"_311":339},{"_7":395,"_299":16,"_300":396,"_302":397,"_20":398,"_305":399},"afcb5fbb-9f5e-4dcc-a201-f6b2b7c22aaf","https://www.gravatar.com/avatar/3906494abe29e7418425dbce15264502?size=64&default=identicon","https://www.gravatar.com/avatar/3906494abe29e7418425dbce15264502?size=512&default=identicon","Yuri",{"_242":321,"_274":308,"_230":400},{"_311":331},{"_7":402,"_299":235,"_300":403,"_302":404,"_20":405,"_305":406},"4d4bae0f-86d6-4ade-b4ce-a7511a635bb9","https://www.gravatar.com/avatar/5488b6a3d3630d173115ea1d84a1b02f?size=64&default=identicon","https://www.gravatar.com/avatar/5488b6a3d3630d173115ea1d84a1b02f?size=512&default=identicon","Sachin",{"_242":307,"_274":308,"_230":407},{"_311":314},{"_7":409,"_299":235,"_300":410,"_302":411,"_20":412,"_305":413},"b54736bc-3e9a-4c24-8be9-888ac9f5721e","https://cdn.discordapp.com/avatars/731043265041662052/8db484f0f924fb607fc016943e7747f6.png?size=64","https://cdn.discordapp.com/avatars/731043265041662052/8db484f0f924fb607fc016943e7747f6.png?size=512","Ka Po CHOW",{"_242":378,"_274":308,"_230":414},{"_311":314},{"_7":416,"_299":235,"_300":417,"_302":418,"_20":419,"_305":420},"a9816ed0-87da-4830-9f1d-e8cbbfa38737","https://www.gravatar.com/avatar/8c55b99925b14a604d0750740dbf1be3?size=64&default=identicon","https://www.gravatar.com/avatar/8c55b99925b14a604d0750740dbf1be3?size=512&default=identicon","Marina Nicolai",{"_242":321,"_274":355,"_230":421},{"_9":348,"_311":312,"_313":314},{"_7":423,"_299":235,"_300":424,"_302":425,"_20":426,"_305":427},"2e8ac2ae-c7c3-4b66-a65d-aa57db0ac986","https://www.gravatar.com/avatar/a379b807dbfbc4d39fa1c3dfddc31f83?size=64&default=identicon","https://www.gravatar.com/avatar/a379b807dbfbc4d39fa1c3dfddc31f83?size=512&default=identicon","STEPHANE GAUTIER IALLE KEMGANG",{"_242":428,"_274":308,"_230":429},"Advanced React APIs 🔥",{"_9":310,"_311":339,"_313":314},{"_7":431,"_299":235,"_300":432,"_302":433,"_20":434,"_305":435},"926b5406-4854-4731-bd4f-da63fa9baa9b","https://www.gravatar.com/avatar/6e6245b1507778895a87d1648a7769f1?size=64&default=identicon","https://www.gravatar.com/avatar/6e6245b1507778895a87d1648a7769f1?size=512&default=identicon","Mingus",{"_242":321,"_274":308,"_230":436},{"_311":357},{"_7":438,"_299":235,"_300":439,"_302":440,"_20":441,"_305":442},"898ccd0b-bf80-404c-b4a6-ad8c848ef987","https://avatars.githubusercontent.com/u/34182208?v=4&size=64","https://avatars.githubusercontent.com/u/34182208?v=4&size=512","NicMul",{"_242":321,"_274":308,"_230":443},{"_9":310,"_311":331,"_313":314},{"_7":445,"_299":16,"_300":446,"_302":447,"_20":448,"_305":449},"3a31c935-7b4f-40ea-a838-0d7569d54bdc","https://avatars.githubusercontent.com/u/52546?v=4&size=64","https://avatars.githubusercontent.com/u/52546?v=4&size=512","Hirotaka Mizutani",{"_242":321,"_274":308},{"_7":451,"_299":235,"_300":452,"_302":453,"_20":454,"_305":455},"a5dc3818-bce3-48a1-b110-7ddc818936f3","https://cdn.discordapp.com/avatars/332791154313658388/b457472f132dcaa777b71296e6f44a63.png?size=64","https://cdn.discordapp.com/avatars/332791154313658388/b457472f132dcaa777b71296e6f44a63.png?size=512","Jay",{"_242":321,"_274":308,"_230":456},{"_9":310,"_311":339,"_313":357},{"_7":458,"_299":235,"_300":459,"_302":460,"_20":461,"_305":462},"653e10e4-f405-42d0-bfd1-6a89deb0a0a5","https://www.gravatar.com/avatar/3caf0eb19f46da6fa60348ef1f6d012b?size=64&default=identicon","https://www.gravatar.com/avatar/3caf0eb19f46da6fa60348ef1f6d012b?size=512&default=identicon","Marvin",{"_242":321,"_274":355,"_230":463},{"_9":348,"_311":312,"_313":357},{"_7":465,"_299":235,"_300":466,"_302":467,"_20":468,"_305":469},"9c0adb6b-428d-4de1-a667-1fd50c45ffc0","https://cdn.discordapp.com/avatars/1102814201120034856/c68235f228e71de66418cb86876248d9.png?size=64","https://cdn.discordapp.com/avatars/1102814201120034856/c68235f228e71de66418cb86876248d9.png?size=512","Rednar Rosique",{"_242":307,"_274":308,"_230":470},{"_9":348,"_311":314,"_313":357},{"_7":472,"_299":235,"_300":473,"_302":474,"_20":475,"_305":476},"216b531c-4377-4b36-b912-4c0f77f18d8e","https://www.gravatar.com/avatar/087dd49f2165832940809f2be54cc8d6?size=64&default=identicon","https://www.gravatar.com/avatar/087dd49f2165832940809f2be54cc8d6?size=512&default=identicon","Nikhilesh Katakam",{"_242":307,"_274":308,"_230":477},{"_311":312},{"_7":479,"_299":235,"_300":480,"_302":481,"_20":482,"_305":483},"a1299e9f-0947-40d9-a938-01f2725e4bf6","https://www.gravatar.com/avatar/3452765deec83136e61d98e0ccc3e83f?size=64&default=identicon","https://www.gravatar.com/avatar/3452765deec83136e61d98e0ccc3e83f?size=512&default=identicon","Meni",{"_242":321,"_274":308,"_230":484},{"_9":310,"_311":331,"_313":314},{"_7":486,"_299":235,"_300":487,"_302":488,"_20":489,"_305":490},"e2de664f-a76d-42d9-ab6c-1aaf33ad97db","https://www.gravatar.com/avatar/2b4aac8301f008dac1b4f0f4d611a692?size=64&default=identicon","https://www.gravatar.com/avatar/2b4aac8301f008dac1b4f0f4d611a692?size=512&default=identicon","Teerawat Prarom",{"_242":428,"_274":308,"_230":491},{"_9":310,"_311":314,"_313":357},{"_7":493,"_299":235,"_300":494,"_302":495,"_20":496,"_305":497},"9b5cc8a8-ac08-4398-ae31-eaa23ceaf8a1","https://www.gravatar.com/avatar/266c7e634068f7baf1eebc875dc946c5?size=64&default=identicon","https://www.gravatar.com/avatar/266c7e634068f7baf1eebc875dc946c5?size=512&default=identicon","K Raghavendra Rao",{"_242":329,"_274":308,"_230":498},{"_311":314},{"_7":500,"_299":235,"_300":501,"_302":502,"_20":503,"_305":504},"6dd572cb-3e85-4e32-a1c9-8c91e2aea3d5","https://cdn.discordapp.com/avatars/1027693649808597123/9170181dbb8baad5d4b8ff346251bc85.png?size=64","https://cdn.discordapp.com/avatars/1027693649808597123/9170181dbb8baad5d4b8ff346251bc85.png?size=512","Jeff CA",{"_242":378,"_274":308,"_230":505},{"_9":310,"_311":357,"_313":339},{"_7":507,"_299":235,"_300":508,"_302":509,"_20":510,"_305":511},"2c4caa18-6594-48f9-8914-a4beb45c20cd","https://cdn.discordapp.com/avatars/105755735731781632/a_1afdce133caaa4d8d17d02c07b0d2b69.gif?size=64","https://cdn.discordapp.com/avatars/105755735731781632/a_1afdce133caaa4d8d17d02c07b0d2b69.gif?size=512","Kent",{"_242":512,"_274":308},"MCP UI 🪟",{"_7":514,"_305":515},"hkh1282sptsps9u0nn1fxfe9",{"_242":307,"_274":516},"http://advanced-mcp-features.epicai.pro",{"_7":518,"_299":235,"_300":519,"_302":520,"_20":-5,"_305":521},"8963d4dd-fce1-4787-9876-0a587186c8fd","https://cdn.discordapp.com/avatars/795816514401206272/095d828ba689b71cde9e0bd895193656.png?size=64","https://cdn.discordapp.com/avatars/795816514401206272/095d828ba689b71cde9e0bd895193656.png?size=512",{"_242":321,"_274":308},{"_7":523,"_299":235,"_300":524,"_302":525,"_20":-5,"_305":526},"8efea78b-638c-487b-add6-ec4e77e28182","https://cdn.discordapp.com/avatars/648558653728751628/73d7fd34ef48f41fdb734bb636802c91.png?size=64","https://cdn.discordapp.com/avatars/648558653728751628/73d7fd34ef48f41fdb734bb636802c91.png?size=512",{"_242":321,"_274":308,"_230":527},{"_311":312},{"_7":529,"_299":235,"_300":530,"_302":531,"_20":-5,"_305":532},"d0c15df3-ee32-4757-8004-2b37ad485cd2","https://cdn.discordapp.com/avatars/690008320207224854/92bf9bebdbff03c8779e0a86f49834a7.png?size=64","https://cdn.discordapp.com/avatars/690008320207224854/92bf9bebdbff03c8779e0a86f49834a7.png?size=512",{"_242":321,"_274":308,"_230":533},{"_9":310,"_311":331,"_313":331},{"_7":535,"_305":536},"p8kuel0stzpfo5tn21c26zhi",{"_242":378,"_274":537},"http://hooks.epicreact.dev",{"_7":539,"_305":540},"z9wiqwmvjq0afo58prf3ppk2",{"_242":187,"_274":275,"_230":541},{"_311":314,"_313":-5,"_9":-5},"routes/_app+/_layout",{"_242":187,"_544":545,"_701":702,"_704":16},"exercises",[546,584,607,618,641,664,689],{"_311":357,"_186":547,"_548":549,"_560":561,"_567":568},"Element Optimization","solutions",[550,552,554,556,558],{"_313":357,"_186":551,"_20":27},"Reusing Elements",{"_313":314,"_186":553,"_20":35},"Element Props",{"_313":331,"_186":555,"_20":43},"Context",{"_313":339,"_186":557,"_20":51},"Memoize Elements",{"_313":312,"_186":559,"_20":59},"Memoize Components","problems",[562,563,564,565,566],{"_313":357,"_186":551,"_20":21},{"_313":314,"_186":553,"_20":31},{"_313":331,"_186":555,"_20":39},{"_313":339,"_186":557,"_20":47},{"_313":312,"_186":559,"_20":55},"steps",[569,572,575,578,581],{"_313":357,"_186":551,"_20":21,"_310":570,"_348":571},{"_20":21,"_186":551},{"_20":27,"_186":551},{"_313":314,"_186":553,"_20":31,"_310":573,"_348":574},{"_20":31,"_186":553},{"_20":35,"_186":553},{"_313":331,"_186":555,"_20":39,"_310":576,"_348":577},{"_20":39,"_186":555},{"_20":43,"_186":555},{"_313":339,"_186":557,"_20":47,"_310":579,"_348":580},{"_20":47,"_186":557},{"_20":51,"_186":557},{"_313":312,"_186":559,"_20":55,"_310":582,"_348":583},{"_20":55,"_186":559},{"_20":59,"_186":559},{"_311":314,"_186":585,"_548":586,"_560":593,"_567":597},"Optimize Context",[587,589,591],{"_313":357,"_186":588,"_20":67},"Memoize Context",{"_313":314,"_186":590,"_20":75},"Provider Component",{"_313":331,"_186":592,"_20":83},"Split Context",[594,595,596],{"_313":357,"_186":588,"_20":63},{"_313":314,"_186":590,"_20":71},{"_313":331,"_186":592,"_20":79},[598,601,604],{"_313":357,"_186":588,"_20":63,"_310":599,"_348":600},{"_20":63,"_186":588},{"_20":67,"_186":588},{"_313":314,"_186":590,"_20":71,"_310":602,"_348":603},{"_20":71,"_186":590},{"_20":75,"_186":590},{"_313":331,"_186":592,"_20":79,"_310":605,"_348":606},{"_20":79,"_186":592},{"_20":83,"_186":592},{"_311":331,"_186":608,"_548":609,"_560":612,"_567":614},"Concurrent Rendering",[610],{"_313":357,"_186":611,"_20":91},"useDeferredValue + memo",[613],{"_313":357,"_186":611,"_20":87},[615],{"_313":357,"_186":611,"_20":87,"_310":616,"_348":617},{"_20":87,"_186":611},{"_20":91,"_186":611},{"_311":339,"_186":619,"_548":620,"_560":627,"_567":631},"Code Splitting",[621,623,625],{"_313":357,"_186":622,"_20":99},"lazy",{"_313":314,"_186":624,"_20":107},"Eager Loading",{"_313":331,"_186":626,"_20":115},"Transitions",[628,629,630],{"_313":357,"_186":622,"_20":95},{"_313":314,"_186":624,"_20":103},{"_313":331,"_186":626,"_20":111},[632,635,638],{"_313":357,"_186":622,"_20":95,"_310":633,"_348":634},{"_20":95,"_186":622},{"_20":99,"_186":622},{"_313":314,"_186":624,"_20":103,"_310":636,"_348":637},{"_20":103,"_186":624},{"_20":107,"_186":624},{"_313":331,"_186":626,"_20":111,"_310":639,"_348":640},{"_20":111,"_186":626},{"_20":115,"_186":626},{"_311":312,"_186":642,"_548":643,"_560":650,"_567":654},"Expensive Calculations",[644,646,648],{"_313":357,"_186":645,"_20":123},"useMemo",{"_313":314,"_186":647,"_20":131},"Web Worker",{"_313":331,"_186":649,"_20":139},"Async Results",[651,652,653],{"_313":357,"_186":645,"_20":119},{"_313":314,"_186":647,"_20":127},{"_313":331,"_186":649,"_20":135},[655,658,661],{"_313":357,"_186":645,"_20":119,"_310":656,"_348":657},{"_20":119,"_186":645},{"_20":123,"_186":645},{"_313":314,"_186":647,"_20":127,"_310":659,"_348":660},{"_20":127,"_186":647},{"_20":131,"_186":647},{"_313":331,"_186":649,"_20":135,"_310":662,"_348":663},{"_20":135,"_186":649},{"_20":139,"_186":649},{"_311":665,"_186":666,"_548":667,"_560":674,"_567":679},6,"Optimize Rendering",[668,670,672],{"_313":357,"_186":669,"_20":147},"Component Memoization",{"_313":314,"_186":671,"_20":155},"Custom Comparator",{"_313":331,"_186":673,"_20":163},"Primitive Values",[675,676,677],{"_313":357,"_186":669,"_20":143},{"_313":314,"_186":671,"_20":151},{"_313":331,"_186":678,"_20":159},"Primitives",[680,683,686],{"_313":357,"_186":669,"_20":143,"_310":681,"_348":682},{"_20":143,"_186":669},{"_20":147,"_186":669},{"_313":314,"_186":671,"_20":151,"_310":684,"_348":685},{"_20":151,"_186":671},{"_20":155,"_186":671},{"_313":331,"_186":678,"_20":159,"_310":687,"_348":688},{"_20":159,"_186":678},{"_20":163,"_186":673},{"_311":690,"_186":691,"_548":692,"_560":695,"_567":697},7,"Windowing",[693],{"_313":357,"_186":694,"_20":171},"Virtualizer",[696],{"_313":357,"_186":694,"_20":167},[698],{"_313":357,"_186":694,"_20":167,"_310":699,"_348":700},{"_20":167,"_186":694},{"_20":171,"_186":694},"playground",{"_703":-5,"_311":-2,"_313":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_707":708,"_242":187,"_230":709,"_837":838,"_839":840,"_841":842,"_846":847,"_852":853},"articleId","workshop-react-performance-2-finished",{"_22":710,"_311":314,"_711":712,"_186":585,"_713":714,"_715":716,"_717":718,"_720":721,"_567":723,"_560":805,"_548":821},"/myapp/workshop-content/exercises/02.context","dirName","02.context","instructionsCode","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var m=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),C=(a,e)=>{for(var r in e)s(a,r,{get:e[r],enumerable:!0})},c=(a,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of v(e))!u.call(a,l)&&l!==r&&s(a,l,{get:()=>e[l],enumerable:!(o=b(e,l))||o.enumerable});return a};var x=(a,e,r)=>(r=a!=null?p(y(a)):{},c(e||!a||!a.__esModule?s(r,\"default\",{value:a,enumerable:!0}):r,a)),k=a=>c(s({},\"__esModule\",{value:!0}),a);var i=m((w,t)=>{t.exports=_jsx_runtime});var g={};C(g,{default:()=>h,frontmatter:()=>E});var n=x(i()),E=void 0;function d(a){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components},{EpicVideo:r}=e;return r||A(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Optimize Context\"}),`\n`,(0,n.jsx)(r,{url:\"https://www.epicreact.dev/workshops/react-performance/intro-to-optimize-context\"}),`\n`,(0,n.jsx)(e.p,{children:`The way that context works is that whenever the provided value changes from one\nrender to another, it triggers a re-render of all the consuming components\n(which will re-render whether or not they're memoized).`}),`\n`,(0,n.jsx)(e.p,{children:\"So take this 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:\"type\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountContextValue\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"readonly\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"number\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Dispatch\"}),\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"SetStateAction\"}),\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"number\"}),\">>]\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"CountContext\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createContext\"}),\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountContextValue\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"null\"}),\">(\",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"CountProvider\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\") {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"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\":\"6\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"value\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"count\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setCount\"}),\"]\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountContext\"}),\" \",(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:\"value\"}),(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(--base0E)\"},children:\"...\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Every time the \",(0,n.jsx)(e.code,{children:\"\"}),\" is re-rendered, the \",(0,n.jsx)(e.code,{children:\"value\"}),` is brand new, so\neven though the `,(0,n.jsx)(e.code,{children:\"count\"}),` value itself may stay the same, all component consumers\nwill be re-rendered.`]}),`\n`,(0,n.jsx)(e.p,{children:\"This can be problematic in certain scenarios.\"}),`\n`,(0,n.jsx)(e.p,{children:`The quick and easy solution to this problem is to memoize the value that you\nprovide to the context provider:`}),`\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:\"type\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountContextValue\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"readonly\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"number\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Dispatch\"}),\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"SetStateAction\"}),\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"number\"}),\">>]\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"CountContext\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createContext\"}),\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountContextValue\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"null\"}),\">(\",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"CountProvider\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\") {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"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-highlight\":\"true\",\"data-line-number\":\"6\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"value\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useMemo\"}),\"(() \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" [\",(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(--base08)\"},children:\"count\"}),\"])\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"CountContext\"}),\" \",(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:\"value\"}),(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(--base0E)\"},children:\"...\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[`By memoizing the value, you're ensuring that the value is only re-created when\nthe `,(0,n.jsx)(e.code,{children:\"count\"}),` value changes. As a result, the consuming components will only\nrerender when the `,(0,n.jsx)(e.code,{children:\"count\"}),\" value changes.\"]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function A(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(g);})();\n;return Component;","finishedCode","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var l=(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 x(t))!w.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(h(e)):{},s(t||!e||!e.__esModule?i(o,\"default\",{value:e,enumerable:!0}):o,e)),k=e=>s(i({},\"__esModule\",{value:!0}),e);var p=l((E,a)=>{a.exports=_jsx_runtime});var y={};_(y,{default:()=>m,frontmatter:()=>b});var n=j(p()),b=void 0;function d(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||g(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"Optimize Context\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-performance/dad-joke-break-optimize-context\"}),`\n`,(0,n.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work! You now have some great context optimizations in your back\npocket to use whenever you run into performance problems (and not before!!).`})]})}function m(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}function g(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(y);})();\n;return Component;","instructionsEpicVideoEmbeds",[719],"https://www.epicreact.dev/workshops/react-performance/intro-to-optimize-context","finishedEpicVideoEmbeds",[722],"https://www.epicreact.dev/workshops/react-performance/dad-joke-break-optimize-context",[724,757,781],{"_313":357,"_310":725,"_348":745},{"_20":63,"_186":588,"_711":726,"_22":64,"_24":65,"_713":727,"_728":729,"_731":732,"_739":740,"_742":743,"_311":314,"_313":357,"_9":310,"_744":67},"01.problem.memo-context","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var y=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var t in e)i(n,t,{get:e[t],enumerable:!0})},d=(n,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let c of f(e))!x.call(n,c)&&c!==t&&i(n,c,{get:()=>e[c],enumerable:!(r=m(e,c))||r.enumerable});return n};var g=(n,e,t)=>(t=n!=null?u(w(n)):{},d(e||!n||!n.__esModule?i(t,\"default\",{value:n,enumerable:!0}):t,n)),_=n=>d(i({},\"__esModule\",{value:!0}),n);var s=y((M,h)=>{h.exports=_jsx_runtime});var F={};v(F,{default:()=>p,frontmatter:()=>k});var o=g(s()),k=void 0;function a(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:t,PrevDiffLink:r}=e;return t||l(\"EpicVideo\",!0),r||l(\"PrevDiffLink\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Memoize Context\"}),`\n`,(0,o.jsx)(t,{url:\"https://www.epicreact.dev/workshops/react-performance/memoize-context\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F9DD}\\u200D\\u2642\\uFE0F I've taken the \",(0,o.jsx)(e.code,{children:\"name\"}),\" and \",(0,o.jsx)(e.code,{children:\"color\"}),` state and combined them into a single\n`,(0,o.jsx)(e.code,{children:\"FooterContext\"}),\" as well as extracted some of the UI into a \",(0,o.jsx)(e.code,{children:\"FooterSetters\"}),`\ncomponent (for all the stuff that allows you to control the `,(0,o.jsx)(e.code,{children:\"Footer\"}),`). Feel free\nto `,(0,o.jsx)(r,{children:\"check my work\"}),` to inspect the changes if you\nwant.`]}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Great, now if you pull up the React DevTools, you'll notice all the\ncomponents rerender whenever you change the counter in the App component. This\nis happening because the `,(0,o.jsx)(e.code,{children:\"FooterContext\"}),\" is a new \",(0,o.jsx)(e.code,{children:\"value\"}),` prop every\nrender.`]}),`\n`,(0,o.jsxs)(e.p,{children:[\"So if you memoize the \",(0,o.jsx)(e.code,{children:\"value\"}),\" prop with \",(0,o.jsx)(e.code,{children:\"useMemo\"}),`, you can prevent the\nunnecessary rerender of consuming components when the `,(0,o.jsx)(e.code,{children:\"value\"}),` prop doesn't\nchange.`]})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(a,{...n})}):a(n)}function l(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(F);})();\n;return Component;","epicVideoEmbeds",[730],"https://www.epicreact.dev/workshops/react-performance/memoize-context","test",{"_9":733,"_734":735,"_736":737},"browser","pathname","/app/02.01.problem/test/","testFiles",[738],"memo-context.test.ts","dev",{"_9":733,"_734":741},"/app/02.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/02.context/01.problem.memo-context?view=editor&title=Memoize+Context+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":67,"_186":588,"_711":746,"_22":68,"_24":69,"_713":747,"_728":748,"_731":750,"_739":753,"_742":755,"_311":314,"_313":357,"_9":348,"_756":-5},"01.solution.memo-context","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var w=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),_=(e,n)=>{for(var o in n)i(e,o,{get:n[o],enumerable:!0})},s=(e,n,o,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of x(n))!h.call(e,r)&&r!==o&&i(e,r,{get:()=>n[r],enumerable:!(c=l(n,r))||c.enumerable});return e};var g=(e,n,o)=>(o=e!=null?u(f(e)):{},s(n||!e||!e.__esModule?i(o,\"default\",{value:e,enumerable:!0}):o,e)),j=e=>s(i({},\"__esModule\",{value:!0}),e);var d=w((k,p)=>{p.exports=_jsx_runtime});var b={};_(b,{default:()=>m,frontmatter:()=>y});var t=g(d()),y=void 0;function a(e){let n={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=n;return o||M(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{children:\"Memoize Context\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-performance/memoize-context/solution\"}),`\n`,(0,t.jsx)(n.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Super duper! You've been able to keep our components rerendering only when\nnecessary again. Well done.`})]})}function m(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(a,{...e})}):a(e)}function M(e,n){throw new Error(\"Expected \"+(n?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(b);})();\n;return Component;",[749],"https://www.epicreact.dev/workshops/react-performance/memoize-context/solution",{"_9":733,"_734":751,"_736":752},"/app/02.01.solution/test/",[738],{"_9":733,"_734":754},"/app/02.01.solution/","https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/02.context/01.solution.memo-context?view=editor&title=Memoize+Context+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_313":314,"_310":758,"_348":770},{"_20":71,"_186":590,"_711":759,"_22":72,"_24":73,"_713":760,"_728":761,"_731":763,"_739":767,"_742":769,"_311":314,"_313":314,"_9":310,"_744":75},"02.problem.provider-component","var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var t in e)c(n,t,{get:e[t],enumerable:!0})},d=(n,e,t,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!g.call(n,r)&&r!==t&&c(n,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return n};var v=(n,e,t)=>(t=n!=null?p(u(n)):{},d(e||!n||!n.__esModule?c(t,\"default\",{value:n,enumerable:!0}):t,n)),y=n=>d(c({},\"__esModule\",{value:!0}),n);var a=w((b,h)=>{h.exports=_jsx_runtime});var j={};x(j,{default:()=>l,frontmatter:()=>F});var o=v(a()),F=void 0;function s(n){let e={code:\"code\",h1:\"h1\",p:\"p\",...n.components},{EpicVideo:t}=e;return t||_(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Provider Component\"}),`\n`,(0,o.jsx)(t,{url:\"https://www.epicreact.dev/workshops/react-performance/provider-component\"}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} We've noticed that when we change some of the Footer context stuff, we're\nactually rerendering the `,(0,o.jsx)(e.code,{children:\"App\"}),\" and \",(0,o.jsx)(e.code,{children:\"Main\"}),` components even though those don't\nhave anything to do with the Footer context.`]}),`\n`,(0,o.jsxs)(e.p,{children:[`So we're going to take advantage of React's optimizations for reusing elements\nby creating a `,(0,o.jsx)(e.code,{children:\"FooterProvider\"}),\" component and accepting \",(0,o.jsx)(e.code,{children:\"children\"}),`. That way\nwhenever the Footer context changes, only the `,(0,o.jsx)(e.code,{children:\"FooterProvider\"}),` component and its\nconsumers will rerender. React will be able to reuse the `,(0,o.jsx)(e.code,{children:\"children\"}),` element\nsince that doesn't change when the Footer's state changes.`]}),`\n`,(0,o.jsxs)(e.p,{children:[`When you're finished, changing the footer color of setting the footer name\nshould not cause the `,(0,o.jsx)(e.code,{children:\"App\"}),\" or \",(0,o.jsx)(e.code,{children:\"Main\"}),\" components to rerender.\"]})]})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(s,{...n})}):s(n)}function _(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(j);})();\n;return Component;",[762],"https://www.epicreact.dev/workshops/react-performance/provider-component",{"_9":733,"_734":764,"_736":765},"/app/02.02.problem/test/",[766],"provider.test.ts",{"_9":733,"_734":768},"/app/02.02.problem/","https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/02.context/02.problem.provider-component?view=editor&title=Provider+Component+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":75,"_186":590,"_711":771,"_22":76,"_24":77,"_713":772,"_728":773,"_731":775,"_739":778,"_742":780,"_311":314,"_313":314,"_9":348,"_756":-5},"02.solution.provider-component","var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},a=(t,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of l(e))!x.call(t,r)&&r!==n&&i(t,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return t};var _=(t,e,n)=>(n=t!=null?h(f(t)):{},a(e||!t||!t.__esModule?i(n,\"default\",{value:t,enumerable:!0}):n,t)),j=t=>a(i({},\"__esModule\",{value:!0}),t);var m=w((E,c)=>{c.exports=_jsx_runtime});var g={};y(g,{default:()=>d,frontmatter:()=>k});var o=_(m()),k=void 0;function p(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||v(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Provider Component\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-performance/provider-component/solution\"}),`\n`,(0,o.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great work! You've eliminated more unnecessary rerenders!\"}),`\n`,(0,o.jsx)(e.p,{children:`\\u{1F989} This is a really common pattern in the React community. It's kind of natural.\nIt just means that people are benefiting from the optimizations that React\nhas without thinking about it! However, this next one is not very common (and\nas is the case with most of these optimizations not normally necessary). But\nit's pretty handy in certain scenarios! Let's take a look.`})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.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 j(g);})();\n;return Component;",[774],"https://www.epicreact.dev/workshops/react-performance/provider-component/solution",{"_9":733,"_734":776,"_736":777},"/app/02.02.solution/test/",[766],{"_9":733,"_734":779},"/app/02.02.solution/","https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/02.context/02.solution.provider-component?view=editor&title=Provider+Component+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_313":331,"_310":782,"_348":794},{"_20":79,"_186":592,"_711":783,"_22":80,"_24":81,"_713":784,"_728":785,"_731":787,"_739":791,"_742":793,"_311":314,"_313":331,"_9":310,"_744":83},"03.problem.split-context","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var a in e)s(r,a,{get:e[a],enumerable:!0})},l=(r,e,a,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of v(e))!u.call(r,t)&&t!==a&&s(r,t,{get:()=>e[t],enumerable:!(o=b(e,t))||o.enumerable});return r};var x=(r,e,a)=>(a=r!=null?p(m(r)):{},l(e||!r||!r.__esModule?s(a,\"default\",{value:r,enumerable:!0}):a,r)),w=r=>l(s({},\"__esModule\",{value:!0}),r);var i=y((D,c)=>{c.exports=_jsx_runtime});var S={};f(S,{default:()=>h,frontmatter:()=>g});var n=x(i()),g=void 0;function d(r){let e={code:\"code\",em:\"em\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...r.components},{EpicVideo:a}=e;return a||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Split Context\"}),`\n`,(0,n.jsx)(a,{url:\"https://www.epicreact.dev/workshops/react-performance/split-context\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Something you may have noticed is that the \",(0,n.jsx)(e.code,{children:\"FooterSetters\"}),` component is\nrerendering whenever the footer state changes, but that component doesn't\nactually depend on the footer state at all. All it cares about is the setter\nfunctions which never change!`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Let's assume that \",(0,n.jsx)(e.code,{children:\"FooterSetters\"}),` is an expensive component to render. How could\nwe prevent it from rerendering unnecessarily when the footer state changes?`]}),`\n`,(0,n.jsx)(e.p,{children:`How about you split the context into two separate contexts: one for the state\nand one for the setters. 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(--base0D)\"},children:\"function\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"SomeProvider\"}),\"() {\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setState\"}),\"] \",(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\":\"3\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setters\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useMemo\"}),\"(() \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" ({ \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setState\"}),\" }), [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"setState\"}),\"])\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"stateValue\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useMemo\"}),\"(() \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" ({ \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\" }), [\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\"])\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",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\":\"6\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"StateContext\"}),\" \",(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:\"stateValue\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"SettersContext\"}),\" \",(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:\"setters\"}),(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:\"children\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t)\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"}\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"This way, \",(0,n.jsx)(e.code,{children:\"FooterSetters\"}),` can consume only the setters\n(which never change)!`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Give that a shot in this exercise (and for extra credit you can also \",(0,n.jsx)(e.code,{children:\"memo\"}),`-ize\nthe `,(0,n.jsx)(e.code,{children:\"FooterSetters\"}),\" component and it will \",(0,n.jsx)(e.em,{children:\"never\"}),\" rerender!).\"]}),`\n`,(0,n.jsx)(e.p,{children:`This is going to require a fair bit of refactoring, but it should be pretty\nquick. Make sure you check out how components rerender in the React DevTools!`})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}function k(r,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+r+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(S);})();\n;return Component;",[786],"https://www.epicreact.dev/workshops/react-performance/split-context",{"_9":733,"_734":788,"_736":789},"/app/02.03.problem/test/",[790],"split.test.ts",{"_9":733,"_734":792},"/app/02.03.problem/","https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/02.context/03.problem.split-context?view=editor&title=Split+Context+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":83,"_186":592,"_711":795,"_22":84,"_24":85,"_713":796,"_728":797,"_731":799,"_739":802,"_742":804,"_311":314,"_313":331,"_9":348,"_756":-5},"03.solution.split-context","var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},i=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of f(t))!x.call(e,r)&&r!==o&&s(e,r,{get:()=>t[r],enumerable:!(c=h(t,r))||c.enumerable});return e};var g=(e,t,o)=>(o=e!=null?u(l(e)):{},i(t||!e||!e.__esModule?s(o,\"default\",{value:e,enumerable:!0}):o,e)),j=e=>i(s({},\"__esModule\",{value:!0}),e);var a=w((b,p)=>{p.exports=_jsx_runtime});var E={};_(E,{default:()=>m,frontmatter:()=>y});var n=g(a()),y=void 0;function d(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:\"Split Context\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-performance/split-context/solution\"}),`\n`,(0,n.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} You've done good work! When you've got a lot of components that only consume\nthe setters, this can be a good way to optimize those components.`})]})}function m(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(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 j(E);})();\n;return Component;",[798],"https://www.epicreact.dev/workshops/react-performance/split-context/solution",{"_9":733,"_734":800,"_736":801},"/app/02.03.solution/test/",[790],{"_9":733,"_734":803},"/app/02.03.solution/","https://stackblitz.com/github/epicweb-dev/react-performance/tree/main/exercises/02.context/03.solution.split-context?view=editor&title=Split+Context+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[806,811,816],{"_20":63,"_186":588,"_711":726,"_22":64,"_24":65,"_713":727,"_728":807,"_731":808,"_739":810,"_742":743,"_311":314,"_313":357,"_9":310,"_744":67},[730],{"_9":733,"_734":735,"_736":809},[738],{"_9":733,"_734":741},{"_20":71,"_186":590,"_711":759,"_22":72,"_24":73,"_713":760,"_728":812,"_731":813,"_739":815,"_742":769,"_311":314,"_313":314,"_9":310,"_744":75},[762],{"_9":733,"_734":764,"_736":814},[766],{"_9":733,"_734":768},{"_20":79,"_186":592,"_711":783,"_22":80,"_24":81,"_713":784,"_728":817,"_731":818,"_739":820,"_742":793,"_311":314,"_313":331,"_9":310,"_744":83},[786],{"_9":733,"_734":788,"_736":819},[790],{"_9":733,"_734":792},[822,827,832],{"_20":67,"_186":588,"_711":746,"_22":68,"_24":69,"_713":747,"_728":823,"_731":824,"_739":826,"_742":755,"_311":314,"_313":357,"_9":348,"_756":-5},[749],{"_9":733,"_734":751,"_736":825},[738],{"_9":733,"_734":754},{"_20":75,"_186":590,"_711":771,"_22":76,"_24":77,"_713":772,"_728":828,"_731":829,"_739":831,"_742":780,"_311":314,"_313":314,"_9":348,"_756":-5},[774],{"_9":733,"_734":776,"_736":830},[766],{"_9":733,"_734":779},{"_20":83,"_186":592,"_711":795,"_22":84,"_24":85,"_713":796,"_728":833,"_731":834,"_739":836,"_742":804,"_311":314,"_313":331,"_9":348,"_756":-5},[798],{"_9":733,"_734":800,"_736":835},[790],{"_9":733,"_734":803},"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%20Context","epicVideoInfosPromise",["P",840],"exerciseFinished",{"_843":844,"_24":845},"file","/myapp/workshop-content/exercises/02.context/FINISHED.mdx","exercises/02.context/FINISHED.mdx","prevStepLink",{"_848":849,"_850":851},"to","/exercise/02/03/solution","aria-label","Split Context (solution)","nextStepLink",{"_848":854,"_850":608},"/exercise/03","actionData","errors"]

02. Optimize Context/Elaboration