Как правильно работать с useContext, и для чего value?

Question

[TheSnegok]

Немного разобрался что при создании контекста лучше его выносить в другой в файл, а потом импортировать, Context:

import { createContext } from "react";

const memoryApp = {
    likes: [0, null],
    basket: [0, null]
}

const Context = createContext(memoryApp);

export default Context;

Потом я его импортирую в main и оборачиваю все компоненты в Context.Provider:

<Context.Provider value={{ likes: [0, null], basket: [0, null] }} >
			<main>
				<Header />
				<Menu />
				<Stock />
				<Banner />
				<Brands />
				<Footer />
			</main>
		</Context.Provider>

И потом снова импортирую Context в компоненту в которой хочу использовать его:

const context = useContext(Context);
console.log(context);

1. Можно ли использовать useContext для смены значений в нём, например создать state с лайками и прибавлением или убавлением их и закинуть в context или лучше сделать как-то по другому, если нет то для чего тогда лучше использовать useContext?
2. Так и нужно везде импортировать Context, или я не правильно что-то делаю? Если нет то только где нужно ставить импорты?
3. Если импорты нужны везде то зачем тогда нужна обёртка с импортом этого самого Context в main если мы его импортируем в другие компоненты ниже? Не было бы проще сделать возможность импорта в любую компоненту без оборачивания в provider?
4. И нужно ли что-то помещать в useContext? Потому что когда я пытаюсь вывести его содержимое, то выводится только то что я поместил в value, что тогда нужно вставлять внутрь useContext и вообще нужно ли что-то вставлять?

Comments

[Alexandroppolus]

просто не представляю, что ещё можно сказать про контекст помимо философии контекстов и заметки про хук

Answer 1

[wonderingpeanut]

Бест практис согласно Кенту Додсу

// MyContext.js
const Context = createContext(null);

const Provider = ({children}) => {
  return (
    <Context.Provider value={/* your state */}>{children}</Context.Provider>
  )
}

const useYourValue = () => {
  const value = useContext(Context);
  if (!value) { /* handle case when context is used outside of Context provider */ }
  return value
}

export {useYourValue, Provider}

// App.js
...
return (
  <Provider>
    <ComponentA />
    {/* other components */ }
  </Provider>
);

// ComponentA.js
import {useYourValue} from '../Context'

const ComponentA = () => {
  const myValue = useYourValue();
  // rest of component code
}