Context providers and consumers

Opening your lesson

State shared by distant components needs a clear owner. Context carries a value through the component tree without passing it through every intermediate component. It does not replace state: the provider still needs an update mechanism, and its consumers should render the current provided value. Keeping a second local copy in a consumer can leave that part of the screen behind.

You'll use a dispatch-window setting across two views of an operations desk. Change it from one control, verify both views, and reset it. The later tasks use fresh team names and window labels. Read those values from the fixture so the component handles a new schedule without a source change. Treat reset as a state transition with the same shared owner.

const WindowContext=createContext('');
function Header(){return <output aria-label="Header window">{useContext(WindowContext)}</output>}
function Summary(){return <output aria-label="Summary window">{useContext(WindowContext)}</output>}
function App(){const [value,setValue]=useState(f.primary);return <WindowContext.Provider value={value}><h1>{f.organization}</h1><Header/><Summary/><button onClick={()=>setValue(f.secondary)}>Switch window</button><button onClick={()=>setValue(f.primary)}>Reset window</button></WindowContext.Provider>}

Trace the state change and its visible boundary before building the transfer tasks.

Choose your character

Your Work Gym account