# Контекст в React

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

Обычно мы передавали данные от родительских компонентов дочерним с помощью пропсов. Этот способ хорош, если у вас немного компонентов и вам не нужно перебрасывать пропсы от родительского до нужного вам компонента через дочерние более `2`-`3` раз.

Данный способ также может стать крайне неудобным и привести к различным проблемам, если в промежуточных компонентах эти пропсы вообще не используются (такая проблема называется prop drilling), или вам нужно передавать одни и те же данные большому количеству компонентов.

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

Для того, чтобы воспользоваться контекстом, его нужно создать. Для начала, создадим файл `MyContext.js` и импортируем в него функцию `createContext`:

`import { createContext } from 'react';`

Теперь создадим объект контекста, запишем его в переменную `MyContext`, которую не забудем экспортировать. В нашем случае, мы установили в `createContext` начальное значение `null`, так как нам оно непринципиально (можно было оставить просто пустые скобки). Заданное значение по умолчанию появится при чтении контекста, если не будет найдено каких-то других. Данное значение может быть любого типа:

`export const MyContext = createContext(null);`

В следующем уроке мы создадим приложение из нескольких компонентов, расположенных в отдельных файлах. Если бы все компоненты были в одном файле, то и для создания контекста мы не стали бы делать отдельный файл и не стали бы его экспортировать.

Давайте теперь импортируем `MyContext.js` в пустой компонент `App` - в тот компонент, из которого мы собираемся передавать данные:

`import { MyContext } from './MyContext.js';`

Создайте файл `MyContext.js` и импортируйте его в пустой компонент `App`, как описано в уроке.

← →
↑