Dependency injection vs context and modules

A payments ledger shows two accounts side by side under one status filter. The Angular version provides the filter on the page:

The React port (createStore returns { get, set, subscribe }; useStoreValue(store) reads it with useSyncExternalStore):

const ledgerFilter = createStore('all');

function AccountPanel({ account }) {
  const status = useStoreValue(ledgerFilter);
  return (
    <section>
      <button onClick={() => ledgerFilter.set('pending')}>Pending only</button>
      <p>{account}: {status}</p>
    </section>
  );
}

function LedgerPage() {
  return <><AccountPanel account="EUR" /><AccountPanel account="USD" /></>;
}

In each version, the user clicks Pending only in the EUR panel.

A streaming app's play button calls a stream API. The Angular version, whose StreamApi is provided in the app's config, not in root:

The React port, whose main.jsx wraps the app in <StreamApiContext.Provider value={liveStreamApi}>:

const StreamApiContext = createContext(null);

function PlayButton() {
  const { start } = useContext(StreamApiContext);
  return <button onClick={() => start('ep-1')}>Play</button>;
}

A new test in each version creates PlayButton and clicks nothing. The Angular test calls TestBed.configureTestingModule({ providers: [] }); the React test renders <PlayButton /> with no provider around it.

A ticket site's seat price button. The Angular version provides the pricing client on the component itself:

The React port renders its own provider:

const PricingContext = createContext(null);

function SeatPrice() {
  return (
    <PricingContext.Provider value={livePricing}>
      <PriceButton seat="B12" />
    </PricingContext.Provider>
  );
}

function PriceButton({ seat }) {
  const api = useContext(PricingContext);
  return <button onClick={() => api.quote(seat)}>Price</button>;
}

Each test swaps in fakePricing and clicks Price. The Angular test calls TestBed.configureTestingModule({ providers: [{ provide: PricingApi, useValue: fakePricing }] }); the React test renders <PricingContext.Provider value={fakePricing}><SeatPrice /></PricingContext.Provider>.

An interviewer asks: "How do you do dependency injection in React?" The role is the React port of ExamHall's Angular app.

The chat app's Angular UnreadCounts is providedIn: 'root', changes on every new message, and is swapped for fake counts in component tests. Its React port keeps this tree; Header and Sidebar each render an UnreadBadge showing the unread total, Thread shows no count, and the module chatSocket.onMessage(fn) calls fn for each new message:

Two messages arrive, the user opens the sidebar, then a third message arrives.

A chat thread's reply box keeps a draft. The Angular version:

The React port:

const DraftContext = createContext(null);

function DraftProvider({ children }) {
  const [store] = useState(() => createStore(''));
  return <DraftContext.Provider value={store}>{children}</DraftContext.Provider>;
}

function ReplyBox() {
  const draft = useContext(DraftContext);
  const text = useStoreValue(draft);
  return <><button onClick={() => draft.set('on my way')}>Type</button><p>{text}</p></>;
}

function ThreadView() {
  const [open, setOpen] = useState(true);
  return (
    <>
      <button onClick={() => setOpen(!open)}>Reply</button>
      {open && <DraftProvider><ReplyBox /></DraftProvider>}
    </>
  );
}

In each version, the user clicks Type, then clicks Reply twice (the box closes and opens again).

A payments app has an FX tab its users rarely open. Building the FX client opens a live rates feed. The Angular version:

The React port:

const FxContext = createContext(null);

function FxProvider({ children }) {
  const [fx] = useState(() => new FxRatesClient());
  return <FxContext.Provider value={fx}>{children}</FxContext.Provider>;
}

function StatementsPage() {
  const [fxOpen] = useState(false);
  return (
    <>
      <p>Statements</p>
      {fxOpen && <FxProvider><FxPanel /></FxProvider>}
    </>
  );
}

FxPanel in the port reads useContext(FxContext), and FxRatesClient's constructor calls openRatesFeed() as in Angular. A user opens the statements page and never opens the FX tab.