Federated State Done Right: Zustand, TanStack Query, and the Patterns That Actually Work

Why Federated State Breaks: The Memory Model Problem

Module Federation introduces complexity in state management due to the separation of JavaScript bundles into distinct closure scopes. Without explicit singleton configuration, each module instantiates its own state libraries, leading to inconsistencies and synchronization issues—a common problem teams at Zalando and PayPal have encountered at scale.

Why This Matters

In monolithic SPAs, memory is shared, but federated systems operate with isolated scopes. This means a Redux store or Zustand store instantiated at the root isn’t universally accessible, leading to issues like authentication failing in certain modules or data inconsistencies. Failure to address this can lead to a poor user experience and increased development overhead.

Key Insights

• __webpack_share_scopes__ global object: The core mechanism for sharing modules in Module Federation.
• Singleton configuration: Essential for preventing duplicate instances of state libraries like React and Zustand.
• Async boundary pattern: Resolves the “Shared module is not available for eager consumption” error by delaying execution until shared dependencies are loaded.
• TanStack Query v5: Removed contextSharing, requiring explicit QueryClient sharing via Module Federation.

Working Example

// webpack.config.js - Every federated module needs this
const deps = require('./package.json').dependencies;
new ModuleFederationPlugin({
shared: {
react: {
singleton: true,
requiredVersion: deps.react,
strictVersion: true
},
'react-dom': {
singleton: true,
requiredVersion: deps['react-dom'],
strictVersion: true
},
zustand: { singleton: true, requiredVersion: deps.zustand },
'@tanstack/react-query': {
singleton: true,
requiredVersion: deps['@tanstack/react-query']
},
},
})

Practical Applications

• Company/system: Zalando uses Module Federation with Zustand for state management in their e-commerce platform, ensuring consistent state across micro-frontends.
• Pitfall: Using nested <Provider> components with Redux in a federated architecture can lead to unexpected behavior and state inconsistencies.

References:

• https://dev.to/martinrojas/federated-state-done-right-zustand-tanstack-query-and-the-patterns-that-actually-work-27c0