useContext Hook

useContext lets you consume context without prop drilling.

Syntax

REACT

1
2
3
4
5
6
7
8

import { createContext, useContext } from 'react';

const ThemeContext = createContext("light");

function ThemedButton() {
    const theme = useContext(ThemeContext);
    return <button className={theme}>Click me</button>;
}

useContext Hook

REACT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

const ThemeContext = createContext("light");

function App() {
    const [theme, setTheme] = useState("dark");

    return (
        <ThemeContext.Provider value={theme}>
            <Toolbar />
            <button onClick={() =>
                setTheme(t => t === "light" ? "dark" : "light")
            }>Toggle Theme</button>
        </ThemeContext.Provider>
    );
}

function Toolbar() {
    const theme = useContext(ThemeContext);
    return <p>Current theme: {theme}</p>;
}

Try It Yourself

Practice

1

Exercise

Practice this concept.

Answer

Write the code as shown above.

Quick Quiz

1

What did you learn?

Concept A

Concept B

Concept C

Concept D

This covers the basics.

Retry Quiz

Interview Questions

Explain this concept.

It is a fundamental React feature.

Previous

useEffect Hook

Tutorial Complete

Back to React