Learn React Hooks

Using Hooks

A better way to use contexts is with the useContext Hook! That way, we can use context values like any other value, in a similar way to the useState Hook:

1. Edit src/Header.js. First, we import the useContext Hook from React, and the ThemeContext object from src/App.js:

import React, { useContext } from 'react'import { ThemeContext } from './App'

2. Then, we create our Header component, where we now define the useContext Hook:

const Header = ({ text }) => {    const theme = useContext(ThemeContext)

3. The rest of our component will be the same as before, except that, now, we can simply return our Header component, without using an additional component for the consumer:

    return <h1 style={{ color: theme.primaryColor }}>{text}</h1>