Вопрос с собеседования · Frontend

Что такое Context в React и когда его использовать?

JuniorReact
Ещё спрашивают так:
  • Как передать тему или пользователя без prop drilling?
Коротко

Context передаёт значение всему поддереву без протаскивания через props: createContext → <Ctx.Provider value={...}> наверху → useContext(Ctx) в любом вложенном компоненте. Подходит для редко меняющихся глобальных данных: тема, текущий пользователь, язык, настройки. Компонент без провайдера получает значение по умолчанию из createContext.

  • При изменении value перерисовываются все потребители
  • Для часто меняющегося состояния — отдельный менеджер (Zustand, Redux) или разделение контекстов
  • Удобно оборачивать useContext в свой хук с проверкой провайдера

А ещё Context — способ доставки данных, а не менеджер состояния

Подробно

const ThemeCtx = createContext<"light" | "dark">("light");
function App() {
  const [theme, setTheme] = useState<"light" | "dark">("dark");
  return <ThemeCtx.Provider value={theme}><Page /></ThemeCtx.Provider>;
}
function Button() {
  const theme = useContext(ThemeCtx);
  return <button className={theme}>OK</button>;
}

Что хотят услышать

  • createContext, Provider, useContext.
  • Для чего подходит.
  • Перерисовка потребителей.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Context автоматически сохраняет данные в localStorage
  • ✗Context — лучший выбор для часто меняющегося состояния всего приложения, он заменяет Redux
  • ✓Передаёт значение поддереву через Provider и useContext; для редких изменений вроде темы
  • ✗Изменение value перерисовывает только один компонент

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования