React context
React context is a mechanism for making values available to descendant components without explicitly passing them through intermediate components.
React in Depth
React context is a mechanism for making a value available to components in a descendant component tree without passing it explicitly through every intermediate component.
- How it is used
- Distributes state, callbacks, and composite-component information to descendants through providers.
- How deep it goes
- Works through provider and consumer implementations, typing, and re-render costs; defers property-level subscriptions to an external selector library.
- Examples
- Implements a dark-mode toggle, nested radio-group contexts, and a goal-tracking data provider.
- What you can do after
- Build it from scratch with React providers and custom hooks, then evaluate whether selector-based consumption is worth its extra dependency.
React Hooks in Action: With Suspense and Concurrent Mode
A context object is a React object that identifies a shared value and provides the associated provider and default-value configuration.
- How it is used
- Shares rarely changing state across distant component branches without threading it through uninterested intermediaries.
- How deep it goes
- Explains creation, provider placement, consumption, defaults, multiple contexts, and re-render implications without descending into React internals.
- Examples
- Uses a bookings application, current-user selection, booking details, edit-button visibility, themes, languages, and multiple context providers.
- What you can do after
- Build it from scratch by creating a context, providing its value, consuming it with useContext, and choosing defaults or split providers.
Read how React Hooks in Action: With Suspense and Concurrent Mode explains React context →
React Quickly, Second Edition
React Context is a built-in React mechanism for making values available to descendant components without passing them explicitly through every intermediate component.
- How it is used
- Avoids prop drilling when descendant components need a value that intermediate components do not use.
- How deep it goes
- Works through context creation, provider placement, defaults, nearest-provider lookup, and two consumer forms; does not descend into React internals.
- Examples
- Shows a dashboard user button, buttons with different border widths, and an application menu whose links come from context.
- What you can do after
- Build it from scratch with createContext, Context.Provider, and useContext to share menu links across components.
Read how React Quickly, Second Edition explains React context →
Related concepts
- createContextproduced by · createContext is a library API function that creates a context object for providing and reading shared values among components.
- useContextused by · useContext is a React Hook that reads the current value of a context from the nearest matching provider or its default value.
- propalternative to · A React prop is an input value passed from a parent component to a child component to configure its rendering or behavior.
- React Context Consumerused by · A React Context Consumer is a component that reads a value from a React context and supplies it to rendering logic.
- compositionalternative to · Composition is a technique for combining simpler functions, components, or operations into a larger structure or behavior.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.