React context makes a provider’s value available to components beneath it. A common pattern puts state and the functions that change it in one value: a dark-mode provider can supply both `isDarkMode` and `toggleDarkMode` to buttons and other descendants. section 2.1.1
Two information channels in a composite component
A radio group provides its input name, selected value, and change callback to its options. Each option provides its own selected status to an optional details component. Separate contexts keep those two channels distinct; the details component renders its children only when its option is selected. section 2.2.4
Listing 2.13 The RadioGroup component and its composites
import { useState } from "react";
import { RadioGroupContext } from "./contexts";
import { Option } from "./Option";
import { Details } from "./Details";
export function RadioGroup({ children, name, onChange }) {
const [selectedValue, setSelectedValue] = useState("");
const handleChange = (value) => {
setSelectedValue(value);
if (onChange) {
onChange(value);
}
};
const contextValue = {
name,
selectedValue,
onChange: handleChange,
};
return (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
}}
>
<RadioGroupContext.Provider #1
value={contextValue} #1
> #1
{children} #1
</RadioGroupContext.Provider> #1
</div>
);
}
RadioGroup.Option = Option; #2
RadioGroup.Details = Details; #2
The RadioGroup listing shows state and a change handler assembled into a provider value around the group’s children. section 2.2.4
A context value is treated as a whole for rendering: when any property changes, every consumer of that context re-renders. Memoizing surrounding components can avoid unrelated parent-driven work, but it does not let a consumer subscribe to just one property. If that distinction matters, `use-context-selector` supplies its own `createContext` and `useContextSelector`; a consumer selects the property it needs. A stable toggle callback can then avoid re-rendering its consumer when only the dark-mode flag changes. section 2.1.1 section 2.1.3
For application data, a `DataProvider` can own `useState` values and action callbacks, persist changes to local storage with `useEffect`, and expose state and actions through context. A small `useData` hook calls `useContext`; narrower hooks retrieve the values or actions needed by presentation components. This keeps storage and manipulation together, but plain context retains the whole-value rendering trade-off. section 8.3.1 section 8.3.2 section 2.1.3
In TypeScript, `createContext(false)` infers `React.Context<boolean>`, and `useContext` returns the context’s value type without an extra type hint. For an object initially set to `null`, give `createContext` an explicit union type and use a custom hook to reject consumers outside the provider. React 19 also permits `<MyContext value={...}>` and `use(MyContext)`; the `.Provider` and `useContext` forms remain the syntax used in these examples. section 6.1.3 section 2.1.1
