Introducing the React Context

Learn how React contexts are created using createContext and can be shared across components.

React context data structure

The context is modeled with a ReactContext data type holding a _currentValue value, and it also contains a component provider.

Press + to interact
 React context data structure
React context data structure

Creating and sharing context

We can create a context with the createContext function. For instance, if we want to share a piece of user information, we can create a UserContext and hold a defaultValue:

const UserContext = createContext(defaultValue)
export default UserContext

The created context can be shared via a JavaScript export statement, and this way, when any other file or component needs it, it can be imported.

The ...

Get hands-on with 1400+ tech skills courses.