How to use the useContext React hook

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

The useContext hook lets a component read a value that a parent component placed in a React context, without passing it down as a prop through every level in between.

import React, { useContext } from 'react'

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

Why does context exist?

Say the top of your app knows the current theme, and a button 5 levels down needs it. Without context, every component in between must accept a theme prop and hand it to its child, even if it never uses it. This is called prop drilling.

Context skips the middlemen. A parent provides a value, and any component below can read it directly.

How to use it

First, create a context. This usually lives in its own file, so both sides can import it:

import { createContext } from 'react'

const ThemeContext = createContext('light')

The 'light' argument is the default value, used when no provider is found.

Then wrap a part of your tree with the provider, passing the value:

<ThemeContext.Provider value="dark">
  <Toolbar />
</ThemeContext.Provider>

Finally, call useContext in any component inside that tree to get the current context value:

const theme = useContext(ThemeContext)

which refers to the nearest <ThemeContext.Provider> component above in the tree. In this example, theme is 'dark'.

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

One pitfall

If there’s no provider above the component, useContext doesn’t throw. It silently returns the default value you passed to createContext().

That can hide bugs. You forget to wrap your app with the provider, everything renders with 'light', and no error points you at the cause. When you see the default value where you expect real data, check your providers first.

Also, every component reading a context re-renders when its value changes. Context works best for data that changes rarely, like the theme or the logged in user.

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