Можно ли обернуть не все Веб-приложение с помощью useContext?

Можно ли обернуть не все приложение с помощью useContext?

Да, абсолютно можно и часто так делают. Это одна из ключевых сильных сторон Context API в React — его точечное, локальное применение. Вы можете и должны создавать и использовать контексты для отдельных, логически изолированных частей приложения, а не оборачивать всё в один глобальный контекст.

Глобальный Provider на корневом уровне (<App />) — это лишь один из возможных паттернов, который подходит для данных, действительно нужных везде (например, тема оформления, данные авторизованного пользователя, настройки языка). Во многих случаях гораздо эффективнее и производительнее создавать локальные контексты.

Почему локальные контексты предпочтительнее?

Использование контекста приводит к повторным рендерам всех компонентов, которые используют этот контекст (через useContext), при изменении его значения. Если у вас один монолитный контекст для всего приложения, любое его изменение вызовет ненужные ререндеры во множестве компонентов.

Локальные контексты решают эту проблему:

1. Изоляция повторных рендеров. Ререндер затрагивает только поддерево компонентов, обёрнутое в конкретный Provider.
2. Чёткая семантика и организация кода. Контекст отвечает за конкретную область (форма, модальное окно, список с фильтрацией).
3. Проще тестировать и повторно использовать. Компонент с собственным провайдером — это самодостаточный модуль.

Практические примеры использования локальных контекстов

Пример 1: Контекст для сложной формы

Создаём контекст, который управляет состоянием, валидацией и сабмитом конкретной формы. Его Provider оборачивает только саму форму и её поля.

// FormContext.js
import { createContext, useContext, useState } from 'react';

const FormContext = createContext();

export const useForm = () => {
  const context = useContext(FormContext);
  if (!context) {
    throw new Error('useForm must be used within a FormProvider');
  }
  return context;
};

export const FormProvider = ({ children, initialValues }) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const handleChange = (name, value) => {
    setValues(prev => ({ ...prev, [name]: value }));
    // Очистка ошибки при изменении поля
    if (errors[name]) {
      setErrors(prev => ({ ...prev, [name]: '' }));
    }
  };

  const validateAndSubmit = (onSubmit) => {
    // Логика валидации...
    const newErrors = {};
    if (!values.username) newErrors.username = 'Обязательное поле';
    // ...
    if (Object.keys(newErrors).length === 0) {
      onSubmit(values);
    } else {
      setErrors(newErrors);
    }
  };

  const value = { values, errors, handleChange, validateAndSubmit };
  return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
};

// UserSettingsForm.jsx
import { FormProvider, useForm } from './FormContext';

const FormField = ({ name, label }) => {
  const { values, errors, handleChange } = useForm();
  return (
    <div>
      <label>{label}</label>
      <input
        value={values[name] || ''}
        onChange={(e) => handleChange(name, e.target.value)}
      />
      {errors[name] && <span style={{color: 'red'}}>{errors[name]}</span>}
    </div>
  );
};

const UserSettingsForm = ({ onSubmit }) => {
  return (
    // FormProvider оборачивает только эту конкретную форму
    <FormProvider initialValues={{ username: '', email: '' }}>
      <form>
        <FormField name="username" label="Имя пользователя" />
        <FormField name="email" label="Email" />
        <button type="button" onClick={() => useForm().validateAndSubmit(onSubmit)}>
          Сохранить
        </button>
      </form>
    </FormProvider>
  );
};

Пример 2: Контекст для модального окна или боковой панели

Управление состоянием видимости и содержимым модального окна, которое используется в определённой части приложения.

// ModalContext.js
import { createContext, useContext, useState, useCallback } from 'react';

const ModalContext = createContext();

export const useModal = () => useContext(ModalContext);

export const ModalProvider = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [content, setContent] = useState(null);

  const openModal = useCallback((modalContent) => {
    setContent(modalContent);
    setIsOpen(true);
  }, []);

  const closeModal = useCallback(() => {
    setIsOpen(false);
    setContent(null);
  }, []);

  const value = { isOpen, content, openModal, closeModal };

  return (
    <ModalContext.Provider value={value}>
      {children}
      {/* Рендер модалки здесь, внутри провайдера */}
      {isOpen && (
        <div className="modal-overlay">
          <div className="modal-content">
            {content}
            <button onClick={closeModal}>Закрыть</button>
          </div>
        </div>
      )}
    </ModalContext.Provider>
  );
};

Затем вы можете обернуть в ModalProvider только ту секцию страницы, где нужны модалки (например, панель управления администратора).

Ключевой принцип: Контекст как часть композиции компонентов

Самый мощный подход — рассматривать Context.Provider как обычный React-компонент, который является частью иерархии. Вы можете вкладывать провайдеры друг в друга, создавая "слои" или "островки" состояния.

const App = () => {
  return (
    // Глобальный провайдер (например, для темы)
    <ThemeProvider>
      <Header />
      <div className="main-content">
        {/* Локальный провайдер для списка задач */}
        <TasksProvider>
          <TaskList />
          <TaskFilters />
        </TasksProvider>

        {/* Другой локальный провайдер для панели уведомлений */}
        <NotificationsProvider>
          <NotificationsPanel />
        </NotificationsProvider>
      </div>
      <Footer />
    </ThemeProvider>
  );
};

Итог: Оборачивать всё приложение в один контекст — антипаттерн для большинства сценариев. Сила useContext заключается в возможности создавать множество независимых, семантически осмысленных контекстов и размещать их Provider'ы ровно в тех местах компонентного дерева, где они необходимы. Это улучшает производительность, поддерживаемость и тестируемость кода.