Demon Tech Roadmap

React

React useContext Hook

The useContext Hook reads global data without passing props.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

Passing props down through ten levels of components is annoying, known as "prop drilling." The `useContext` Hook creates a global data portal. Any component, no matter how deep, can tap into this portal to read the data instantly.

Example

1/* this reads context */
2import { useContext } from "react";
3import { ThemeContext } from "./ThemeContext";
4
5function Button() {
6  const theme = useContext(ThemeContext);
7  return <button className={theme}>Click Me</button>;
8}

Key Points

It solves the problem of "prop drilling."
The `createContext()` function builds the portal.
The `Provider` wraps the parent component to supply the data.
The `useContext` Hook reads the data inside the child component.

Up Next

Continue your journey with the next topic.

Go to React useRef ❯