Context Api in react

The Context API provides a way to pass data through the component tree without prop drilling. It's ideal for global values like themes, authentication state, or locale preferences. Create a context, provide it at a high level, and consume it anywhere below.

Example

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

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

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>Themed Toolbar</div>;
}

The theme value is provided at the top and consumed deep in the tree without passing props.

Previous Next