ReactJS Interview Prep - Architecture & Micro Frontends (Part 4)

Question 1

What is 'Contract Testing' and why is it preferred over E2E testing in a Micro Frontend architecture?

Accepted Answer

Correct Answer

Answer

Testing the legal terms of service.

Answer

Instead of running the entire Host and Remote apps together (slow E2E), teams write 'Contracts' (e.g., using Pact) defining EXACTLY what data the Remote expects. The CI pipeline verifies both teams meet the contract independently, guaranteeing integration without running them together.

Answer

Testing the CSS styling contracts.

Answer

Testing the database schema.

Question 2

What is the primary architectural advantage of using GraphQL over REST for a massive React frontend?

Accepted Answer

Correct Answer

Answer

GraphQL runs natively in the browser without Javascript.

Answer

It decouples the Frontend from the Backend's database structure. The React app declares exactly the shape of the data it needs for a specific screen, and the GraphQL server orchestrates fetching it from multiple microservices.

Answer

It is faster than REST.

Answer

It automatically caches data in LocalStorage.

Question 3

In a monorepo (e.g., using Nx or Turborepo), what is 'Computation Caching'?

Accepted Answer

Correct Answer

Answer

Caching API requests in the browser.

Answer

If you run `npm run build` or `test` on a project, the tool hashes the source code. If you run it again without changing any code, the tool instantly restores the previous output from the cache instead of actually running the build, saving hours of CI time.

Answer

Caching Redux state in LocalStorage.

Answer

Caching CSS classes.

Question 4

How does 'Remote Caching' in a Monorepo work?

Accepted Answer

Correct Answer

Answer

Caching data on a CDN.

Answer

The computation cache (build artifacts) is stored on a remote cloud server. If Developer A builds the project, the result is cached. When Developer B pulls the code and runs build, they download Developer A's finished build instantly instead of compiling it locally.

Answer

Storing the Redux store on a server.

Answer

Using Service Workers.

Question 5

What is the 'Island Architecture' (popularized by Astro)?

Accepted Answer

Correct Answer

Answer

Hosting servers on islands.

Answer

An architecture that generates static HTML (zero Javascript) by default. You then define small, isolated 'Islands' of interactivity (e.g., just the "Add to Cart" button) that hydrate with React, drastically reducing the total Javascript payload.

Answer

Using multiple databases.

Answer

Writing CSS in separate files.

Question 6

How does Island Architecture differ from traditional Single Page Applications (SPAs)?

Accepted Answer

Correct Answer

Answer

There is no difference.

Answer

In an SPA, the ENTIRE page is a single React tree that must hydrate and reconcile. In Island Architecture, the islands are completely isolated React trees floating in a sea of static HTML, unaware of each other.

Answer

SPAs use Redux, Islands use Context.

Answer

SPAs are faster.

Question 7

What is the 'App Shell Model' in PWA architecture?

Accepted Answer

Correct Answer

Answer

A command line interface.

Answer

The minimal HTML, CSS, and JS required to power the basic UI (header, sidebar, skeleton loader) of the app. This 'Shell' is heavily cached offline by a Service Worker so it loads instantly on subsequent visits.

Answer

A React Native shell.

Answer

A database schema.

Question 8

What is a 'Service Worker'?

Accepted Answer

Correct Answer

Answer

A backend Node.js process.

Answer

A JavaScript file that runs in the background, separate from the main browser thread. It acts as a network proxy, intercepting HTTP requests, allowing you to cache assets, serve offline content, and receive push notifications.

Answer

A tool that compiles CSS.

Answer

A React hook for async tasks.

Question 9

In a highly secure enterprise architecture, what is 'Client-Side Encryption'?

Accepted Answer

Correct Answer

Answer

Encrypting the HTML.

Answer

The React app encrypts sensitive data (like a message or password) using a cryptographic key inside the user's browser BEFORE sending it to the backend. The backend stores the encrypted data but cannot read it (End-to-End Encryption).

Answer

Using HTTPS.

Answer

Minifying the Javascript.

Question 10

What is the purpose of 'Code Splitting by Route' vs 'Code Splitting by Component'?

Accepted Answer

Correct Answer

Answer

They are the exact same thing.

Answer

Route splitting separates code by page (e.g., downloading `/settings` JS only when needed). Component splitting separates massive components (like a complex 3D viewer) so they aren't loaded until the user explicitly clicks a button to open them.

Answer

Route splitting is for CSS.

Answer

Component splitting is deprecated.

Question 11

What is the architectural purpose of a 'Design System' team in a large organization?

Accepted Answer

Correct Answer

Answer

To write Redux reducers.

Answer

They do not build features. They build and maintain the foundational component library (buttons, grids), accessibility standards, and design tokens, treating the library as an internal open-source product that the feature teams consume.

Answer

To manage the database.

Answer

To configure Webpack.

Question 12

In a Micro Frontend architecture, how should global CSS be handled?

Accepted Answer

Correct Answer

Answer

Load all CSS in the App Shell.

Answer

Global CSS should be avoided entirely. Micro Frontends should use CSS Modules, CSS-in-JS, or Shadow DOM to strictly scope their styles to prevent Team A's styles from accidentally breaking Team B's layout.

Answer

Use `!important` on everything.

Answer

Put all CSS in a Redux store.

Question 13

What is the 'Strangler Fig' pattern in frontend migration architecture?

Accepted Answer

Correct Answer

Answer

A way to write recursive functions.

Answer

A strategy for migrating a legacy monolith (e.g., an old Angular app) to a modern architecture (React) gradually. You replace the legacy app feature-by-feature (strangling it) using a routing proxy, until the legacy app can be deleted.

Answer

A CSS layout technique.

Answer

A method of fetching deeply nested JSON.

Question 14

How does 'Module Federation' in Webpack 5 handle shared dependency version conflicts?

Accepted Answer

Correct Answer

Answer

It crashes the build.

Answer

You define fallback rules. E.g., "I require `lodash` ^4.0.0. If the Host has it, I'll use theirs. If the Host has `lodash` v3, that violates my rule, so I will download my own copy of v4 to prevent crashing."

Answer

It forces the Host to upgrade.

Answer

It ignores versions entirely.

Question 15

What is the primary difference between a Monorepo and a Polyrepo (Manyrepo) architecture?

Accepted Answer

Correct Answer

Answer

Monorepos use Git, Polyrepos use SVN.

Answer

In a Polyrepo, the 'Cart' app and the 'Shared-UI' library are in separate Git repos. If you update the library, you must publish it to NPM, then go to the Cart repo, update the `package.json`, and rebuild. In a Monorepo, they are linked instantly.

Answer

Polyrepos are for frontend, Monorepos for backend.

Answer

Monorepos are slower.

Question 16

What is the downside of using a Monorepo for a massive enterprise?

Accepted Answer

Correct Answer

Answer

It requires Node.js to be installed.

Answer

Git performance can degrade severely if the repository size reaches gigabytes. Furthermore, setting up the complex CI/CD pipeline (using Nx/Turborepo) to only build what changed requires highly skilled DevOps engineers.

Answer

It prevents the use of React.

Answer

It makes the CSS bundle larger.

Question 17

What does a 'Reverse Proxy' (like Nginx) do in a Frontend Architecture?

Accepted Answer

Correct Answer

Answer

It compiles React code.

Answer

It sits in front of your frontend server. It can handle SSL encryption (HTTPS), compress files (Gzip), and route requests (e.g., routing `/api/*` to the backend server, and `/` to the React static files), protecting your internal architecture.

Answer

It manages the Redux store.

Answer

It writes CSS.

Question 18

What is 'Telemetry' in a production frontend architecture?

Accepted Answer

Correct Answer

Answer

Using a telescope.

Answer

The automated collection of data regarding the application's performance (load times), usage patterns (click heatmaps), and errors (crash logs) sent to tools like Datadog or Sentry, providing observability into how the app behaves in the real world.

Answer

A Redux state manager.

Answer

A React routing component.

Question 19

In a telemetry architecture, what is 'Sampling' and why is it used?

Accepted Answer

Correct Answer

Answer

Providing free samples to users.

Answer

If you have 10 million users, sending performance telemetry for every single click will DDOS your own servers and cost a fortune. Sampling means you only record data for a random subset (e.g., 5%) of users to get a statistically significant average.

Answer

Sampling music for animations.

Answer

Sampling React components.

Question 20

What is a 'Golden Master' (or Visual Regression) test?

Accepted Answer

Correct Answer

Answer

A test written by a senior engineer.

Answer

A test where a tool (like Percy or Chromatic) takes a screenshot of your React component and compares it pixel-by-pixel to a known 'good' screenshot (the Golden Master). It flags the test if a CSS change accidentally shifted a button by 2 pixels.

Answer

A test for database integrity.

Answer

A test for Redux actions.

Question 21

Why is 'Feature Parity' a major challenge when migrating a legacy monolith to a new React architecture?

Accepted Answer

Correct Answer

Answer

Because React is slower.

Answer

The business often requires the new React app to have EXACTLY the same features as the 10-year-old legacy app before it can be released. This leads to massive "Big Bang" rewrites that take years and often fail.

Answer

Because CSS cannot be migrated.

Answer

Because Redux doesn't support legacy APIs.

Question 22

What is 'Trunk-Based Development'?

Accepted Answer

Correct Answer

Answer

A method of building wooden UI.

Answer

A version control architecture where all developers merge their code directly into the main branch (the trunk) multiple times a day, rather than maintaining long-lived feature branches. This drastically reduces merge conflicts.

Answer

Using SVN instead of Git.

Answer

Storing code in Redux.

Question 23

How do you handle routing in a Micro Frontend architecture if you have 5 different React apps running on the same page?

Accepted Answer

Correct Answer

Answer

They all use their own `BrowserRouter`.

Answer

The App Shell should own the primary `BrowserRouter`. The Micro Frontends should ideally act as controlled components driven by props, or use an isolated `MemoryRouter` to handle their own internal sub-navigation without fighting over the main browser URL.

Answer

They cannot use routing.

Answer

They use Redux.

Question 24

What is the architectural role of 'Environment Variables' (e.g., `.env` files)?

Accepted Answer

Correct Answer

Answer

To write CSS variables.

Answer

To decouple configuration from the source code. The exact same built React Javascript bundle can be deployed to the Staging server and the Production server; it just reads different environment variables (like the API URL) at runtime or build time.

Answer

To manage Redux state.

Answer

To store user passwords securely.

Question 25

What is a 'Stateless' Architecture?

Accepted Answer

Correct Answer

Answer

An app without `useState`.

Answer

An architectural pattern (especially for BFFs or Node servers) where the server does not retain any memory of past user requests (no server-side sessions). Every request must contain all information (like a JWT) needed to authenticate it, allowing servers to scale horizontally infinitely.

Answer

An app that only uses Redux.

Answer

An app with no CSS.

Academy

ReactJS Interview Prep - Architecture & Micro Frontends (Part 4)