Singleton React über Remotes (Singleton React Ueber Remotes)

Singleton React über 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.

Begriffe, dort definiert, wo sie zuerst auftauchen

📦 Shell (Host)
App, die Remotes lädt und Layout sowie Top-Level-Routing besitzt.

📦 Remote
Unabhängiger Build, der Module über remoteEntry.js exposed.

📦 Expose Path
Öffentlicher Modulpfad für Konsumenten (z. B. auth/Login).

📦 Shared Singleton
Federation-Einstellung für genau eine React-Laufzeit.

Wer diese Begriffe vermischt, verwechselt UI-State mit Integrationswahrheit.

Form des Problems

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

shared: react + react-dom singleton

Die Trennung, die trägt

shared config olmadan iki React = sessiz hook cehennemi.

shared: react + react-dom singleton
        ↓
   explicit contract

Wo Produktion bricht

Incidents wachsen, wenn Radius, Identität oder Deploy-Annahmen implizit bleiben.

Die am häufigsten verwechselten Zuordnungen

❌ Eine App ist immer sicherer
✓ Ohne klare Grenzen ist eine App fragiler

❌ Config hardcoden
✓ Radius, Remote-URLs und Expose-Pfade sind Verträge

❌ Vendor/API-Wahrheit ist UI-State
✓ Vendor-Feed ist Evidenz; Ops-State ist Entscheidung

Checkliste zur Prüfung des eigenen Systems

1. Ownership-Grenze in einem Satz schreiben.
2. Wenn der Vertrag sich ändert — wer deployt?
3. Bei Timeout/Vendor-Delay: was zeigt die UI?
4. Embedded und Standalone getrennt testen?
5. Deny-list: Vendor/Domain-Leakage in Texten?

Was aus diesem Teil bleiben sollte

1. Verträge müssen sichtbar sein: Expose-Pfade, Radius, Ticket-Status, Remote-URLs.
2. Die Lücke zwischen UI und Externem ist Design, kein Bug.
3. Unabhängiges Deploy heißt unabhängiges Rollback.

Die Grenze, die Sie verstecken, findet Sie in Produktion.