Зачем нужен React Context?

React Context (React.createContext) предоставляет способ передачи данных через дерево компонентов без необходимости явно прокидывать пропсы на каждом уровне. Она полезна для управления состоянием, которое должно быть доступно во многих частях приложения, не пропуская его через каждый уровень компонентов.

Основные случаи использования React Context:

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

1. Темизация:
Context позволяет легко управлять темами (например, светлая/темная тема) и применять их к разным компонентам без необходимости передавать тему через пропсы.

2. Аутентификация:
Context может быть использован для хранения и передачи информации о текущем пользователе и его аутентификационном статусе.

3. Настройки локализации:
Context позволяет управлять и передавать текущие языковые настройки, обеспечивая локализацию и интернационализацию приложения.

Примеры использования React Context:

Создание контекста:

import React from 'react';

// Создание контекста с дефолтным значением
const ThemeContext = React.createContext('light');

Использование Provider для предоставления значения контекста:

import React from 'react';
import ReactDOM from 'react-dom';

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

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>Themed Button</button>}
    </ThemeContext.Consumer>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Преимущества использования React Context:

1. Упрощает управление состоянием:
Context позволяет избегать "prop drilling" — необходимости передавать пропсы через множество уровней компонентов.

2. Повышает читаемость и поддержку кода:
Централизованное управление состоянием и данными улучшает читаемость и упрощает поддержку кода.

Когда не следует использовать React Context:

1. Избыточное использование:
Контекст не следует использовать для данных, которые изменяются часто или предназначены только для узкой области компонента. Частые изменения данных в контексте могут привести к избыточному рендерингу компонентов.

2. Сложные состояния:
Для управления сложными состояниями и побочными эффектами лучше использовать специализированные библиотеки, такие как Redux или MobX.

👉 @frontendInterview