Singleton React Across Remotes (Singleton React Across Remotes)

Singleton React Across Remotes

Duplicate React instances break hooks and context; Federation shared singletons prevent dual runtimes.

shared: react + react-dom singleton

shared config olmadan iki React = sessiz hook cehennemi.

Concepts, defined where they first appear

📦 Shell (Host)
The app that loads remotes and owns shared layout and top-level routing.

📦 Remote
An independent build that exposes modules through remoteEntry.js.

📦 Expose Path
The public module path consumers import (e.g. auth/Login).

📦 Shared Singleton
Federation setting that forces one copy of React-like deps at runtime.

Teams that blur these concepts confuse UI state with integration truth.

Shape of the problem

Duplicate React instances break hooks and context; Federation shared singletons prevent dual runtimes.

shared: react + react-dom singleton

The split that works

shared config olmadan iki React = sessiz hook cehennemi.

shared: react + react-dom singleton
        ↓
   explicit contract

Where production breaks

Incidents grow when radius, identity, or deploy assumptions stay implicit. Make the contract visible and reversible.

The mappings that get confused most often

❌ One app is always safer
✓ Without clear boundaries, one app is more fragile

❌ Keep config hardcoded
✓ Radius, remote URLs, and expose paths are operational contracts

❌ Vendor/API truth is UI state
✓ Vendor feed is evidence; ops state is a decision

A checklist for auditing your own system

1. Write the ownership boundary for this surface in one sentence.
2. If this contract changes, who deploys?
3. On timeout or vendor delay, what does the UI show?
4. Do you test embedded and standalone paths separately?
5. Deny-list check: any vendor/domain leakage in copy?

What to take away from this part

1. Contracts must be visible: expose paths, radius, ticket state, or remote URLs.
2. The gap between UI and external systems is a design choice, not a bug.
3. Independent deploy means independent rollback.

The boundary you hide will find you in production.