Learn React Hooks

Using the useTheme Hook

Instead of using the useContext Hook with the ThemeContext, we can now use the useTheme Hook directly! If we end up changing the theming system later on, we can simply modify the useTheme Hook and our new system will be implemented throughout our application.

Let's refactor our app to use the useTheme Hook:

1. Edit src/Header.js and replace the existing imports with an import of the useTheme Hook. The ThemeContext and useContext imports can be removed:

import { useTheme } from './hooks'

2. Then, replace the current Context Hook definition with the useTheme Hook, as shown here:

    const { primaryColor } = useTheme()

3. Now edit src/post/Post.js and adjust the imports similarly there:

import { useTheme } from './hooks'