Context API

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

// 1. Create the Context
const ThemeContext = createContext();

function ThemedText() {
  // 3. Consume the Context
  const { theme } = useContext(ThemeContext);
  return <p>The current theme is {theme}.</p>;
}

export default function App() {
  const [theme, setTheme] = useState('light');

  return (
    // 2. Provide the Context
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
      <ThemedText />
    </ThemeContext.Provider>
  );
}