Share data without passing props through every level.
✍️ 3 exercises + code challenge in this lessonContext shares values (theme, logged-in user, language) with any component in the tree, without "prop drilling".
const ThemeContext = createContext("light");<ThemeContext.Provider value={theme}>...</ThemeContext.Provider>const theme = useContext(ThemeContext);Mastering React useContext helps you write clean and reliable React code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<div id="root"></div>
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.25.6/babel.min.js"></script>
<script type="text/babel">
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;
const UserContext = createContext(null);
function Navbar() {
const user = useContext(UserContext);
return <nav style={{ background: "#071A2F", color: "white", padding: 10 }}>Signed in as {user.name}</nav>;
}
function Profile() {
const user = useContext(UserContext);
return <p>{user.name} has completed {user.lessons} lessons.</p>;
}
function App() {
const [user, setUser] = useState({ name: "Ayesha", lessons: 7 });
return (
<UserContext.Provider value={user}>
<Navbar />
<Profile />
<button onClick={() => setUser({ ...user, lessons: user.lessons + 1 })}>Complete a lesson</button>
</UserContext.Provider>
);
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>Check what you learned in “React useContext”.
Read a context value.
const theme = (ThemeContext);
What problem does Context solve?
Provide ThemeContext with the value "dark" and render it in Child's <p>.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services