Understanding the React useContext Hook and How to Use It

Prior to the release of the useContext hook in React 16.8 on February 6th, 2019, developers relied on prop drilling, render props, and third-party libraries. While functional, these approaches led to several issues, such as reduced readability and maintainability (prop drilling), more complex and less intuitive components (render props), and added complexity with boilerplate code (third-party libraries). The useContext hook offers an efficient and seamless option to share state between components.

What is the useContext hook?

The useContext hook provides a simpler way to pass data through the component tree without manually passing props at every level. In a typical React application, data is passed from a parent component to a child via props. This can be inefficient when certain values are required by multiple components across the application. The useContext hook simplifies this process, eliminating the need to explicitly pass props through every level of the tree.

Why use useContext instead of props?

Since useContext is designed to share data, it can be considered “global” for a component tree—much like a theme, preferred language, or authenticated user. By using the useContext hook, you avoid passing props through intermediate components. If your data needs to be accessible by many components at various nesting levels and you want to avoid prop drilling, useContext is the ideal solution.

Example showing props being passed through nested components:

How do you use the useContext hook?

1. Create context: Import createContext and initialize it.

import { useState, createContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext()

1. Context Provider: Wrap the components that need access to the context with a UserContext.Provider. All child components within this tree will have access to the context.

function ComponentOne() {
  const [user, setUser] = useState("John Doe");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <ComponentTwo user={user} />
    </UserContext.Provider>
  );
}

1. Using the useContext hook: Include useContext in the import statement for the component where you need the data. As long as you do this, you will be able to access the data in any component. Make sure to include a function declaration and a variable name.

import { useState, createContext, useContext } from "react";

function ComponentFive() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component Five</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

Complete Example Using the useContext Hook

import { useState, createContext, useContext } from "react";  // import createContext
import ReactDOM from "react-dom/client";

const UserContext = createContext();  // initialize createContext

function ComponentOne() {
  const [user, setUser] = useState("John Doe");

  return (  // wrap the child components in Context Provider and include the state value
    <UserContext.Provider value={user}> 
      <h1>{`Hello ${user}!`}</h1>
      <ComponentTwo />
    </UserContext.Provider>
  );
}

// all components will have access to the user context
// to use useContext in a child component, we need to access it using the useContext Hook
function ComponentTwo() {
  return (
    <>
      <h1>Component Two</h1>
      <ComponentThree />
    </>
  );
}

function ComponentThree() {
  return (
    <>
      <h1>Component Three</h1>
      <ComponentFour />
    </>
  );
}

function ComponentFour() {
  return (
    <>
      <h1>Component Four</h1>
      <ComponentFive />
    </>
  );
}

//  include the useContext hook in the import statement for the component you want the data in
import { useState, createContext, useContext } from "react";

function ComponentFive() { //  you can access the user context in all components where you import the data
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component Five</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ComponentOne />);

References

Context. React. (n.d.). https://legacy.reactjs.org/docs/context.html#:~:text=Passing%20Data%20Deeply%20with%20Context,every%20level%20of%20the%20tree.
Pedro. (2020, October 2). UseContext Hook Tutorial In ReactJS | Global States. YouTube. https://www.youtube.com/watch?v=lnL6gRkQ5g8
React useContext Hook. W3Schools Online Web Tutorials. (n.d.). https://www.w3schools.com/react/react_usecontext.asp
ReactJS useContext Hook. GeeksforGeeks. (2025, March 5). https://www.geeksforgeeks.org/reactjs/reactjs-usecontext-hook/