What is the Context API, and how is it used in React?

The Context API is a way to pass data through the component tree without passing props down manually at every level. It’s useful for managing global state or passing data to deeply nested components.

const ThemeContext = React.createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <ThemeContext.Consumer>
      {value => <div>Current theme: {value}</div>}
    </ThemeContext.Consumer>
  );
}