Simple dependency injection in React

simple-dependency-injection.tsx

const $dependencyContext = Symbol();

/**
 * The provide function would be called at the root of the application,
 * or at the "root" of a dynamically imported module.
 */
function provide<T extends Record<symbol, any>>(deps: T) {
  (globalThis as any)[$dependencyContext] = {
    ...(globalThis as any)[$dependencyContext],
    ...deps,
  };
}

/**
 * Simple accessor for the global dependency context.
 */
function inject() {
  return (globalThis as any)[$dependencyContext];
}

/** Unique identifier for some dependency. */
const $someDep = Symbol();

/**
 * This is decoupled from a specific dependency/import.
 */
const Component = () => {
  const { [$someDep]: dep } = inject();
  return <div>{dep()}</div>;
};

/**
 * This implementation provides Component one version of the dependency.
 * In practice, `provide` would not be called multiple times within an
 * application for the same dependencies. Imagine this is the "production"
 * version of the global App.
 */
const Component1 = () => {
  provide({ [$someDep]: () => 'someDep' });
  return <Component />;
};

/**
 * This implementation provides another version of the dependency.
 * Imagine this is the "test" version of the global App.
 */
const Component2 = () => {
  provide({ [$someDep]: () => 'someInjectedDep' });
  return <Component />;
};

function App() {
  return (
    <>
      <Component1 />
      <Component2 />
      <Component1 />
      <Component2 />
    </>
  );
}

export default App;

https://stackblitz.com/edit/vitejs-vite-u4smdc?file=src%2FApp.tsx