Context API for State
useContext, aur, useReducer, KO, COMBINE, KARKE, EK, "MINI-REDUX" PATTERN, BANAYA, JA, SAKTA, hai — GLOBAL, STATE, (jaise, AUTH, THEME, SHOPPING, CART) KO, EXTERNAL, LIBRARY, (Redux, Zustand) KE, BINA, HI, MANAGE, KIYA, JA, SAKTA, hai.
EK, CUSTOM, PROVIDER, COMPONENT, BANAYA, JAATA, hai, JO, STATE, aur, DISPATCH, FUNCTION, KO, Context, KE, THROUGH, EXPOSE, KARTA, hai — CUSTOM, HOOK, (jaise, useCart()) SE, COMPONENTS, EASILY, STATE, ACCESS, KAR, SAKTE, HAIN.
const CartContext = React.createContext();
function CartProvider({ children }) {
const [items, dispatch] = React.useReducer(cartReducer, []);
return (
<CartContext.Provider value={{ items, dispatch }}>
{children}
</CartContext.Provider>
);
}
function useCart() {
return React.useContext(CartContext);
}
// Kisi bhi component mein:
function CartBadge() {
const { items } = useCart();
return <span>{items.length} items</span>;
}- useContext + useReducer = "mini-Redux" pattern, external library ke, BINA
- Custom provider + custom hook (useCart) = CLEAN, API, components ke liye
- Large apps ke liye, Redux/Zustand, EXTRA, FEATURES (devtools, PERFORMANCE) DETE HAIN
EK, HI, BADE, Context, MEIN, SAB, STATE, RAKHNE, SE, POORA, SUBTREE, RE-RENDER, HOTA, hai, JAB, BHI, KISI, EK, PIECE, KA, CHANGE, HOTA, hai — STATE, aur, DISPATCH, KO, ALAG-ALAG, Contexts, MEIN, SPLIT, KARNA, (StateContext, DispatchContext), PERFORMANCE, IMPROVE, KAR, SAKTA, hai.
const StateContext = createContext();
const DispatchContext = createContext();
// Components jo, sirf, dispatch, karte hain, state, changes, PAR, RE-RENDER, NAHI, HONGEContext, NATIVELY, "SELECTORS" SUPPORT, NAHI, KARTA (jaise, Redux, karta hai) — EK, COMPONENT, JO, useContext() CALL, KARTA, hai, POORE, Context, VALUE, KE, KISI, BHI, CHANGE, PAR, RE-RENDER, HOGA, CHAHE, WOH, SIRF, EK, SPECIFIC, FIELD, HI, USE, KARE.