Reducers وContext وملكية الحالة

import { useReducer } from "react";
export function reducer(count, action) { if (action.type === "add") return count + 1; if (action.type === "remove") return Math.max(0, count - 1); return count; }
export default function App() { const [count, dispatch] = useReducer(reducer, 0); return <main><h1>Seats: {count}</h1><button type="button" onClick={() => dispatch({ type: "add" })}>Add</button><button type="button" onClick={() => dispatch({ type: "remove" })}>Remove</button></main>; }

Initial: Seats: 0. Remove at zero: Seats: 0. Add: Seats: 1.

يفرض انتقال نقي الحد ولا يغير الحذف الصفر.

import { createContext, useContext } from "react";
const Theme = createContext("default");
function Badge() { return <p>Theme: {useContext(Theme)}</p>; }
export default function App() { return <main><h1>Scoped context</h1><Theme.Provider value="night"><Badge /></Theme.Provider></main>; }

Scoped context
Theme: night

يقدم المزود الأقرب night ولا يستخدم الافتراضي لوجوده.