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...