Как использовать useContext с Context API?react-43

import { createContext } from 'react';

// Создаем контекст с значением по умолчанию
const ThemeContext = createContext('light');

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

import { useContext } from 'react';

function Button() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme === 'dark' ? '#333' : '#FFF' }}>
      Кнопка
    </button>
  );
}

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

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// Использование в компоненте
function ThemeToggler() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      Текущая тема: {theme}
    </button>
  );
}

function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

// Теперь везде используем useTheme() вместо useContext(ThemeContext)

function UserProfile() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);

  return (
    <div className={theme}>
      <h1>{user.name}</h1>
    </div>
  );
}

function App() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  // Мемоизируем значение контекста
  const userContextValue = useMemo(() => ({ user, setUser }), [user]);

  return (
    <UserContext.Provider value={userContextValue}>
      <Content />
    </UserContext.Provider>
  );
}

// Вместо одного большого контекста
<UserContext.Provider value={{ user, preferences, settings }}>

// Лучше использовать несколько специализированных
<UserContext.Provider value={user}>
  <PreferencesContext.Provider value={preferences}>
    <SettingsContext.Provider value={settings}>

function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

const ThemeContext = createContext('light');

// Если Provider не будет найден выше по дереву,
// useContext(ThemeContext) вернет 'light'

function Button() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme}>Кнопка</button>
      )}
    </ThemeContext.Consumer>
  );
}

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Кнопка</button>;
}