Implementing React Contexts
In the previous chapters, we learned about the State Hook, the Reducer Hook, and the Effect Hook. We developed a small blog application using these Hooks. As we noticed during the development of our blog app, we had to pass down the username
state from the App
component to the UserBar
component, and from the UserBar
component to the Login
, Register
, and Logout
components. To avoid having to pass down the state like this, we are now going to learn about React Context and Context Hooks.
We are going to begin by learning what React Context is, and what providers and consumers are, by implementing themes as an example for contexts. Then, we are going to use Hooks as a context consumer and discuss when contexts should be used. Finally, we are going to implement global state using contexts.
The following topics will be covered in this chapter:
- Introducing React Context
- Implementing themes via context
- Alternatives to contexts ...