Creating and Providing a Context
Create a React context with createContext, wrap the component tree in its Provider, and pass an initial value that all descendants can read.
The Prop Drilling Problem
Prop drilling occurs when data needs to pass through many layers of components that do not use it themselves — they only pass it down to their children. For example, a user's authentication status might need to reach a deeply nested profile icon component, requiring it to be threaded through five intermediate components. The Context API solves this.
What is the Context API?
React's Context API lets you create a data channel that any component in the tree can subscribe to, regardless of how deeply nested it is. A Provider component supplies the value, and any descendant can read it with the useContext hook — no props required. It is built into React with no extra library needed.
All lessons in this course
- Creating and Providing a Context
- Consuming Context with useContext
- A Theme Context with Dark Mode Toggle
- Avoiding Context Performance Issues