Могу ли я заменить контекст хуками?

обновлено:

Мой предыдущий ответ был - вы можете использовать custom-hooks с useState для этой цели, но это было неправильно из-за этого:

Do two components using the same Hook share state? No. Custom Hooks are a mechanism to reuse stateful logic (such as setting up a subscription and remembering the current value), but every time you use a custom Hook, all state and effects inside of it are fully isolated.

Правильный ответ, как это сделать с помощью useContext (), предоставил @ShubhamKhatri

React предоставляет перехватчик useContext для использования Context, который имеет подпись вроде

const context = useContext(Context);

useContext accepts a context object (the value returned from React.createContext) and returns the current context value, as given by the nearest context provider for the given context.

When the provider updates, this Hook will trigger a rerender with the latest context value.

Вы можете использовать его в своем компоненте, например

import { ProfileContext } from 'src/shared/ProfileContext'

const Site = () => {
   const context = useContext(ProfileContext);
   // make use of context values here
}

Однако, если вы хотите использовать один и тот же контекст в каждом компоненте и не хотите импортировать ProfileContext повсюду, вы можете просто написать собственный хук, например

import { ProfileContext } from 'src/shared/ProfileContext'
const useProfileContext = () => {
   const context = useContext(ProfileContext);
   return context;
}

и используйте его в таких компонентах, как

const Site = () => {
   const context = useProfileContext();
}

Однако, что касается создания ловушки, которая обменивается данными между различными компонентами, хуки имеют экземпляр данных для себя и не делятся им, если вы не используете Context;

Сейчас использую вот так.

Contexts.js - экспорт всего контекста из одного места

export { ClickEventContextProvider,ClickEventContext} from '../contexts/ClickEventContext'
export { PopupContextProvider, PopupContext } from '../contexts/PopupContext'
export { ThemeContextProvider, ThemeContext } from '../contexts/ThemeContext'
export { ProfileContextProvider, ProfileContext } from '../contexts/ProfileContext'
export { WindowSizeContextProvider, WindowSizeContext } from '../contexts/WindowSizeContext'

ClickEventContext.js - один из примеров контекста:

import React, { useState, useEffect } from 'react'

export const ClickEventContext = React.createContext(null)
export const ClickEventContextProvider = props => {
  const [clickEvent, clickEventSet] = useState(false)
  const handleClick = e => clickEventSet(e)

  useEffect(() => {
    window.addEventListener('click', handleClick)
    return () => {
      window.removeEventListener('click', handleClick)
    }
  }, [])

  return (
    <ClickEventContext.Provider value = {{ clickEvent }}>
      {props.children}
    </ClickEventContext.Provider>
  )
}

импорт и использование:

import React, { useContext, useEffect } from 'react'
import { ClickEventContext } from 'shared/Contexts'

export function Modal({ show, children }) {
  const { clickEvent } = useContext(ClickEventContext)

  useEffect(() => {
    console.info(clickEvent.target)
  }, [clickEvent])

  return <DivModal show = {show}>{children}</DivModal>
}