Почему бы просто не использовать общий импорт вместо React.createContext?

Question

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

С этой целью я пытался использовать React.createContext, но я получаю такие ошибки:

App defines an invalid contextType. contextType should point to the Context object returned by React.createContext().

Возможно, есть это исправление, но я начинаю задумываться: почему бы просто не поместить значение, которым я хочу поделиться, в файл lib, и импортировать этот файл в те, в которых мне нужно общее значение? Есть ли в этом какие-либо недостатки?

Используя шаблон наблюдений / наблюдений mobx, обновления свойств, похоже, все еще отражаются в дом.

Например:

shared . js

import { observable } from 'mobx';

class SharedClass {
  @observable x = 1;
}

const sharedInstance = new SharedClass(1);

export {
  sharedInstance,
}

Приложение. js

import { observer } from "mobx-react";
import { sharedInstance } from 'lib/shared';

@observer
class App extends React.Component() {
  constructor(props) {
    super(props);

    sharedInstance.x = 2;
  }

  render() {
    return <>
      The shared value is {sharedInstance.x}.

      <Stuff... eventually with a nested Page component>
    </>
  }
}

Страница. js

import { observer } from "mobx-react";
import { sharedInstance } from 'lib/shared';

@observer
class Page extends React.Component {
  render() {
    return <>
      The shared value is {sharedInstance.x}.
    </>;
  }
}