What is the Context API in React and when would you use it?

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

const ThemeContext = createContext("light");

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

export default function App() {
  const [theme, setTheme] = useState("light");
  const value = useMemo(() => theme, [theme]); // memoize the provided value
  return (
    <ThemeContext.Provider value={value}>
      <div style={{ padding: 24, fontFamily: "system-ui" }}>
        <Toolbar />
        <button onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}>
          Toggle
        </button>
      </div>
    </ThemeContext.Provider>
  );
}