[{"data":1,"prerenderedAt":2119},["ShallowReactive",2],{"blog-\u002Fblog\u002Freact-context-api-guide":3},{"id":4,"title":5,"body":6,"description":2103,"difficulty":2104,"extension":2105,"framework":2106,"frameworkSlug":2107,"meta":2108,"navigation":161,"order":44,"path":2110,"qaPath":2111,"seo":2112,"stem":2113,"subtopic":2114,"topic":2115,"topicSlug":2116,"updated":2117,"__hash__":2118},"blog\u002Fblog\u002Freact-context-api-guide.md","React Context API — A Complete Guide",{"type":7,"value":8,"toc":2084},"minimark",[9,14,23,331,343,347,355,376,388,395,427,434,441,458,468,472,485,689,696,734,747,751,754,983,993,1053,1057,1064,1326,1330,1336,1593,1596,1600,1607,1774,1778,1867,1870,1883,1887,1893,2037,2041,2080],[10,11,13],"h2",{"id":12},"the-problem-context-solves","The problem Context solves",[15,16,17,18,22],"p",{},"Prop drilling — passing data through intermediate components that don't need it\n— becomes painful once your tree grows deep. The Context API is React's\nbuilt-in answer: ",[19,20,21],"strong",{},"share a value across a subtree without threading it through\nevery layer",".",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-jsx shiki shiki-themes github-light github-dark","\u002F\u002F Without Context — theme travels through every layer\n\u003CApp theme=\"dark\">\n  \u003CLayout theme=\"dark\">\n    \u003CSidebar theme=\"dark\">\n      \u003CButton theme=\"dark\" \u002F>    {\u002F* finally used here *\u002F}\n    \u003C\u002FSidebar>\n  \u003C\u002FLayout>\n\u003C\u002FApp>\n\n\u002F\u002F With Context — Button reads theme directly\nconst ThemeContext = createContext('light')\n\nfunction App() {\n  return (\n    \u003CThemeContext.Provider value=\"dark\">\n      \u003CLayout \u002F>                  {\u002F* no theme prop *\u002F}\n    \u003C\u002FThemeContext.Provider>\n  )\n}\n\nfunction Button() {\n  const theme = useContext(ThemeContext)\n  return \u003Cbutton className={theme}>Click\u003C\u002Fbutton>\n}\n","jsx","",[31,32,33,42,68,85,102,126,136,146,156,163,169,193,198,210,219,236,251,260,266,271,276,286,302,326],"code",{"__ignoreMap":29},[34,35,38],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"sJ8bj","\u002F\u002F Without Context — theme travels through every layer\n",[34,43,45,49,53,57,61,65],{"class":36,"line":44},2,[34,46,48],{"class":47},"sVt8B","\u003C",[34,50,52],{"class":51},"sj4cs","App",[34,54,56],{"class":55},"sScJk"," theme",[34,58,60],{"class":59},"szBVR","=",[34,62,64],{"class":63},"sZZnC","\"dark\"",[34,66,67],{"class":47},">\n",[34,69,71,74,77,79,81,83],{"class":36,"line":70},3,[34,72,73],{"class":47},"  \u003C",[34,75,76],{"class":51},"Layout",[34,78,56],{"class":55},[34,80,60],{"class":59},[34,82,64],{"class":63},[34,84,67],{"class":47},[34,86,88,91,94,96,98,100],{"class":36,"line":87},4,[34,89,90],{"class":47},"    \u003C",[34,92,93],{"class":51},"Sidebar",[34,95,56],{"class":55},[34,97,60],{"class":59},[34,99,64],{"class":63},[34,101,67],{"class":47},[34,103,105,108,111,113,115,117,120,123],{"class":36,"line":104},5,[34,106,107],{"class":47},"      \u003C",[34,109,110],{"class":51},"Button",[34,112,56],{"class":55},[34,114,60],{"class":59},[34,116,64],{"class":63},[34,118,119],{"class":47}," \u002F>    {",[34,121,122],{"class":40},"\u002F* finally used here *\u002F",[34,124,125],{"class":47},"}\n",[34,127,129,132,134],{"class":36,"line":128},6,[34,130,131],{"class":47},"    \u003C\u002F",[34,133,93],{"class":51},[34,135,67],{"class":47},[34,137,139,142,144],{"class":36,"line":138},7,[34,140,141],{"class":47},"  \u003C\u002F",[34,143,76],{"class":51},[34,145,67],{"class":47},[34,147,149,152,154],{"class":36,"line":148},8,[34,150,151],{"class":47},"\u003C\u002F",[34,153,52],{"class":51},[34,155,67],{"class":47},[34,157,159],{"class":36,"line":158},9,[34,160,162],{"emptyLinePlaceholder":161},true,"\n",[34,164,166],{"class":36,"line":165},10,[34,167,168],{"class":40},"\u002F\u002F With Context — Button reads theme directly\n",[34,170,172,175,178,181,184,187,190],{"class":36,"line":171},11,[34,173,174],{"class":59},"const",[34,176,177],{"class":51}," ThemeContext",[34,179,180],{"class":59}," =",[34,182,183],{"class":55}," createContext",[34,185,186],{"class":47},"(",[34,188,189],{"class":63},"'light'",[34,191,192],{"class":47},")\n",[34,194,196],{"class":36,"line":195},12,[34,197,162],{"emptyLinePlaceholder":161},[34,199,201,204,207],{"class":36,"line":200},13,[34,202,203],{"class":59},"function",[34,205,206],{"class":55}," App",[34,208,209],{"class":47},"() {\n",[34,211,213,216],{"class":36,"line":212},14,[34,214,215],{"class":59},"  return",[34,217,218],{"class":47}," (\n",[34,220,222,224,227,230,232,234],{"class":36,"line":221},15,[34,223,90],{"class":47},[34,225,226],{"class":51},"ThemeContext.Provider",[34,228,229],{"class":55}," value",[34,231,60],{"class":59},[34,233,64],{"class":63},[34,235,67],{"class":47},[34,237,239,241,243,246,249],{"class":36,"line":238},16,[34,240,107],{"class":47},[34,242,76],{"class":51},[34,244,245],{"class":47}," \u002F>                  {",[34,247,248],{"class":40},"\u002F* no theme prop *\u002F",[34,250,125],{"class":47},[34,252,254,256,258],{"class":36,"line":253},17,[34,255,131],{"class":47},[34,257,226],{"class":51},[34,259,67],{"class":47},[34,261,263],{"class":36,"line":262},18,[34,264,265],{"class":47},"  )\n",[34,267,269],{"class":36,"line":268},19,[34,270,125],{"class":47},[34,272,274],{"class":36,"line":273},20,[34,275,162],{"emptyLinePlaceholder":161},[34,277,279,281,284],{"class":36,"line":278},21,[34,280,203],{"class":59},[34,282,283],{"class":55}," Button",[34,285,209],{"class":47},[34,287,289,292,294,296,299],{"class":36,"line":288},22,[34,290,291],{"class":59},"  const",[34,293,56],{"class":51},[34,295,180],{"class":59},[34,297,298],{"class":55}," useContext",[34,300,301],{"class":47},"(ThemeContext)\n",[34,303,305,307,310,314,317,319,322,324],{"class":36,"line":304},23,[34,306,215],{"class":59},[34,308,309],{"class":47}," \u003C",[34,311,313],{"class":312},"s9eBZ","button",[34,315,316],{"class":55}," className",[34,318,60],{"class":59},[34,320,321],{"class":47},"{theme}>Click\u003C\u002F",[34,323,313],{"class":312},[34,325,67],{"class":47},[34,327,329],{"class":36,"line":328},24,[34,330,125],{"class":47},[15,332,333,335,336,338,339,342],{},[31,334,76],{}," and ",[31,337,93],{}," are completely unaware of ",[31,340,341],{},"theme",". Context jumps\nstraight from the Provider to the consumer.",[10,344,346],{"id":345},"the-three-building-blocks","The three building blocks",[348,349,351,352],"h3",{"id":350},"_1-createcontext","1. ",[31,353,354],{},"createContext",[24,356,358],{"className":26,"code":357,"language":28,"meta":29,"style":29},"const ThemeContext = createContext('light')\n",[31,359,360],{"__ignoreMap":29},[34,361,362,364,366,368,370,372,374],{"class":36,"line":37},[34,363,174],{"class":59},[34,365,177],{"class":51},[34,367,180],{"class":59},[34,369,183],{"class":55},[34,371,186],{"class":47},[34,373,189],{"class":63},[34,375,192],{"class":47},[15,377,378,379,382,383,387],{},"Creates a Context object. The argument is the ",[19,380,381],{},"default value"," — used only\nwhen a component reads the context ",[384,385,386],"em",{},"without"," any Provider above it. It's not\nthe initial value of the Provider; it's the fallback for orphaned consumers\n(useful in tests and Storybook).",[348,389,391,392],{"id":390},"_2-contextprovider","2. ",[31,393,394],{},"Context.Provider",[24,396,398],{"className":26,"code":397,"language":28,"meta":29,"style":29},"\u003CThemeContext.Provider value=\"dark\">\n  {children}\n\u003C\u002FThemeContext.Provider>\n",[31,399,400,414,419],{"__ignoreMap":29},[34,401,402,404,406,408,410,412],{"class":36,"line":37},[34,403,48],{"class":47},[34,405,226],{"class":51},[34,407,229],{"class":55},[34,409,60],{"class":59},[34,411,64],{"class":63},[34,413,67],{"class":47},[34,415,416],{"class":36,"line":44},[34,417,418],{"class":47},"  {children}\n",[34,420,421,423,425],{"class":36,"line":70},[34,422,151],{"class":47},[34,424,226],{"class":51},[34,426,67],{"class":47},[15,428,429,430,433],{},"Wraps a subtree and supplies a value. Every consumer inside the Provider\nreceives this value. The ",[31,431,432],{},"value"," prop is compared by reference — a new object\nreference triggers a re-render in all consumers.",[348,435,437,438],{"id":436},"_3-usecontext","3. ",[31,439,440],{},"useContext",[24,442,444],{"className":26,"code":443,"language":28,"meta":29,"style":29},"const theme = useContext(ThemeContext)\n",[31,445,446],{"__ignoreMap":29},[34,447,448,450,452,454,456],{"class":36,"line":37},[34,449,174],{"class":59},[34,451,56],{"class":51},[34,453,180],{"class":59},[34,455,298],{"class":55},[34,457,301],{"class":47},[15,459,460,461,463,464,467],{},"Reads the nearest Provider's value. If there's no Provider above, it returns\nthe ",[31,462,354],{}," default. This hook replaces the older ",[31,465,466],{},"Context.Consumer","\nrender-prop API entirely.",[10,469,471],{"id":470},"re-render-behaviour-the-detail-most-developers-miss","Re-render behaviour — the detail most developers miss",[15,473,474,484],{},[19,475,476,477,480,481,483],{},"Every component that calls ",[31,478,479],{},"useContext(MyContext)"," re-renders when the\nProvider's ",[31,482,432],{}," changes."," Intermediate components that don't consume the\ncontext are unaffected.",[24,486,488],{"className":26,"code":487,"language":28,"meta":29,"style":29},"const CountCtx = createContext(0)\n\nfunction Parent() {\n  const [count, setCount] = useState(0)\n  \u002F\u002F New object literal every render → all consumers re-render on each click\n  return (\n    \u003CCountCtx.Provider value={{ count, setCount }}>\n      \u003CMiddle \u002F>\n    \u003C\u002FCountCtx.Provider>\n  )\n}\n\nfunction Middle() {\n  \u002F\u002F Does NOT call useContext → NOT re-rendered when count changes\n  return \u003CConsumer \u002F>\n}\n\nfunction Consumer() {\n  const { count } = useContext(CountCtx)  \u002F\u002F re-renders on every count change\n  return \u003Cspan>{count}\u003C\u002Fspan>\n}\n",[31,489,490,508,512,521,551,556,562,576,586,594,598,602,606,615,620,631,635,639,648,670,685],{"__ignoreMap":29},[34,491,492,494,497,499,501,503,506],{"class":36,"line":37},[34,493,174],{"class":59},[34,495,496],{"class":51}," CountCtx",[34,498,180],{"class":59},[34,500,183],{"class":55},[34,502,186],{"class":47},[34,504,505],{"class":51},"0",[34,507,192],{"class":47},[34,509,510],{"class":36,"line":44},[34,511,162],{"emptyLinePlaceholder":161},[34,513,514,516,519],{"class":36,"line":70},[34,515,203],{"class":59},[34,517,518],{"class":55}," Parent",[34,520,209],{"class":47},[34,522,523,525,528,531,534,537,540,542,545,547,549],{"class":36,"line":87},[34,524,291],{"class":59},[34,526,527],{"class":47}," [",[34,529,530],{"class":51},"count",[34,532,533],{"class":47},", ",[34,535,536],{"class":51},"setCount",[34,538,539],{"class":47},"] ",[34,541,60],{"class":59},[34,543,544],{"class":55}," useState",[34,546,186],{"class":47},[34,548,505],{"class":51},[34,550,192],{"class":47},[34,552,553],{"class":36,"line":104},[34,554,555],{"class":40},"  \u002F\u002F New object literal every render → all consumers re-render on each click\n",[34,557,558,560],{"class":36,"line":128},[34,559,215],{"class":59},[34,561,218],{"class":47},[34,563,564,566,569,571,573],{"class":36,"line":138},[34,565,90],{"class":47},[34,567,568],{"class":51},"CountCtx.Provider",[34,570,229],{"class":55},[34,572,60],{"class":59},[34,574,575],{"class":47},"{{ count, setCount }}>\n",[34,577,578,580,583],{"class":36,"line":148},[34,579,107],{"class":47},[34,581,582],{"class":51},"Middle",[34,584,585],{"class":47}," \u002F>\n",[34,587,588,590,592],{"class":36,"line":158},[34,589,131],{"class":47},[34,591,568],{"class":51},[34,593,67],{"class":47},[34,595,596],{"class":36,"line":165},[34,597,265],{"class":47},[34,599,600],{"class":36,"line":171},[34,601,125],{"class":47},[34,603,604],{"class":36,"line":195},[34,605,162],{"emptyLinePlaceholder":161},[34,607,608,610,613],{"class":36,"line":200},[34,609,203],{"class":59},[34,611,612],{"class":55}," Middle",[34,614,209],{"class":47},[34,616,617],{"class":36,"line":212},[34,618,619],{"class":40},"  \u002F\u002F Does NOT call useContext → NOT re-rendered when count changes\n",[34,621,622,624,626,629],{"class":36,"line":221},[34,623,215],{"class":59},[34,625,309],{"class":47},[34,627,628],{"class":51},"Consumer",[34,630,585],{"class":47},[34,632,633],{"class":36,"line":238},[34,634,125],{"class":47},[34,636,637],{"class":36,"line":253},[34,638,162],{"emptyLinePlaceholder":161},[34,640,641,643,646],{"class":36,"line":262},[34,642,203],{"class":59},[34,644,645],{"class":55}," Consumer",[34,647,209],{"class":47},[34,649,650,652,655,657,660,662,664,667],{"class":36,"line":268},[34,651,291],{"class":59},[34,653,654],{"class":47}," { ",[34,656,530],{"class":51},[34,658,659],{"class":47}," } ",[34,661,60],{"class":59},[34,663,298],{"class":55},[34,665,666],{"class":47},"(CountCtx)  ",[34,668,669],{"class":40},"\u002F\u002F re-renders on every count change\n",[34,671,672,674,676,678,681,683],{"class":36,"line":273},[34,673,215],{"class":59},[34,675,309],{"class":47},[34,677,34],{"class":312},[34,679,680],{"class":47},">{count}\u003C\u002F",[34,682,34],{"class":312},[34,684,67],{"class":47},[34,686,687],{"class":36,"line":278},[34,688,125],{"class":47},[15,690,691,692,695],{},"The critical mistake: creating a new object literal in the Provider on every\nrender. Fix it with ",[31,693,694],{},"useMemo",":",[24,697,699],{"className":26,"code":698,"language":28,"meta":29,"style":29},"const value = useMemo(() => ({ count, setCount }), [count, setCount])\n\u003CCountCtx.Provider value={value}>\n",[31,700,701,721],{"__ignoreMap":29},[34,702,703,705,707,709,712,715,718],{"class":36,"line":37},[34,704,174],{"class":59},[34,706,229],{"class":51},[34,708,180],{"class":59},[34,710,711],{"class":55}," useMemo",[34,713,714],{"class":47},"(() ",[34,716,717],{"class":59},"=>",[34,719,720],{"class":47}," ({ count, setCount }), [count, setCount])\n",[34,722,723,725,727,729,731],{"class":36,"line":44},[34,724,48],{"class":47},[34,726,568],{"class":51},[34,728,229],{"class":55},[34,730,60],{"class":59},[34,732,733],{"class":47},"{value}>\n",[15,735,736,737,739,740,533,743,746],{},"If ",[31,738,432],{}," is a primitive (",[31,741,742],{},"string",[31,744,745],{},"number","), memoisation is unnecessary —\nReact compares primitives by value.",[10,748,750],{"id":749},"writing-a-custom-hook-to-wrap-usecontext","Writing a custom hook to wrap useContext",[15,752,753],{},"Exporting the raw Context object leaks implementation details and gives no\nerror guidance. Always wrap in a custom hook:",[24,755,757],{"className":26,"code":756,"language":28,"meta":29,"style":29},"\u002F\u002F auth\u002FAuthContext.jsx\n\nconst AuthContext = createContext(null)\n\nexport function AuthProvider({ children }) {\n  const [user, setUser] = useState(null)\n  const logout = useCallback(() => { setUser(null) }, [])\n\n  const value = useMemo(() => ({ user, setUser, logout }), [user, logout])\n\n  return \u003CAuthContext.Provider value={value}>{children}\u003C\u002FAuthContext.Provider>\n}\n\nexport function useAuth() {\n  const ctx = useContext(AuthContext)\n  if (!ctx) throw new Error('useAuth must be used inside AuthProvider')\n  return ctx\n}\n",[31,758,759,764,768,786,790,811,837,864,868,885,889,909,913,917,928,942,972,979],{"__ignoreMap":29},[34,760,761],{"class":36,"line":37},[34,762,763],{"class":40},"\u002F\u002F auth\u002FAuthContext.jsx\n",[34,765,766],{"class":36,"line":44},[34,767,162],{"emptyLinePlaceholder":161},[34,769,770,772,775,777,779,781,784],{"class":36,"line":70},[34,771,174],{"class":59},[34,773,774],{"class":51}," AuthContext",[34,776,180],{"class":59},[34,778,183],{"class":55},[34,780,186],{"class":47},[34,782,783],{"class":51},"null",[34,785,192],{"class":47},[34,787,788],{"class":36,"line":87},[34,789,162],{"emptyLinePlaceholder":161},[34,791,792,795,798,801,804,808],{"class":36,"line":104},[34,793,794],{"class":59},"export",[34,796,797],{"class":59}," function",[34,799,800],{"class":55}," AuthProvider",[34,802,803],{"class":47},"({ ",[34,805,807],{"class":806},"s4XuR","children",[34,809,810],{"class":47}," }) {\n",[34,812,813,815,817,820,822,825,827,829,831,833,835],{"class":36,"line":128},[34,814,291],{"class":59},[34,816,527],{"class":47},[34,818,819],{"class":51},"user",[34,821,533],{"class":47},[34,823,824],{"class":51},"setUser",[34,826,539],{"class":47},[34,828,60],{"class":59},[34,830,544],{"class":55},[34,832,186],{"class":47},[34,834,783],{"class":51},[34,836,192],{"class":47},[34,838,839,841,844,846,849,851,853,855,857,859,861],{"class":36,"line":138},[34,840,291],{"class":59},[34,842,843],{"class":51}," logout",[34,845,180],{"class":59},[34,847,848],{"class":55}," useCallback",[34,850,714],{"class":47},[34,852,717],{"class":59},[34,854,654],{"class":47},[34,856,824],{"class":55},[34,858,186],{"class":47},[34,860,783],{"class":51},[34,862,863],{"class":47},") }, [])\n",[34,865,866],{"class":36,"line":148},[34,867,162],{"emptyLinePlaceholder":161},[34,869,870,872,874,876,878,880,882],{"class":36,"line":158},[34,871,291],{"class":59},[34,873,229],{"class":51},[34,875,180],{"class":59},[34,877,711],{"class":55},[34,879,714],{"class":47},[34,881,717],{"class":59},[34,883,884],{"class":47}," ({ user, setUser, logout }), [user, logout])\n",[34,886,887],{"class":36,"line":165},[34,888,162],{"emptyLinePlaceholder":161},[34,890,891,893,895,898,900,902,905,907],{"class":36,"line":171},[34,892,215],{"class":59},[34,894,309],{"class":47},[34,896,897],{"class":51},"AuthContext.Provider",[34,899,229],{"class":55},[34,901,60],{"class":59},[34,903,904],{"class":47},"{value}>{children}\u003C\u002F",[34,906,897],{"class":51},[34,908,67],{"class":47},[34,910,911],{"class":36,"line":195},[34,912,125],{"class":47},[34,914,915],{"class":36,"line":200},[34,916,162],{"emptyLinePlaceholder":161},[34,918,919,921,923,926],{"class":36,"line":212},[34,920,794],{"class":59},[34,922,797],{"class":59},[34,924,925],{"class":55}," useAuth",[34,927,209],{"class":47},[34,929,930,932,935,937,939],{"class":36,"line":221},[34,931,291],{"class":59},[34,933,934],{"class":51}," ctx",[34,936,180],{"class":59},[34,938,298],{"class":55},[34,940,941],{"class":47},"(AuthContext)\n",[34,943,944,947,950,953,956,959,962,965,967,970],{"class":36,"line":238},[34,945,946],{"class":59},"  if",[34,948,949],{"class":47}," (",[34,951,952],{"class":59},"!",[34,954,955],{"class":47},"ctx) ",[34,957,958],{"class":59},"throw",[34,960,961],{"class":59}," new",[34,963,964],{"class":55}," Error",[34,966,186],{"class":47},[34,968,969],{"class":63},"'useAuth must be used inside AuthProvider'",[34,971,192],{"class":47},[34,973,974,976],{"class":36,"line":253},[34,975,215],{"class":59},[34,977,978],{"class":47}," ctx\n",[34,980,981],{"class":36,"line":262},[34,982,125],{"class":47},[15,984,985,986,989,990,992],{},"Consumers import ",[31,987,988],{},"useAuth()"," — no context object, no ",[31,991,783],{}," checks, a clear\nerror if used incorrectly:",[24,994,996],{"className":26,"code":995,"language":28,"meta":29,"style":29},"function ProfileMenu() {\n  const { user, logout } = useAuth()\n  return \u003Cbutton onClick={logout}>Sign out {user.name}\u003C\u002Fbutton>\n}\n",[31,997,998,1007,1029,1049],{"__ignoreMap":29},[34,999,1000,1002,1005],{"class":36,"line":37},[34,1001,203],{"class":59},[34,1003,1004],{"class":55}," ProfileMenu",[34,1006,209],{"class":47},[34,1008,1009,1011,1013,1015,1017,1020,1022,1024,1026],{"class":36,"line":44},[34,1010,291],{"class":59},[34,1012,654],{"class":47},[34,1014,819],{"class":51},[34,1016,533],{"class":47},[34,1018,1019],{"class":51},"logout",[34,1021,659],{"class":47},[34,1023,60],{"class":59},[34,1025,925],{"class":55},[34,1027,1028],{"class":47},"()\n",[34,1030,1031,1033,1035,1037,1040,1042,1045,1047],{"class":36,"line":70},[34,1032,215],{"class":59},[34,1034,309],{"class":47},[34,1036,313],{"class":312},[34,1038,1039],{"class":55}," onClick",[34,1041,60],{"class":59},[34,1043,1044],{"class":47},"{logout}>Sign out {user.name}\u003C\u002F",[34,1046,313],{"class":312},[34,1048,67],{"class":47},[34,1050,1051],{"class":36,"line":87},[34,1052,125],{"class":47},[10,1054,1056],{"id":1055},"splitting-contexts-for-performance","Splitting contexts for performance",[15,1058,1059,1060,1063],{},"If your context has frequently-changing state ",[384,1061,1062],{},"and"," stable callbacks, put them\nin separate contexts. Components that only dispatch won't re-render when state\nchanges.",[24,1065,1067],{"className":26,"code":1066,"language":28,"meta":29,"style":29},"const StateCtx    = createContext(null)\nconst DispatchCtx = createContext(null)\n\nfunction StoreProvider({ children }) {\n  const [state, dispatch] = useReducer(reducer, initialState)\n\n  return (\n    \u003CDispatchCtx.Provider value={dispatch}>   {\u002F* dispatch is stable *\u002F}\n      \u003CStateCtx.Provider value={state}>\n        {children}\n      \u003C\u002FStateCtx.Provider>\n    \u003C\u002FDispatchCtx.Provider>\n  )\n}\n\n\u002F\u002F Only re-renders when state changes\nfunction Display()  { return \u003Cspan>{useContext(StateCtx).count}\u003C\u002Fspan> }\n\n\u002F\u002F Never re-renders due to state changes (dispatch never changes)\nfunction IncrBtn()  {\n  const dispatch = useContext(DispatchCtx)\n  return \u003Cbutton onClick={() => dispatch({ type: 'inc' })}>+\u003C\u002Fbutton>\n}\n",[31,1068,1069,1087,1104,1108,1121,1145,1149,1155,1174,1188,1193,1202,1210,1214,1218,1222,1227,1257,1261,1266,1276,1290,1322],{"__ignoreMap":29},[34,1070,1071,1073,1076,1079,1081,1083,1085],{"class":36,"line":37},[34,1072,174],{"class":59},[34,1074,1075],{"class":51}," StateCtx",[34,1077,1078],{"class":59},"    =",[34,1080,183],{"class":55},[34,1082,186],{"class":47},[34,1084,783],{"class":51},[34,1086,192],{"class":47},[34,1088,1089,1091,1094,1096,1098,1100,1102],{"class":36,"line":44},[34,1090,174],{"class":59},[34,1092,1093],{"class":51}," DispatchCtx",[34,1095,180],{"class":59},[34,1097,183],{"class":55},[34,1099,186],{"class":47},[34,1101,783],{"class":51},[34,1103,192],{"class":47},[34,1105,1106],{"class":36,"line":70},[34,1107,162],{"emptyLinePlaceholder":161},[34,1109,1110,1112,1115,1117,1119],{"class":36,"line":87},[34,1111,203],{"class":59},[34,1113,1114],{"class":55}," StoreProvider",[34,1116,803],{"class":47},[34,1118,807],{"class":806},[34,1120,810],{"class":47},[34,1122,1123,1125,1127,1130,1132,1135,1137,1139,1142],{"class":36,"line":104},[34,1124,291],{"class":59},[34,1126,527],{"class":47},[34,1128,1129],{"class":51},"state",[34,1131,533],{"class":47},[34,1133,1134],{"class":51},"dispatch",[34,1136,539],{"class":47},[34,1138,60],{"class":59},[34,1140,1141],{"class":55}," useReducer",[34,1143,1144],{"class":47},"(reducer, initialState)\n",[34,1146,1147],{"class":36,"line":128},[34,1148,162],{"emptyLinePlaceholder":161},[34,1150,1151,1153],{"class":36,"line":138},[34,1152,215],{"class":59},[34,1154,218],{"class":47},[34,1156,1157,1159,1162,1164,1166,1169,1172],{"class":36,"line":148},[34,1158,90],{"class":47},[34,1160,1161],{"class":51},"DispatchCtx.Provider",[34,1163,229],{"class":55},[34,1165,60],{"class":59},[34,1167,1168],{"class":47},"{dispatch}>   {",[34,1170,1171],{"class":40},"\u002F* dispatch is stable *\u002F",[34,1173,125],{"class":47},[34,1175,1176,1178,1181,1183,1185],{"class":36,"line":158},[34,1177,107],{"class":47},[34,1179,1180],{"class":51},"StateCtx.Provider",[34,1182,229],{"class":55},[34,1184,60],{"class":59},[34,1186,1187],{"class":47},"{state}>\n",[34,1189,1190],{"class":36,"line":165},[34,1191,1192],{"class":47},"        {children}\n",[34,1194,1195,1198,1200],{"class":36,"line":171},[34,1196,1197],{"class":47},"      \u003C\u002F",[34,1199,1180],{"class":51},[34,1201,67],{"class":47},[34,1203,1204,1206,1208],{"class":36,"line":195},[34,1205,131],{"class":47},[34,1207,1161],{"class":51},[34,1209,67],{"class":47},[34,1211,1212],{"class":36,"line":200},[34,1213,265],{"class":47},[34,1215,1216],{"class":36,"line":212},[34,1217,125],{"class":47},[34,1219,1220],{"class":36,"line":221},[34,1221,162],{"emptyLinePlaceholder":161},[34,1223,1224],{"class":36,"line":238},[34,1225,1226],{"class":40},"\u002F\u002F Only re-renders when state changes\n",[34,1228,1229,1231,1234,1237,1240,1242,1244,1247,1249,1252,1254],{"class":36,"line":253},[34,1230,203],{"class":59},[34,1232,1233],{"class":55}," Display",[34,1235,1236],{"class":47},"()  { ",[34,1238,1239],{"class":59},"return",[34,1241,309],{"class":47},[34,1243,34],{"class":312},[34,1245,1246],{"class":47},">{",[34,1248,440],{"class":55},[34,1250,1251],{"class":47},"(StateCtx).count}\u003C\u002F",[34,1253,34],{"class":312},[34,1255,1256],{"class":47},"> }\n",[34,1258,1259],{"class":36,"line":262},[34,1260,162],{"emptyLinePlaceholder":161},[34,1262,1263],{"class":36,"line":268},[34,1264,1265],{"class":40},"\u002F\u002F Never re-renders due to state changes (dispatch never changes)\n",[34,1267,1268,1270,1273],{"class":36,"line":273},[34,1269,203],{"class":59},[34,1271,1272],{"class":55}," IncrBtn",[34,1274,1275],{"class":47},"()  {\n",[34,1277,1278,1280,1283,1285,1287],{"class":36,"line":278},[34,1279,291],{"class":59},[34,1281,1282],{"class":51}," dispatch",[34,1284,180],{"class":59},[34,1286,298],{"class":55},[34,1288,1289],{"class":47},"(DispatchCtx)\n",[34,1291,1292,1294,1296,1298,1300,1302,1305,1307,1309,1312,1315,1318,1320],{"class":36,"line":288},[34,1293,215],{"class":59},[34,1295,309],{"class":47},[34,1297,313],{"class":312},[34,1299,1039],{"class":55},[34,1301,60],{"class":59},[34,1303,1304],{"class":47},"{() ",[34,1306,717],{"class":59},[34,1308,1282],{"class":55},[34,1310,1311],{"class":47},"({ type: ",[34,1313,1314],{"class":63},"'inc'",[34,1316,1317],{"class":47}," })}>+\u003C\u002F",[34,1319,313],{"class":312},[34,1321,67],{"class":47},[34,1323,1324],{"class":36,"line":304},[34,1325,125],{"class":47},[10,1327,1329],{"id":1328},"context-combined-with-usereducer-lightweight-global-store","Context combined with useReducer — lightweight global store",[15,1331,1332,1335],{},[31,1333,1334],{},"useReducer"," in a Provider gives you a Redux-like dispatch pattern with no\nextra dependencies:",[24,1337,1339],{"className":26,"code":1338,"language":28,"meta":29,"style":29},"function reducer(state, action) {\n  switch (action.type) {\n    case 'SET_USER':  return { ...state, user: action.payload }\n    case 'LOGOUT':    return { ...state, user: null }\n    default:          return state\n  }\n}\n\nexport function AppProvider({ children }) {\n  const [state, dispatch] = useReducer(reducer, { user: null })\n  const value = useMemo(() => ({ state, dispatch }), [state])\n\n  return \u003CAppCtx.Provider value={value}>{children}\u003C\u002FAppCtx.Provider>\n}\n\n\u002F\u002F Consumers dispatch actions — same mental model as Redux\nfunction LogoutButton() {\n  const { dispatch } = useContext(AppCtx)\n  return \u003Cbutton onClick={() => dispatch({ type: 'LOGOUT' })}>Log out\u003C\u002Fbutton>\n}\n",[31,1340,1341,1360,1368,1389,1413,1426,1431,1435,1439,1454,1480,1497,1501,1520,1524,1528,1533,1542,1559,1589],{"__ignoreMap":29},[34,1342,1343,1345,1348,1350,1352,1354,1357],{"class":36,"line":37},[34,1344,203],{"class":59},[34,1346,1347],{"class":55}," reducer",[34,1349,186],{"class":47},[34,1351,1129],{"class":806},[34,1353,533],{"class":47},[34,1355,1356],{"class":806},"action",[34,1358,1359],{"class":47},") {\n",[34,1361,1362,1365],{"class":36,"line":44},[34,1363,1364],{"class":59},"  switch",[34,1366,1367],{"class":47}," (action.type) {\n",[34,1369,1370,1373,1376,1379,1381,1383,1386],{"class":36,"line":70},[34,1371,1372],{"class":59},"    case",[34,1374,1375],{"class":63}," 'SET_USER'",[34,1377,1378],{"class":47},":  ",[34,1380,1239],{"class":59},[34,1382,654],{"class":47},[34,1384,1385],{"class":59},"...",[34,1387,1388],{"class":47},"state, user: action.payload }\n",[34,1390,1391,1393,1396,1399,1401,1403,1405,1408,1410],{"class":36,"line":87},[34,1392,1372],{"class":59},[34,1394,1395],{"class":63}," 'LOGOUT'",[34,1397,1398],{"class":47},":    ",[34,1400,1239],{"class":59},[34,1402,654],{"class":47},[34,1404,1385],{"class":59},[34,1406,1407],{"class":47},"state, user: ",[34,1409,783],{"class":51},[34,1411,1412],{"class":47}," }\n",[34,1414,1415,1418,1421,1423],{"class":36,"line":104},[34,1416,1417],{"class":59},"    default",[34,1419,1420],{"class":47},":          ",[34,1422,1239],{"class":59},[34,1424,1425],{"class":47}," state\n",[34,1427,1428],{"class":36,"line":128},[34,1429,1430],{"class":47},"  }\n",[34,1432,1433],{"class":36,"line":138},[34,1434,125],{"class":47},[34,1436,1437],{"class":36,"line":148},[34,1438,162],{"emptyLinePlaceholder":161},[34,1440,1441,1443,1445,1448,1450,1452],{"class":36,"line":158},[34,1442,794],{"class":59},[34,1444,797],{"class":59},[34,1446,1447],{"class":55}," AppProvider",[34,1449,803],{"class":47},[34,1451,807],{"class":806},[34,1453,810],{"class":47},[34,1455,1456,1458,1460,1462,1464,1466,1468,1470,1472,1475,1477],{"class":36,"line":165},[34,1457,291],{"class":59},[34,1459,527],{"class":47},[34,1461,1129],{"class":51},[34,1463,533],{"class":47},[34,1465,1134],{"class":51},[34,1467,539],{"class":47},[34,1469,60],{"class":59},[34,1471,1141],{"class":55},[34,1473,1474],{"class":47},"(reducer, { user: ",[34,1476,783],{"class":51},[34,1478,1479],{"class":47}," })\n",[34,1481,1482,1484,1486,1488,1490,1492,1494],{"class":36,"line":171},[34,1483,291],{"class":59},[34,1485,229],{"class":51},[34,1487,180],{"class":59},[34,1489,711],{"class":55},[34,1491,714],{"class":47},[34,1493,717],{"class":59},[34,1495,1496],{"class":47}," ({ state, dispatch }), [state])\n",[34,1498,1499],{"class":36,"line":195},[34,1500,162],{"emptyLinePlaceholder":161},[34,1502,1503,1505,1507,1510,1512,1514,1516,1518],{"class":36,"line":200},[34,1504,215],{"class":59},[34,1506,309],{"class":47},[34,1508,1509],{"class":51},"AppCtx.Provider",[34,1511,229],{"class":55},[34,1513,60],{"class":59},[34,1515,904],{"class":47},[34,1517,1509],{"class":51},[34,1519,67],{"class":47},[34,1521,1522],{"class":36,"line":212},[34,1523,125],{"class":47},[34,1525,1526],{"class":36,"line":221},[34,1527,162],{"emptyLinePlaceholder":161},[34,1529,1530],{"class":36,"line":238},[34,1531,1532],{"class":40},"\u002F\u002F Consumers dispatch actions — same mental model as Redux\n",[34,1534,1535,1537,1540],{"class":36,"line":253},[34,1536,203],{"class":59},[34,1538,1539],{"class":55}," LogoutButton",[34,1541,209],{"class":47},[34,1543,1544,1546,1548,1550,1552,1554,1556],{"class":36,"line":262},[34,1545,291],{"class":59},[34,1547,654],{"class":47},[34,1549,1134],{"class":51},[34,1551,659],{"class":47},[34,1553,60],{"class":59},[34,1555,298],{"class":55},[34,1557,1558],{"class":47},"(AppCtx)\n",[34,1560,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579,1582,1585,1587],{"class":36,"line":268},[34,1562,215],{"class":59},[34,1564,309],{"class":47},[34,1566,313],{"class":312},[34,1568,1039],{"class":55},[34,1570,60],{"class":59},[34,1572,1304],{"class":47},[34,1574,717],{"class":59},[34,1576,1282],{"class":55},[34,1578,1311],{"class":47},[34,1580,1581],{"class":63},"'LOGOUT'",[34,1583,1584],{"class":47}," })}>Log out\u003C\u002F",[34,1586,313],{"class":312},[34,1588,67],{"class":47},[34,1590,1591],{"class":36,"line":273},[34,1592,125],{"class":47},[15,1594,1595],{},"This is the sweet spot before you need Redux's devtools or middleware.",[10,1597,1599],{"id":1598},"where-to-place-providers-in-the-tree","Where to place Providers in the tree",[15,1601,1602,1603,1606],{},"Place each Provider as ",[19,1604,1605],{},"low"," as possible while still wrapping all its\nconsumers. A Provider at the root causes its entire subtree to potentially\nre-render on every value change.",[24,1608,1610],{"className":26,"code":1609,"language":28,"meta":29,"style":29},"\u002F\u002F ❌ Modal state at root → App re-renders on every open\u002Fclose\nfunction App() {\n  const [open, setOpen] = useState(false)\n  return \u003CModalCtx.Provider value={{ open, setOpen }}>\u003CEverything \u002F>\u003C\u002FModalCtx.Provider>\n}\n\n\u002F\u002F ✅ Scoped to the checkout flow that actually uses it\nfunction CheckoutPage() {\n  const [open, setOpen] = useState(false)\n  return (\n    \u003CModalCtx.Provider value={{ open, setOpen }}>\n      \u003CCheckoutForm \u002F>\u003CConfirmModal \u002F>\n    \u003C\u002FModalCtx.Provider>\n  )\n}\n",[31,1611,1612,1617,1625,1652,1678,1682,1686,1691,1700,1724,1730,1743,1758,1766,1770],{"__ignoreMap":29},[34,1613,1614],{"class":36,"line":37},[34,1615,1616],{"class":40},"\u002F\u002F ❌ Modal state at root → App re-renders on every open\u002Fclose\n",[34,1618,1619,1621,1623],{"class":36,"line":44},[34,1620,203],{"class":59},[34,1622,206],{"class":55},[34,1624,209],{"class":47},[34,1626,1627,1629,1631,1634,1636,1639,1641,1643,1645,1647,1650],{"class":36,"line":70},[34,1628,291],{"class":59},[34,1630,527],{"class":47},[34,1632,1633],{"class":51},"open",[34,1635,533],{"class":47},[34,1637,1638],{"class":51},"setOpen",[34,1640,539],{"class":47},[34,1642,60],{"class":59},[34,1644,544],{"class":55},[34,1646,186],{"class":47},[34,1648,1649],{"class":51},"false",[34,1651,192],{"class":47},[34,1653,1654,1656,1658,1661,1663,1665,1668,1671,1674,1676],{"class":36,"line":87},[34,1655,215],{"class":59},[34,1657,309],{"class":47},[34,1659,1660],{"class":51},"ModalCtx.Provider",[34,1662,229],{"class":55},[34,1664,60],{"class":59},[34,1666,1667],{"class":47},"{{ open, setOpen }}>\u003C",[34,1669,1670],{"class":51},"Everything",[34,1672,1673],{"class":47}," \u002F>\u003C\u002F",[34,1675,1660],{"class":51},[34,1677,67],{"class":47},[34,1679,1680],{"class":36,"line":104},[34,1681,125],{"class":47},[34,1683,1684],{"class":36,"line":128},[34,1685,162],{"emptyLinePlaceholder":161},[34,1687,1688],{"class":36,"line":138},[34,1689,1690],{"class":40},"\u002F\u002F ✅ Scoped to the checkout flow that actually uses it\n",[34,1692,1693,1695,1698],{"class":36,"line":148},[34,1694,203],{"class":59},[34,1696,1697],{"class":55}," CheckoutPage",[34,1699,209],{"class":47},[34,1701,1702,1704,1706,1708,1710,1712,1714,1716,1718,1720,1722],{"class":36,"line":158},[34,1703,291],{"class":59},[34,1705,527],{"class":47},[34,1707,1633],{"class":51},[34,1709,533],{"class":47},[34,1711,1638],{"class":51},[34,1713,539],{"class":47},[34,1715,60],{"class":59},[34,1717,544],{"class":55},[34,1719,186],{"class":47},[34,1721,1649],{"class":51},[34,1723,192],{"class":47},[34,1725,1726,1728],{"class":36,"line":165},[34,1727,215],{"class":59},[34,1729,218],{"class":47},[34,1731,1732,1734,1736,1738,1740],{"class":36,"line":171},[34,1733,90],{"class":47},[34,1735,1660],{"class":51},[34,1737,229],{"class":55},[34,1739,60],{"class":59},[34,1741,1742],{"class":47},"{{ open, setOpen }}>\n",[34,1744,1745,1747,1750,1753,1756],{"class":36,"line":195},[34,1746,107],{"class":47},[34,1748,1749],{"class":51},"CheckoutForm",[34,1751,1752],{"class":47}," \u002F>\u003C",[34,1754,1755],{"class":51},"ConfirmModal",[34,1757,585],{"class":47},[34,1759,1760,1762,1764],{"class":36,"line":200},[34,1761,131],{"class":47},[34,1763,1660],{"class":51},[34,1765,67],{"class":47},[34,1767,1768],{"class":36,"line":212},[34,1769,265],{"class":47},[34,1771,1772],{"class":36,"line":221},[34,1773,125],{"class":47},[10,1775,1777],{"id":1776},"context-vs-external-stores","Context vs. external stores",[1779,1780,1781,1797],"table",{},[1782,1783,1784],"thead",{},[1785,1786,1787,1791,1794],"tr",{},[1788,1789,1790],"th",{},"Concern",[1788,1792,1793],{},"Context",[1788,1795,1796],{},"Redux \u002F Zustand",[1798,1799,1800,1812,1823,1834,1845,1856],"tbody",{},[1785,1801,1802,1806,1809],{},[1803,1804,1805],"td",{},"Setup",[1803,1807,1808],{},"Zero (built-in)",[1803,1810,1811],{},"Install + configure",[1785,1813,1814,1817,1820],{},[1803,1815,1816],{},"Re-render granularity",[1803,1818,1819],{},"All consumers of the context",[1803,1821,1822],{},"Per-selector",[1785,1824,1825,1828,1831],{},[1803,1826,1827],{},"Devtools",[1803,1829,1830],{},"None",[1803,1832,1833],{},"Time-travel, action log",[1785,1835,1836,1839,1842],{},[1803,1837,1838],{},"Async middleware",[1803,1840,1841],{},"DIY",[1803,1843,1844],{},"Built-in",[1785,1846,1847,1850,1853],{},[1803,1848,1849],{},"Infrequent updates",[1803,1851,1852],{},"Excellent",[1803,1854,1855],{},"Overkill",[1785,1857,1858,1861,1864],{},[1803,1859,1860],{},"Many consumers, frequent updates",[1803,1862,1863],{},"Gets slow",[1803,1865,1866],{},"Handles well",[15,1868,1869],{},"Start with Context. Add a store when:",[1871,1872,1873,1877,1880],"ul",{},[1874,1875,1876],"li",{},"Many components subscribe and the context value changes frequently",[1874,1878,1879],{},"You need action logging or time-travel debugging",[1874,1881,1882],{},"You need async middleware without rolling your own",[10,1884,1886],{"id":1885},"testing-components-that-use-context","Testing components that use Context",[15,1888,1889,1890,1892],{},"Always render with the real Provider — never mock ",[31,1891,440],{}," directly:",[24,1894,1896],{"className":26,"code":1895,"language":28,"meta":29,"style":29},"function renderWithAuth(ui, user = null) {\n  return render(\n    \u003CAuthProvider initialUser={user}>\n      {ui}\n    \u003C\u002FAuthProvider>\n  )\n}\n\ntest('shows username when logged in', () => {\n  renderWithAuth(\u003CProfileMenu \u002F>, { name: 'Alice' })\n  expect(screen.getByText('Sign out Alice')).toBeInTheDocument()\n})\n",[31,1897,1898,1921,1931,1946,1951,1959,1963,1967,1971,1989,2008,2032],{"__ignoreMap":29},[34,1899,1900,1902,1905,1907,1910,1912,1914,1916,1919],{"class":36,"line":37},[34,1901,203],{"class":59},[34,1903,1904],{"class":55}," renderWithAuth",[34,1906,186],{"class":47},[34,1908,1909],{"class":806},"ui",[34,1911,533],{"class":47},[34,1913,819],{"class":806},[34,1915,180],{"class":59},[34,1917,1918],{"class":51}," null",[34,1920,1359],{"class":47},[34,1922,1923,1925,1928],{"class":36,"line":44},[34,1924,215],{"class":59},[34,1926,1927],{"class":55}," render",[34,1929,1930],{"class":47},"(\n",[34,1932,1933,1935,1938,1941,1943],{"class":36,"line":70},[34,1934,90],{"class":47},[34,1936,1937],{"class":51},"AuthProvider",[34,1939,1940],{"class":55}," initialUser",[34,1942,60],{"class":59},[34,1944,1945],{"class":47},"{user}>\n",[34,1947,1948],{"class":36,"line":87},[34,1949,1950],{"class":47},"      {ui}\n",[34,1952,1953,1955,1957],{"class":36,"line":104},[34,1954,131],{"class":47},[34,1956,1937],{"class":51},[34,1958,67],{"class":47},[34,1960,1961],{"class":36,"line":128},[34,1962,265],{"class":47},[34,1964,1965],{"class":36,"line":138},[34,1966,125],{"class":47},[34,1968,1969],{"class":36,"line":148},[34,1970,162],{"emptyLinePlaceholder":161},[34,1972,1973,1976,1978,1981,1984,1986],{"class":36,"line":158},[34,1974,1975],{"class":55},"test",[34,1977,186],{"class":47},[34,1979,1980],{"class":63},"'shows username when logged in'",[34,1982,1983],{"class":47},", () ",[34,1985,717],{"class":59},[34,1987,1988],{"class":47}," {\n",[34,1990,1991,1994,1997,2000,2003,2006],{"class":36,"line":165},[34,1992,1993],{"class":55},"  renderWithAuth",[34,1995,1996],{"class":47},"(\u003C",[34,1998,1999],{"class":51},"ProfileMenu",[34,2001,2002],{"class":47}," \u002F>, { name: ",[34,2004,2005],{"class":63},"'Alice'",[34,2007,1479],{"class":47},[34,2009,2010,2013,2016,2019,2021,2024,2027,2030],{"class":36,"line":171},[34,2011,2012],{"class":55},"  expect",[34,2014,2015],{"class":47},"(screen.",[34,2017,2018],{"class":55},"getByText",[34,2020,186],{"class":47},[34,2022,2023],{"class":63},"'Sign out Alice'",[34,2025,2026],{"class":47},")).",[34,2028,2029],{"class":55},"toBeInTheDocument",[34,2031,1028],{"class":47},[34,2033,2034],{"class":36,"line":195},[34,2035,2036],{"class":47},"})\n",[10,2038,2040],{"id":2039},"key-interview-points","Key interview points",[1871,2042,2043,2052,2060,2067,2070,2077],{},[1874,2044,2045,2047,2048,2051],{},[31,2046,354],{},"'s argument is the ",[19,2049,2050],{},"default"," — the fallback when no\nProvider exists, not the Provider's initial state.",[1874,2053,2054,2055,2057,2058,22],{},"A new object reference in ",[31,2056,432],{}," causes all consumers to re-render.\nMemoize with ",[31,2059,694],{},[1874,2061,2062,2063,2066],{},"Always expose Context through a custom hook (",[31,2064,2065],{},"useFoo",") rather than exporting\nthe raw Context object.",[1874,2068,2069],{},"Split state and dispatch into separate contexts if consumers need only one.",[1874,2071,2072,2073,2076],{},"Place Providers at the ",[19,2074,2075],{},"lowest ancestor"," that covers all consumers.",[1874,2078,2079],{},"Context is not a replacement for external stores — it's for infrequently\nchanging cross-cutting concerns.",[2081,2082,2083],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":29,"searchDepth":44,"depth":44,"links":2085},[2086,2087,2095,2096,2097,2098,2099,2100,2101,2102],{"id":12,"depth":44,"text":13},{"id":345,"depth":44,"text":346,"children":2088},[2089,2091,2093],{"id":350,"depth":70,"text":2090},"1. createContext",{"id":390,"depth":70,"text":2092},"2. Context.Provider",{"id":436,"depth":70,"text":2094},"3. useContext",{"id":470,"depth":44,"text":471},{"id":749,"depth":44,"text":750},{"id":1055,"depth":44,"text":1056},{"id":1328,"depth":44,"text":1329},{"id":1598,"depth":44,"text":1599},{"id":1776,"depth":44,"text":1777},{"id":1885,"depth":44,"text":1886},{"id":2039,"depth":44,"text":2040},"A complete guide to the React Context API — createContext, useContext, Providers, re-render patterns, multiple contexts, and when to use Context vs. Redux.","medium","md","React","react",{"subtopicSlug":2109},"context-api","\u002Fblog\u002Freact-context-api-guide","\u002Freact\u002Fstate-and-data-flow\u002Fcontext-api",{"title":5,"description":2103},"blog\u002Freact-context-api-guide","Context API","State and Data Flow","state-and-data-flow","2026-06-24","3MzyFjXCcvb02jHBSYTT97yL4vkaXLRD_WFX_QHXqVc",1782244083220]