What are the patterns for sharing state between micro-frontends?

Sharing state between micro-frontends (independently deployed UI modules) requires special patterns since each micro-frontend may have its own React instance. Custom events / Window events: broadcast state changes as browser custom events. The simplest cross-framework solution: window.dispatchEvent(new CustomEvent("user:updated", { detail: { user } })). Each micro-frontend listens with window.addEventListener. URL as state: put shared state (current user ID, tenant) in the URL — all micro-frontends read from the URL independently. Shared state store in shell app: the shell application (the container) maintains a shared state object and injects it into each micro-frontend via props or context during mounting. Event bus: a shared singleton event emitter (accessible via a well-known global or import from a shared package). Module Federation: with Webpack Module Federation, share a single React instance and Redux store across micro-frontends. When to avoid sharing state: prefer each micro-frontend to be self-contained with its own data fetching. Shared state creates coupling — the opposite of the micro-frontend goal. Pass only the minimum necessary (user ID, not the full user object).