Пример использования контекста в React

App.jsx

import React, { createContext, useContext } from 'react';

// Создаем контекст со значением по умолчанию "default"
const MyContext = createContext('default');

// Создаем компонент, который получает значение контекста и отображает его в диве
function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

// Создаем корневой компонент, который оборачивает MyComponent в провайдер контекста MyContext, передавая ему значение "Hello world"
function App() {
  return (
    <MyContext.Provider value="Hello world">
      <MyComponent />
    </MyContext.Provider>
  );
}

В этом примере мы создали контекст MyContext со значением "default". Затем мы создали компонент MyComponent, который использует useContext для чтения значения контекста. В функции App мы использовали компонент Provider, чтобы передать значение "Hello world" в MyComponent.

Контекст также может быть использован для передачи функций и методов между компонентами. Это может быть полезно для создания функций, которые изменяют состояние всего приложения.