ReactJS Interview Prep - Architecture & Micro Frontends

Question 1

How would you best define a 'Micro Frontend' architecture?

Accepted Answer

Correct Answer

Answer

An architectural pattern strictly for designing highly modular backend APIs.

Answer

A modern CSS architecture that replaces utility-first frameworks like Tailwind.

Answer

An approach where a single web application is composed of independent frontend applications developed by different teams.

Answer

A specialized, ultra-lightweight React functional component.

Question 2

In a Micro Frontend architecture, what is the recommended way to share data between separate applications?

Accepted Answer

Correct Answer

Answer

Directly mutating the DOM of the target micro frontend.

Answer

Data sharing is strictly prohibited by the architecture's design principles.

Answer

Sharing a single, unified Redux store across all micro frontends.

Answer

Using loosely coupled methods like Custom DOM Events, the window object, or a dedicated shared state library.

Question 3

Can a React application and an Angular application coexist in the same Micro Frontend architecture?

Accepted Answer

Correct Answer

Answer

No, the entire shell must eventually be rewritten into a single framework.

Answer

No, they will conflict heavily on the virtual DOM level and crash the browser.

Answer

Yes, provided they are hosted on entirely different subdomains and ports.

Answer

Yes, they can coexist on the same page using orchestrators like single-spa or by wrapping them in Web Components.

Question 4

What specific capability does Webpack 5's 'Module Federation' introduce?

Accepted Answer

Correct Answer

Answer

A powerful built-in routing library for single-page applications.

Answer

An automated end-to-end testing framework for microservices.

Answer

A specialized plugin designed exclusively to optimize Redux stores.

Answer

The ability for a JavaScript application to dynamically load code from another independent Webpack build at runtime.

Question 5

When considering IFrames for Micro Frontend integration, which statement is most accurate?

Accepted Answer

Correct Answer

Answer

IFrames are currently the modern, heavily recommended standard for MFE.

Answer

IFrames are highly performant due to their lightweight rendering engine.

Answer

IFrames allow seamless sharing of CSS and global state context.

Answer

IFrames provide perfect CSS and JS isolation, but often result in poor accessibility, routing challenges, and poor user experience.

Question 6

How should global application state ideally be managed in a Micro Frontend architecture?

Accepted Answer

Correct Answer

Answer

State should be highly decoupled, with each MFE managing its own state and only sharing absolute necessities.

Answer

All state must be serialized and persisted exclusively in `localStorage`.

Answer

A single, massive Redux store should be shared globally across all MFEs.

Answer

Managing global state is technically impossible in a federated architecture.

Question 7

How is top-level routing typically handled in a Micro Frontend architecture?

Accepted Answer

Correct Answer

Answer

It is usually managed by a central 'shell' or 'host' application.

Answer

It must be handled entirely by the backend server routing.

Answer

Client-side routing is unnecessary and heavily discouraged in MFE.

Answer

Every individual MFE must mount its own independent `BrowserRouter` at the root level.

Question 8

Which approach is necessary for comprehensively testing a Micro Frontend architecture?

Accepted Answer

Correct Answer

Answer

It requires unit tests for isolated logic, integration tests within the MFE, and E2E tests to verify cross-boundary communication.

Answer

Because they are isolated, they only ever require basic unit tests.

Answer

Due to dynamic loading, they physically cannot be tested with E2E tools like Cypress.

Answer

Testing must be done entirely manually in a staging environment.

Question 9

How do 'Web Components' fit into the Micro Frontend ecosystem?

Accepted Answer

Correct Answer

Answer

They are an obsolete technology no longer supported by modern browsers.

Answer

They are a proprietary feature exclusively available within the React ecosystem.

Answer

They are designed to completely replace standard HTML tags in the near future.

Answer

They provide a native, framework-agnostic way to build isolated, reusable UI elements.

Question 10

In the context of Micro Frontends, what distinguishes a 'Monorepo' approach?

Accepted Answer

Correct Answer

Answer

It strictly prevents code and asset sharing between development teams.

Answer

It stores the source code for all independent Micro Frontends within a single version control repository.

Answer

It dictates that the architecture must be a monolithic frontend.

Answer

It is universally considered a superior approach to Polyrepos for all use cases.

Question 11

How should Continuous Integration and Deployment (CI/CD) be handled for Micro Frontends?

Accepted Answer

Correct Answer

Answer

All MFEs must be built, versioned, and deployed simultaneously in a single massive release.

Answer

CI/CD pipelines are only truly applicable to legacy monolithic architectures.

Answer

Each MFE should ideally maintain its own independent CI/CD pipeline, enabling fully autonomous deployments.

Answer

A single, centralized pipeline must compile, test, and deploy all MFEs together to prevent version mismatches.

Question 12

What is the primary responsibility of the 'Shell' (or Host) Application in an MFE architecture?

Accepted Answer

Correct Answer

Answer

It encapsulates and executes all the complex business logic for every micro frontend.

Answer

It acts as the orchestrator, handling global routing, layout, and bootstrapping the individual micro frontends.

Answer

It serves exclusively as a CSS container for styling global elements like the footer.

Answer

It must be written strictly in vanilla JavaScript without the use of modern frameworks.

Question 13

How does Webpack Module Federation handle shared dependencies (like the React library)?

Accepted Answer

Correct Answer

Answer

All dependencies must be duplicated and downloaded across every single MFE.

Answer

It allows MFEs to declare shared libraries, preventing the user from downloading the same library multiple times.

Answer

Shared dependencies completely eliminate the possibility of any version conflicts.

Answer

Only CSS files and static assets can be shared between federated modules.

Question 14

What is the most robust way to handle user Authentication in a Micro Frontend architecture?

Accepted Answer

Correct Answer

Answer

Each MFE should enforce its own separate login screen and token validation.

Answer

Authentication is inherently unsupported in heavily federated Micro Frontends.

Answer

Authentication state should be managed centrally by the shell app and passed down or stored securely.

Answer

A shared global Redux store is the only cryptographically secure way to handle authentication.

Question 15

Why is Styling Isolation critical in Micro Frontends, and how is it typically achieved?

Accepted Answer

Correct Answer

Answer

CSS conflicts are theoretically impossible in MFE architectures due to strict runtime boundaries.

Answer

All MFEs must coordinate to use a single, massive global CSS file to ensure consistency.

Answer

Because MFEs share a DOM, scoped solutions like CSS Modules, Styled Components, or Shadow DOM are required to prevent CSS leaking.

Answer

Inline styles applied directly to HTML elements are the only officially supported way to style MFEs.

Question 16

What is a major challenge when implementing Server-Side Rendering (SSR) with Micro Frontends?

Accepted Answer

Correct Answer

Answer

SSR is physically impossible when utilizing a Micro Frontend architecture.

Answer

SSR is trivial and works automatically out-of-the-box with Webpack 5.

Answer

Only Angular natively supports SSR in a federated environment.

Answer

It often requires advanced server orchestration to fetch and stitch together HTML fragments from different MFEs before responding.

Question 17

What does the Backend for Frontend (BFF) pattern involve in an MFE context?

Accepted Answer

Correct Answer

Answer

It strictly dictates that the backend logic must be written in Node.js/React.

Answer

It enforces a single, monolithic API gateway for all frontends to query.

Answer

It involves creating a dedicated, tailored backend service for a specific frontend to aggregate and optimize data.

Answer

It is an advanced CSS methodology for structuring backend server templates.

Question 18

How should a React-based shell application handle errors originating from an embedded Micro Frontend?

Accepted Answer

Correct Answer

Answer

A crashed MFE will inevitably crash the entire shell application; this is unavoidable.

Answer

The shell app should wrap each MFE integration point in a React Error Boundary to prevent a localized failure from bringing down the entire page.

Answer

React Error Boundaries are exclusively designed for catching network timeout errors.

Answer

MFEs are designed to automatically restart themselves gracefully upon fatal UI failures.

Question 19

Why is sharing a singleton version of React important in Webpack Module Federation?

Accepted Answer

Correct Answer

Answer

Multiple versions of React can easily run on the same DOM node without any side effects.

Answer

Module Federation forces all MFEs to automatically downgrade to the lowest installed version of React.

Answer

Running multiple versions of React on the same page can cause performance bloat and unpredictable bugs (like Hooks crashing).

Answer

Modern browsers will automatically merge conflicting React versions into a single optimized engine.

Question 20

What is the primary function of the 'single-spa' framework?

Accepted Answer

Correct Answer

Answer

It serves as a highly optimized global state management library.

Answer

It acts as a top-level router and orchestrator that mounts and unmounts Micro Frontends (often written in different frameworks) based on the URL.

Answer

It is a modern, drop-in replacement for the Webpack bundler.

Answer

It is a specialized tool used strictly for building and deploying backend API microservices.

Question 21

What is the advantage of using Custom Events (Pub/Sub) for communication between Micro Frontends?

Accepted Answer

Correct Answer

Answer

It tightly couples the MFEs together, ensuring strict type safety across boundaries.

Answer

It strictly requires the implementation of a shared Redux store to function.

Answer

It enables loosely coupled communication, allowing MFEs to emit and listen to events on the `window` object without direct dependencies.

Answer

It is the only officially supported method for passing string data between IFrames.

Question 22

What is the key difference between Build-time and Run-time integration in Micro Frontends?

Accepted Answer

Correct Answer

Answer

Build-time integration (e.g., NPM packages) requires rebuilding the shell app for every MFE update, whereas Run-time integration allows independent MFE updates.

Answer

Run-time integration is considered an anti-pattern and is heavily discouraged in modern applications.

Answer

Build-time integration is the only method that permits truly independent, autonomous deployments.

Answer

There is absolutely no functional or operational difference between the two deployment strategies.

Question 23

Why might Cross-Origin Resource Sharing (CORS) become an issue in a Micro Frontend architecture?

Accepted Answer

Correct Answer

Answer

CORS is disabled by default in all MFE architectures to improve loading speed.

Answer

If the shell app fetches JS assets from an MFE hosted on a different domain, the MFE server must provide proper CORS headers to allow execution.

Answer

CORS is strictly applicable to REST API requests and has no bearing on fetching JavaScript bundles.

Answer

Federated architectures mandate that all MFEs must share the exact same IP address, rendering CORS irrelevant.

Question 24

How does a purely Client-Side Micro Frontend architecture impact Search Engine Optimization (SEO)?

Accepted Answer

Correct Answer

Answer

It automatically improves SEO by heavily compartmentalizing the HTML structure.

Answer

Search engines explicitly prefer IFrame-based architectures over server-side rendering.

Answer

Client-side assembly can harm SEO because web crawlers might not execute the dynamic JavaScript required to stitch the federated content together.

Answer

SEO is completely unaffected by the underlying frontend architecture or rendering strategy.

Question 25

Why is Webpack 5 Module Federation generally preferred over older integration approaches like IFrames or NPM packages?

Accepted Answer

Correct Answer

Answer

Module Federation enforces that all integrated code must be strictly written in TypeScript.

Answer

IFrames inherently offer vastly superior rendering performance compared to Module Federation.

Answer

It provides a native way to share code dynamically at runtime, avoiding the severe isolation overhead of IFrames and the tight coupling of NPM packages.

Answer

Module Federation is a proprietary feature built directly into the React core library.

Academy

ReactJS Interview Prep - Architecture & Micro Frontends