React Hooks: How to use the useContext React hook

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.


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.

Lessons in this unit:

0: Introduction
1: Introduction to React Hooks
2: How to use the useState React hook
3: useEffect React hook, how to use
4: ▶︎ How to use the useContext React hook
5: How to use the useReducer React hook
6: How to use the useCallback React hook
7: How to use the useMemo React hook
8: How to use the useRef React hook
9: Can I use React hooks inside a conditional?
10: Why does useEffect run two times?
11: Using useState with an object: how to update
12: How to reference a DOM element in React