Context is Key: The useContext Hook and How to Utilize it

Why am I up this late? You ask yourself for the third time this week. Your computer screen glows dimly as your eyes are spared by your IDE’s dark theme, as well as the dark theme you painstakingly added to your app. You test your latest changes and then… BANG!

One of the several newly added components glows bright white. “But I added the theme tag to it! I can see it right there!” As you look over your code, you find yourself in a never-ending nest of components within components. Somewhere in this chain, you forgot to pass down the theme as a prop… or maybe it was a typo somewhere? If only there was a better way to share a variable across several components without having to pass it down as a prop to each child…

What exactly is Context?

Context is a feature in React that provides a way to pass data through a component tree without the need to manually pass it down as a prop at every level.

Within a React app, your component structure can look like this:

my-app/
├─ Page-1/
│  ├─ Component-2
│  │  ├─ Component-4
│  ├─ Component-1
├─ Page-2/
│  ├─ Component-2
│  │  ├─ Component-4
│  ├─ Component-1
│  ├─ Component-3
├─ Page3/
│  ├─ Component-1
│  ├─ Component-5

If you want to implement a toggle-able theme across your app, your first thought may be to pass the theme down as a prop to each one of those components. While this is a straightforward approach, it leaves a lot of room for human error. Context helps to simplify this situation.

Get Liam Kirkland’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

With Context, you can setup a Context Provider to store and pass a global variable like this:

import React, { createContext } from "react"

const ThemeContext = createContext()
function ThemeProvider({ children }) {
  
  return (
    <ThemeContext.Provider value={"dark"}>
      {children}
    </ThemeContext.Provider>
  )
}
export { ThemeContext, ThemeProvider }

Similar to State, the Context Provider should wrap the highest-level common parent of any components that will use the context. In this case, since you want the theme to be consistent across the whole app, you would wrap the entire App within the ThemeProvider:

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { ThemeProvider } from "./context/theme"

ReactDOM.render(
  <ThemeProvider>
    <App /> 
  </ThemeProvider>, 
  document.getElementById("root")
);

Then to use the theme within a Component, you simply import it and use it anywhere it makes sense to:

import React, { useContext } from "react";
import { ThemeContext } from "../context/theme"

function SomeComponent() {
  const theme = useContext(ThemeContext)
  /*
    The rest of your code...
  */
}

We can even take this a step further and make our theme stateful so that it can be toggled and carried across renders:

import React, { createContext, useState } from "react"

const ThemeContext = createContext()
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("dark")
  
  return (
    <ThemeContext.Provider value={[theme,setTheme]}>
      {children}
    </ThemeContext.Provider>
  )
}
export { ThemeContext, ThemeProvider }

And to use the stateful Context within a component:

import React, { useContext } from "react";
import { ThemeContext } from "../context/theme"

function SomeComponent() {
  const [theme, setTheme] = useContext(ThemeContext)
  function toggleTheme() {
    setTheme(theme === "dark" ? "light" : "dark")
  }
  /*
    The rest of your code...
  */
}

Now whenever the theme is updated, it will change across all of our components, without us ever having to worry about if we forgot to pass props down to a specific component or not!

When to use Context

After seeing this example, you may be wondering why we don’t just use Context ALL the time. On the surface it may seem like an easy replacement for props, but there are some drawbacks to Context:

Whenever the context value changes, every component consuming that context will re-render. While this makes sense for something like a theme, smaller scope variables forcing the entire app to re-render any time they are changed can cause performance issues and potential bugs if a component re-renders at a time when it wasn’t expected to.

Overuse of Context can lead to a component being less reusable, which nullifies the entire purpose of componentization. For example, if you setup a ProfileCard component to display info of the currentUser from UserContext, you’ve now coupled ProfileCard to your application's current user, making it harder to reuse for displaying another user's profile—such as in a friends list or search results.

Context is Key!

Context shines when dealing with global state like themes or user authentication. However, for data shared between a small set of components, props are the better approach. They ensure that only the affected components are re-rendered, and keeps the data relevant to the components using it.

Knowing when and where you plan to use a certain variable is crucial to determining if you should use Context. By choosing the right tool for the job, you protect your application’s performance from unexpected, heavy re-renders. Best of all, you protect yourself from those endless, frustrating midnight debugging sessions. Keep your global state in context, your local state in props, and finally go get some well-deserved sleep.