Осваиваем хук UseContext в React

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

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

Что такое useContext?

useContext — это встроенный хук React, который позволяет вам использовать данные из контекста, созданного родительским компонентом. Контекст — это объект, содержащий некоторые общие данные о состоянии, к которым может получить доступ любой компонент, являющийся потомком компонента, создавшего контекст.

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

Как использовать useContext?

Чтобы использовать useContext, нам сначала нужно создать объект контекста. Мы можем сделать это с помощью метода createContext из библиотеки React. Вот пример:

import React from 'react';

const MyContext = React.createContext();

Теперь, когда у нас есть объект контекста, мы можем использовать его для обмена состоянием между компонентами. Для этого нам нужно обернуть компоненты, которым требуется доступ к общему состоянию, внутри компонента Provider, созданного с использованием синтаксиса MyContext.Provider. Вот пример:

import React from 'react';

const MyContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <div>
        <h1>Count: {count}</h1>
        <Counter />
      </div>
    </MyContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = React.useContext(MyContext);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

В этом примере мы создаем объект MyContext и используем его для совместного использования состояния count между компонентом App и компонентом Counter. Мы также передаем функцию setCount через контекст, чтобы компонент Counter мог обновлять общее состояние.

Компонент App оборачивает свои дочерние компоненты в компонент MyContext.Provider и передает текущее значение общего состояния в качестве реквизита value. В этом случае значение представляет собой объект, содержащий состояние count и функцию setCount.

Компонент Counter потребляет объект MyContext с помощью хука useContext и извлекает состояние count и функцию setCount из объекта контекста. Затем мы используем функцию increment для обновления общего состояния при нажатии кнопки.

Когда использовать useContext?

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

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

Заключение

Хук useContext — это мощный инструмент для управления глобальным состоянием.

Надеюсь, это многое вам объяснит😇.