Почему вам следует создать крючок для использования контекста

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

Вот как это работает:

Так в чем же проблема?

Предположим, нам нужно использовать один и тот же контекст в нескольких компонентах. Вот как будут выглядеть наши компоненты.

Вы заметили проблему?

Давайте запишем проблемы:

  1. В каждом компоненте нам нужно носить с собой ThemeContext, мы должны импортировать его вместе с useContext.
  2. В каждом компоненте мы должны вызывать крючок useContext с помощью ThemeContext.
  3. Если мы используем TypeScript, нам нужно добавить дополнительную проверку, чтобы убедиться, что мы получаем данные в контексте, поскольку изначально мы использовали null для инициализации или ThemeContext .

Каково решение?

Как обычно, решение заключается в специальном хуке. ⚓️

  1. Убедитесь, что для вашего контекста существует отдельный компонент.
  2. создайте собственный hook, который будет отвечать за вызов useContext, защиту типов и возврат контекста.

После использования этого хука наши компоненты будут выглядеть так:



Оптимизация использования контекста провайдера в React
Раскройте возможности контекста провайдера: улучшение ваших приложений React с помощью экспертных стратегийrahuulmiishra.medium.com