useContext
useContext is a React Hook that reads the current value of a context from the nearest matching provider or its default value.
React Quickly, Second Edition
useContext is a React Hook that reads a context value or returns the context's default value when no provider is available.
- How it is used
- Avoids prop drilling by reading a provider’s value in descendant components.
- How deep it goes
- Works through context creation, provider placement, and value access, including the no-provider default; does not examine hook internals.
- Examples
- Uses a dashboard name and a website menu’s link list to show values read by descendants.
- What you can do after
- Apply it via React’s createContext and useContext to share values with descendants without passing them through intermediate components.
Read how React Quickly, Second Edition explains useContext →
React Hooks in Action: With Suspense and Concurrent Mode
useContext is a React Hook that reads the current value from a React context.
- How it is used
- Connects deeply nested components to shared values such as authenticated users, themes, or localization without intermediary props.
- How deep it goes
- Explains creation, Provider placement, consumption, defaults, re-renders, and context splitting, while deferring implementation internals.
- Examples
- Uses a bookings application where BookingDetails reads the current user and conditionally displays an edit button.
- What you can do after
- Apply it via React to provide shared values and read them in function components without threading props through unrelated layers.
Read how React Hooks in Action: With Suspense and Concurrent Mode explains useContext →
Related concepts
- React contextuses · React context is a mechanism for making values available to descendant components without explicitly passing them through intermediate components.
- 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.
- use-context-selectoralternative to · use-context-selector is a React library for consuming selected values from context while limiting updates to consumers whose selected values change.
- component re-renderingproduces · Component re-rendering is the repeated execution of a component’s rendering logic to produce updated user-interface output after relevant data changes.
- context valueuses · A context value is data supplied by a React context provider and made available to descendant components that consume that context.
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.