Хуки в React: useContext

Хук useContext в React позволяет вам использовать контекст внутри функциональных компонентов. Контекст предоставляет способ передачи данных через дерево компонентов без явной передачи пропсов. Вот пример использования useContext для передачи данных между компонентами:

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

// MyContext.js
import { createContext } from 'react';

const MyContext = createContext();

export default MyContext;

Предоставление данных с использованием контекста:

// ParentComponent.js
import React from 'react';
import MyContext from './MyContext';

const ParentComponent = () => {
  const data = 'Hello from parent component!';

  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

export default ParentComponent;

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

// ChildComponent.js
import React, { useContext } from 'react';
import MyContext from './MyContext';

const ChildComponent = () => {
  const dataFromContext = useContext(MyContext);

  return <p>{dataFromContext}</p>;
};

export default ChildComponent;

Результат:

// App.js
import React from 'react';
import ParentComponent from './ParentComponent';

const App = () => {
  return <ParentComponent />;
};

export default App;

В этом примере ParentComponent предоставляет данные через контекст, и ChildComponent использует хук useContext для получения этих данных.

Важно помнить, что useContext используется внутри функционального компонента, и он принимает контекст в качестве аргумента. В данном случае, это MyContext.

Хук useContext облегчает передачу данных между компонентами, особенно когда эти компоненты находятся в разных уровнях иерархии.