Introducing the React context
The context is modeled with a ReactContext data type holding a _currentValue value.
Figure 7.3 – React context data structure
We can create a context with the createContext function. For instance, if we want to share a piece of user info, 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 context allows us to provide the value to all consumers underneath via a Provider property:
import UserContext from './UserContext'
const Branch = () => {
return (
<UserContext.Provider value={...}>
...
</UserContext...