What are micro-frontends in the context of React?
Answer
Micro-frontends apply microservice principles to the frontend — splitting a large frontend application into smaller, independently deployable pieces that can be developed and released by separate teams. Implementation strategies with React: (1) Module Federation (webpack 5): each micro-frontend exposes React components as remote modules; a shell app consumes them at runtime. Teams can deploy updates independently. (2) Single-SPA: a framework for routing between multiple independently deployed SPAs. (3) Iframes: strictest isolation but poor UX and styling limitations. (4) Web Components: wrap React apps in Custom Elements — technology-agnostic integration. Challenges: shared dependencies (multiple React versions is expensive — use Module Federation's shared scope); design consistency (need a shared design system); routing coordination; authentication sharing; performance (multiple React runtimes); communication between micro-frontends (custom events, shared state). When to use: large organizations with multiple independent teams working on the same application; when teams need to deploy independently without coordination. For most apps, a well-organized monorepo is simpler.
Previous
How does React Server Actions work in React 19?
Next
What is state management at scale and which library should you choose?
More React.js Questions
View all →- Advanced How does React's reconciliation algorithm handle keys?
- Advanced What is the React Fiber architecture in depth?
- Advanced What are React rendering optimizations beyond React.memo?
- Advanced How do you implement an undo/redo system in React?
- Advanced What are React's concurrent features and how do Transitions work?