Simplify Context components with the useContext() Hook in React

useContext()

As a part of the relatively newer React approach of phasing out React class components, we need to learn the React hooks way to extend basic React functionality like Context or state. There is the added advantage that it also looks better.

In this project we have our App component, a Button component and a Header. All we're going to do is switch between light mode and dark mode in your application and React's Context API is a great way to achieve this.

When using the useContext() hook we don't have to extend class based components. Like in old method we need to create a pure React component to house our context provider and to instantiate the Context API. We use this component to then export the context and context provider anywhere else in the application.

Above we create an instance of React's context then assign it to the variable ThemeContext. We then create state on this component with the useState hook and store a variable theme in state. We also create a method on this functional component called toggleTheme() that switches the state of this component.

As in our class component Context example, we use the Provider property on our instantiated context ThemeContext and use its pre-built value prop to store the theme state variable and toggleTheme method from this functional component.

You can then provide that context to any other part of your application but typically you want it pretty high up in the component hierarchy so that more of your application has access to this context. We put it as high up as it gets in the index.js file. This is the same with our without useContext, since it's just importing the provider and wrapping the application in it.

Consuming Context with useContext()

Remember that the cool thing about Context is that you really don't need to pass anything down to lower level components with props as long as a provider for that context is positioned higher up the component tree. Since we've done that, our App component doesn't have any mention of context despite the fact that we know we're going to consume data from it lower down in Button and Header.

To actually consumer the context we go directly into the components where we want to use it. Let's start with Header since it's purely a UI change.

To consume our theme data from ThemeContext we simply bring in the useContext React hook then store the exported theme in a variable in the functional component, above the return. We import the ThemeContext and then can use useContext() to specify which context we want to use:

Since we've destructured the theme variable out, we can now use it like any other variable in our component. We will use it to send data about which theme (light or dark) we have stored in context for the app and change the className of the header accordingly. In our CSS the two classes have different colors associated with them:

In our Button component we also consume the theme context but will import a function into the button as well, to toggle the theme.

The button now toggles the theme throughout the application and we did it by using data from the themeContext functional component and a little useContext(). Pretty easy! I'm definitely loving React Hooks.

Thank you