React useContext Hook – The Easy Way to Share State

React’s useContext Hook makes it simple to share state between components without the need for “prop drilling.”

The Problem: Prop Drilling

When many components need access to the same state, we end up passing props down through components that don’t need them.

function Component1() {
  const [user, setUser] = useState("Jesse"); 
 
  return (
    <>
      <Component2 user={user} /> 
    </>
  );
}
 
function Component5({ user }) { 
  return <h1>Hello {user} again!</h1>;
}

In this case, user is passed through all components just to reach Component5. That’s a lot of boilerplate!

The Solution

With useContext, you can directly access shared data from any component—no matter how deeply nested.

1. Create the Context

import { createContext } from "react";
const UserContext = createContext();

2. Wrap Your App with the Provider

function Component1() {
  const [user, setUser] = useState("Jesse");
 
  return (
    <UserContext.Provider value={user}> 
      <Component2 />
    </UserContext.Provider> 
  );
}

3. Access Context with useContext

import { useContext } from "react";
 
function Component5() {
  const user = useContext(UserContext); 
  return <h1>Hello {user} again!</h1>;
}

Summary

✅ Avoid prop drilling ✅ Share state across many components ✅ Cleaner and more maintainable code