Shared State Management with React Context

Create a React context to share state between disparate components in Next.js 14 without prop drilling, showing a theme toggle as an example.
import { createContext, useContext, useState } from 'react';

// Define a context for the theme
const ThemeContext = createContext();
Create a React context called ThemeContext to hold the theme state.
export function ThemeProvider({ children }) {
  // State to hold the current theme
  const [theme, setTheme] = useState('light');

  // Function to toggle the theme
  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');

  // The context provider component
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
Define a ThemeProvider component that uses the ThemeContext to provide the theme and toggleTheme function to its children.
export const useTheme = () => useContext(ThemeContext);
Create a custom hook 'useTheme' for easier access to the ThemeContext.
import { useTheme } from './ThemeProvider'; // Assuming ThemeProvider is in the same file

function ThemeToggleButton() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? 'Switch to Dark' : 'Switch to Light'}
Create a ThemeToggleButton component that uses the useTheme hook to switch themes when clicked.
import { ThemeProvider } from './ThemeProvider'; // Assuming ThemeProvider is in the same file

function App() {
  return (
      {/* other components that may need access to the theme */}
      <ThemeToggleButton />
Set up the main App component to wrap parts of the app with the ThemeProvider to give access to the theme context to components like ThemeToggleButton.