P870:[{"_1183":79,"_1184":83,"_1185":1186},"app1","app2","diffPatch","diff --git a/index.tsx b/index.tsx\nindex e27df0d..c68f9dc 100644\n--- a/index.tsx\n+++ b/index.tsx\n@@ -1,47 +1,49 @@\n import { createContext, memo, use, useMemo, useState } from 'react'\n import * as ReactDOM from 'react-dom/client'\n \n-// 🐨 rename this to FooterStateContext\n-const FooterContext = createContext<{\n+const FooterStateContext = createContext<{\n \tcolor: string\n-\t// 🐨 move this to the new FooterDispatchContext\n-\tsetColor: (color: string) => void\n \tname: string\n-\t// 🐨 move this to the new FooterDispatchContext\n-\tsetName: (name: string) => void\n } | null>(null)\n-// 💯 If you want to be able to easily distinguish between the two providers in\n-// the react dev tools, add a .displayName property to the context object:\n-// 💰 FooterStateContext.displayName = 'FooterStateContext'\n+FooterStateContext.displayName = 'FooterStateContext'\n \n-// 🐨 create a FooterDispatchContext that has the setColor and setName properties\n+const FooterDispatchContext = createContext<{\n+\tsetColor: (color: string) => void\n+\tsetName: (name: string) => void\n+} | null>({\n+\tsetColor: () => {},\n+\tsetName: () => {},\n+})\n+FooterDispatchContext.displayName = 'FooterDispatchContext'\n \n function FooterProvider({ children }: { children: React.ReactNode }) {\n \tconst [color, setColor] = useState('black')\n \tconst [name, setName] = useState('')\n-\t// 🐨 split this value into two variables: footerStateValue and footerDispatchValue\n-\tconst value = useMemo(\n-\t\t() => ({ color, setColor, name, setName }),\n-\t\t[color, name],\n-\t)\n+\tconst footerStateValue = useMemo(() => ({ color, name }), [color, name])\n+\tconst footerDispatchValue = useMemo(() => ({ setColor, setName }), [])\n \treturn (\n-\t\t// 🐨 render both context providers here with the appropriate values\n-\t\t{children}\n+\t\t\n+\t\t\t\n+\t\t\t\t{children}\n+\t\t\t\n+\t\t\n \t)\n }\n \n-// 🐨 rename this to useFooterState and update the implementation\n-function useFooter() {\n-\tconst context = use(FooterContext)\n-\tif (!context) throw new Error('FooterContext not found')\n+function useFooterState() {\n+\tconst context = use(FooterStateContext)\n+\tif (!context) throw new Error('FooterStateContext not found')\n \treturn context\n }\n \n-// 🐨 create a useFooterDispatch function similar to the hook above\n+function useFooterDispatch() {\n+\tconst context = use(FooterDispatchContext)\n+\tif (!context) throw new Error('FooterDispatchContext not found')\n+\treturn context\n+}\n \n const Footer = memo(function FooterImpl() {\n-\t// 🐨 update this to useFooterState\n-\tconst { color, name } = useFooter()\n+\tconst { color, name } = useFooterState()\n \treturn (\n \t\t

02. Optimize Context/03. Split Context (🏁 solution)

Split Context