How to use the useContext React hook

Jul 22, 2019

Learn how to use the useContext React hook to read the current value from the nearest Context Provider and re-render the component when that value changes.

~~~

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.

Tagged: React · All topics

~~~