How to use the useContext React hook

Check out my React hooks introduction first, if you’re new to them.

One React hook I sometimes use is useContext.

import React, { useContext } from 'react'

This hook is used in combination with the React Context API.

In particular, this hook allows us to get the current context value:

const value = useContext(MyContext)

which refers to the nearest <MyContext.Provider> component.

Calling useContext will also make sure the component rerenders when the context value changes.

I recommend you to read my Context API tutorial to know more about it.

More react tutorials:

• Can I use React hooks inside a conditional?
• Code Splitting in React
• React Router, how to get data from a dynamic route
• How to use the useMemo React hook
• React PropTypes
• A React simple app example: fetch GitHub users information via API
• How to fix the "cannot update a component while rendering a different component" error in React
• Introduction to Gatsby
• How to learn React