useContext Explained

useContext Explained — React Tutorial - HTML5ANDCSS3

const ThemeContext = React.createContext("light")

function DeepButton() {
  // Reads the theme without any component in between passing it down.
  const theme = React.useContext(ThemeContext)
  const dark = theme === "dark"

  return (
    <button style={{
      background: dark ? "#0f172a" : "#e2e8f0",
      color: dark ? "#ffffff" : "#0f172a",
      border: 0, borderRadius: 6, padding: "6px 12px",
    }}>
      Theme is {theme}
    </button>
  )
}

function Middle() {
  // Knows nothing about the theme.
  return <div style={{ padding: 10 }}><DeepButton /></div>
}

function App() {
  const [theme, setTheme] = React.useState("light")

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

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)

Value and updater together

jsx

const CountContext = React.createContext(null)

function Display() {
  const { count } = React.useContext(CountContext)
  return <p>Count is {count}</p>
}

function Controls() {
  const { setCount } = React.useContext(CountContext)
  return (
    <div style={{ display: "flex", gap: 6 }}>
      <button onClick={() => setCount((c) => c - 1)}>−</button>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
    </div>
  )
}

function App() {
  const [count, setCount] = React.useState(0)
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Display />
      <Controls />
    </CountContext.Provider>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)

The problem it solves

The three pieces

The default value

Passing state down

When not to use it