Как правильно передавать контекст в subChild компоненты, находящиеся в других модулях?

Question

[The_good_game]

Когда я создаю контекст при помощи React.context для родительского компонента, у меня не получается воспользоваться этим контекстом в одном из дочерних компонентов, находящимся в другом модуле. Для того чтобы сделать это, мне нужно импортировать созданную переменную контекста в родительском компоненте. Но нужно ли тогда использовать React.context, если всё будет работать и без него?

//parentComponents.js
import React from 'react';

let someContext = React.createContext(null);

export default function ParentComp() {
  return (
    <someContext.Provider value={{key: prop}}>
      <ChildComp />
    </someContext.Provider>
  )
}

//ChildComp.js
export default function ChildComp() {
  return (
    <div>
      <SubChildComp />
    </div>
  )
}

//SubChildComp.js
import { useContext } from 'react';

export default function SubChildComp() {
  let contextData = useContext(someContext) // Error: someContext is not defined;

  return (
    <div />
  )
}

//но так работает
//parentComponents.js
import React from 'react';

let someContext = React.createContext(null);
// можно ли не использовать  React.createContext, someContext.Provider и т.д.
// просто создав переменную someContext и присвоив ей объект из ParentComp?

export default function ParentComp() {
//...
}

export { someContext }

//ChildComp.js
export default function ChildComp() {
//...
}

//SubChildComp.js
import { useContext } from 'react';
import { someContext } from '../../parentComponents'

export default function SubChildComp() {
  let contextData = useContext(someContext) // всё работает;
//...
}

Answer 1

[Alexandroppolus]

Похоже, ты не понял, зачем контекст вообще нужен.
Он позволяет передать значение на несколько уровней вниз. При этом, если значение в контексте поменяется, то будет перерендер всех компонентов, которые его используют.
Можно передавать и некоторое постоянное значение, например экземпляр какого-нибудь стора, как это делает тот же реакт-редукс. В этом случае не используется отслеживание смены значения (оно постоянное), но есть архитектурная польза - это такой своеобразный DI в вёрстку. Который, например, можно поменять в тестах или ещё где. То есть компонент не прибивается гвоздями к заимпорченому значению, а получает его в параметры, с позднейшим резолвом зависимости.