Home React Reference useContext()

useContext()

hook React 16.8

Subscribes to a React context. Avoids prop drilling for global data like themes or auth state.

Syntax

const value = useContext(MyContext)

Example

javascript

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

const ThemeContext = createContext('light');

function App() {
    const [theme, setTheme] = useState('light');
    return (
        <ThemeContext.Provider value={theme}>
            <Page />
        </ThemeContext.Provider>
    );
}

function Button() {
    const theme = useContext(ThemeContext);
    return <button className={`btn-${theme}`}>Click</button>;
}

useEffect()

useRef()