React useContext Hook Cheat Sheet

What is `useContext`?

A React Hook that lets you consume context values in functional components — great for global state like themes, auth, or user data.

import { useContext } from "react";

import { createContext } from "react";

const ThemeContext = createContext();

Wrap your components with the provider:

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

const theme = useContext(ThemeContext);

return <p>Current theme: {theme}</p>;

const UserContext = createContext();

<UserContext.Provider value={{ name: "Jane", loggedIn: true }}>
  <Profile />
</UserContext.Provider>

const user = useContext(UserContext);
return <p>Welcome, {user.name}</p>;