Context API

// Без Context — данные передаются через все уровни
function App() {
  const [user, setUser] = useState({ name: 'Иван' })
  return <Layout user={user} />
}

function Layout({ user }) {
  return <Sidebar user={user} />
}

function Sidebar({ user }) {
  return <UserMenu user={user} />
}

function UserMenu({ user }) {
  return <div>Привет, {user.name}!</div>
  // Только здесь нужен user, но он тащится через 3 уровня
}

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

// 1. Создать context (вынести в отдельный файл)
const UserContext = createContext(null)

// 2. Обернуть дерево провайдером
function App() {
  const [user, setUser] = useState({ name: 'Иван', role: 'admin' })

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Layout />
    </UserContext.Provider>
  )
}

// 3. Использовать в любом потомке
function UserMenu() {
  const { user } = useContext(UserContext)
  return <div>Привет, {user.name}!</div>
}

// contexts/AuthContext.jsx
import { createContext, useContext, useState } from 'react'

const AuthContext = createContext(null)

// Provider-компонент
export function AuthProvider({ children }) {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(false)

  async function login(email, password) {
    setLoading(true)
    const res = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email, password }),
    })
    const data = await res.json()
    setUser(data.user)
    setLoading(false)
  }

  function logout() {
    setUser(null)
  }

  return (
    <AuthContext.Provider value={{ user, loading, login, logout }}>
      {children}
    </AuthContext.Provider>
  )
}

// Кастомный хук с проверкой
export function useAuth() {
  const context = useContext(AuthContext)
  if (!context) {
    throw new Error('useAuth должен использоваться внутри AuthProvider')
  }
  return context
}

// main.jsx
root.render(
  <AuthProvider>
    <App />
  </AuthProvider>
)

// В компоненте
function LoginButton() {
  const { user, login, logout } = useAuth()

  if (user) return <button onClick={logout}>Выйти, {user.name}</button>
  return <button onClick={() => login('user@mail.com', 'pass')}>Войти</button>
}

// ❌ Одно большое состояние — все ре-рендерятся при любом изменении
const AppContext = createContext(null)
// value={{ user, theme, notifications, ... }}

// ✅ Разделить на независимые контексты
const UserContext = createContext(null)
const ThemeContext = createContext(null)
const NotificationContext = createContext(null)

// ❌ Новый объект при каждом рендере = ре-рендер всех потребителей
<Context.Provider value={{ user, login }}>

// ✅ Мемоизировать значение
const value = useMemo(
  () => ({ user, login }),
  [user, login]
)
<Context.Provider value={value}>

function App() {
  return (
    <ThemeProvider>
      <AuthProvider>
        <Router>
          <Layout />
        </Router>
      </AuthProvider>
    </ThemeProvider>
  )
}

// Или использовать compose
function Providers({ children }) {
  return (
    <ThemeProvider>
      <AuthProvider>
        {children}
      </AuthProvider>
    </ThemeProvider>
  )
}