Что такое useContext Hook?

React Context — это способ управлять состоянием в глобальном масштабе🌎.

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

Зачем нам нужен useContext Hook📎?

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

Для этого без контекста нам нужно будет передавать свойства состояния через каждый вложенный компонент. Это называется «бурение с пропеллером»✒.

Решение🧪:

Решение состоит в том, чтобы создать контекст.

Чтобы создать контекст, вы должны импортировать createContext и инициализировать его.

import {createContext} from 'react'
const  UserContext = createContext()

Далее мы будем использовать UserContext.Provider, чтобы обернуть дерево компонентов, которым требуется состояние🗽.

function Component1() {
  const [user, setUser] = useState("Jhon doe");
  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </UserContext.Provider>
  );
}

Теперь все компоненты дерева🌳 будут иметь доступ к пользовательскому контексту.

Чтобы использовать хук use Context в дочернем компоненте, нам нужно получить к нему доступ через хук useContext.

Сначала включите useContext в импорт, а затем вызовите его.

import {useContext,createContext} from 'react'
function Component5() {
  const user = useContext(UserContext);
return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

В следующей статье я напишу про useRef Hook🤔 ?

На сегодня все, следите за обновлениями, увидимся в следующем👋🏻.

Спасибо за подписку и аплодисменты😋

Ссылка на День 13

Ссылка на стартовую страницу