How do you share state between microfrontends?

Microfrontends run in separate JavaScript scopes with no shared component tree. State sharing options:

1. Custom DOM Events — the simplest approach. Fire a CustomEvent on window; other apps listen.

// App A fires
window.dispatchEvent(new CustomEvent('cart:updated', { detail: { count: 3 } }));

// App B listens
window.addEventListener('cart:updated', (e) => setCartCount(e.detail.count));

2. Shared event bus singleton — expose a pub/sub module via Module Federation's shared config. All apps import the same instance.

3. URL / query params — state that should survive navigation and deep links belongs in the URL. React Router's search params work across app boundaries.

4. Web Storage — localStorage / sessionStorage with storage events for cross-tab sync. Simple but no reactive binding.

5. Backend-for-Frontend (BFF) — the authoritative state lives server-side. Each MFE re-fetches when needed. No frontend coupling at all — preferred for complex state.