Context API
The Context API can be used to share data with multiple components, without having to pass data through props manually. For example, in some use cases, the Context API is ideal for theming, user language, authentication, etc.
createContext
To start with the Context API, the first thing we need to do is create a context using the createContext
function from React.
const ThemeContext = createContext('Dark');
The createContext
function accepts an initial value, but this initial value is not required.
Provider
The Provider
component is going to be used to wrap the components that are going to have access to our context.
<ThemeContext.Provider value={this.state.theme}>
...
</ThemeContext.Provider>
The Provider
component receives a prop called value
, which can be accessed from all the components that are wrapped inside Provider
, and it will be responsible to grant access to the context data.
Consumer
After you wrap all the components that are going to need access to the context with the Provider
component, you need to tell which component is going to consume that data.
The Consumer
component allows a React component to subscribe to the context changes. The component makes the data available using a render prop.
<ThemeContext.Consumer>
{(theme)=> <h1>Theme, {theme}</h1>}
</ThemeContext.Consumer>
useContext hook
The useContext
hook allows us to connect and consume a context. The useContext
hook receives a single argument, which is the context that you want to have access to.
const theme = useContext( ThemeContext );
The useContext
is way better and cleaner than the Consumer
component—we can easily understand what’s going on and increase the maintainability of our application.
For more reference see react guide for context