React context work without actual component

Issue

Just when I thought I understood contexts, I don't again. I created a database context, mostly for no reason since it's a global that can be just used as a var, but I digress. I wanted to be React-y. Anyway the component looks like this

import { createContext, useContext } from "react";
import { Database } from "../lib/database/Database";

const db = new Database();

export interface DatabaseContextValues {
  db: Database;
}

export const DatabaseContext = createContext<DatabaseContextValues>({
  db,
});

export const DatabaseContextProvider: React.FC = (props) => {
  return (
    <DatabaseContext.Provider value={{ db }}>
      {props.children}
    </DatabaseContext.Provider>
  );
};

export const useDatabaseContext = () => useContext(DatabaseContext);

And on a random component I used it like this

export const MyThing = () => {
   const { db } = useDatabaseContext();
}

And it worked. And I thought great. And then some time later, I realized I never even created the component itself, eg in my App

const App = () => {
  return (
    <SafeAreaProvider>
      // woops, forgot provider, but doesn't matter
      <MyThing/>
    </SafeAreaProvider> 
  )
}

What am I not understanding or doing wrong?

Solution

The provider role is to centralize and dispatch the context values for all children components. If you don't wrap child components in the provider, they will access to a new, 'unshared' context.

Answered By - lovis91