What are micro-frontends in the context of React?

Why Interviewers Ask This

Senior React.js engineers are expected to reason about architecture, performance, and edge cases. This question separates mid-level from senior candidates by testing deep system-level understanding.

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.

Common Mistake

Many candidates answer correctly but can't explain the 'why'. Always be prepared to justify your answer with a concrete example or use case from your React.js experience.