Контекстный API используется для уменьшения детализации данных по дереву компонентов, не пропуская их через каждый уровень дерева и напрямую передавая их дочернему элементу, которому нужны эти данные. Контекст также использует состояния, но делает их более централизованными.
Во-первых, нам нужно создать контекст, используя React.createContext(значение по умолчанию), вы можете указать значение по умолчанию или оставить его пустым. Создание контекста — самый простой шаг во всем процессе.
Теперь нам нужно создать Provider, который предоставит потребителю все переменные, методы, которые он может использовать. Поставщик создается с использованием контекста, например ‹ContextName.Provider value={некоторое значение}›. Нам нужно предоставить некоторые значения, которые будут предоставлены потребителю. Значения могут быть объектами, переменными или методами. Используйте компонент ‹Context.Consumer› внутри дочерней функции, которой нужны свойства и данные, которые вы сохранили в провайдере.
В наши дни мы видим, что почти каждое веб-приложение имеет опцию для темной и светлой темы, которую пользователи можно выбрать. Мы можем использовать Context API для создания приложения, которое может переключаться между темной и светлой темами.
