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

Question 1

What are native 'Web Components' (Custom Elements)?

Accepted Answer

Correct Answer

Answer

React components published to NPM.

Answer

A suite of standard browser APIs that allow developers to create reusable, encapsulated custom HTML tags (e.g., `<my-dropdown>`) that run natively in the browser without needing a framework like React or Angular.

Answer

A CSS framework like Bootstrap.

Answer

A Server-Side Rendering engine.

Question 2

How do Web Components solve the CSS scoping problem (preventing styles from leaking out or bleeding in) natively?

Accepted Answer

Correct Answer

Answer

By using inline styles exclusively.

Answer

By utilizing the 'Shadow DOM'. The Shadow DOM creates an isolated, encapsulated DOM tree for the custom element. CSS written inside the Shadow DOM physically cannot affect the main document, and vice versa.

Answer

By using CSS Modules.

Answer

By compiling CSS into WebAssembly.

Question 3

Why might a large enterprise choose to build their core Design System using Web Components (e.g., Stencil.js or Lit) instead of React components?

Accepted Answer

Correct Answer

Answer

Because React is deprecated.

Answer

Framework Agnosticism. If a company has legacy apps in Angular, a modern app in React, and a marketing site in Vanilla JS, a Web Component `` works perfectly in all three. A React `

Answer

Because Web Components are faster to render.

Answer

Because Web Components don't require Javascript.

Question 4

What is the 'Testing Pyramid' in frontend architecture?

Accepted Answer

Correct Answer

Answer

A specific file structure for Jest tests.

Answer

A concept stating that you should have a massive base of fast, isolated Unit Tests, a smaller middle layer of Integration Tests, and a very small peak of slow, brittle End-to-End (E2E) UI tests.

Answer

A pyramid scheme for QA engineers.

Answer

A tool for testing CSS layouts.

Question 5

What is the difference between an Integration Test (e.g., React Testing Library) and an End-to-End (E2E) Test (e.g., Cypress/Playwright)?

Accepted Answer

Correct Answer

Answer

Integration tests check CSS, E2E tests check JS.

Answer

Integration tests usually run in a simulated DOM (JSDOM) in Node.js and mock the API responses. E2E tests spin up a real browser (Chrome), click real elements, and communicate with a real (or staging) backend database.

Answer

Integration tests are manual, E2E tests are automated.

Answer

They are the exact same thing.

Question 6

In a Micro Frontend architecture, why is End-to-End (E2E) testing notoriously difficult?

Accepted Answer

Correct Answer

Answer

Cypress doesn't support React.

Answer

Because the final application is assembled at runtime. To run a true E2E test, you have to ensure the Host app and all 15 independent Remote apps are deployed and running on the same staging environment simultaneously.

Answer

E2E tests cannot cross iframe boundaries.

Answer

Micro Frontends cannot be clicked by automation tools.

Question 7

What is CSR (Client-Side Rendering)?

Accepted Answer

Correct Answer

Answer

Rendering HTML in a C++ server.

Answer

The standard architecture for React SPAs (like Create React App). The server sends an empty HTML file (`

`) and a large Javascript bundle. The browser downloads the JS, boots up React, fetches data, and renders the UI entirely on the user's device.

Answer

Rendering the page into an iframe.

Answer

Using CSS to render elements.

Question 8

What is SSR (Server-Side Rendering) in modern frameworks like Next.js or Remix?

Accepted Answer

Correct Answer

Answer

Writing React inside a PHP file.

Answer

The server runs the React components, fetches the necessary API data, and generates a fully populated HTML string. It sends this HTML to the browser for instant viewing, and then sends the Javascript to 'hydrate' the page into an interactive app.

Answer

Using a Service Worker to cache HTML.

Answer

Storing the DOM in a SQL database.

Question 9

What is a major architectural downside of Server-Side Rendering (SSR) compared to Client-Side Rendering (CSR)?

Accepted Answer

Correct Answer

Answer

SSR is terrible for SEO.

Answer

It drastically increases server load and costs. Instead of just serving a static `index.html` file from a cheap CDN, you must run a Node.js server that executes heavy JavaScript rendering logic for every single user request.

Answer

SSR cannot use CSS.

Answer

SSR breaks React hooks.

Question 10

What is SSG (Static Site Generation)?

Accepted Answer

Correct Answer

Answer

Generating code using AI.

Answer

An architecture where the HTML for every page is generated by React at BUILD TIME (when you run `npm run build`), not at runtime. The resulting static HTML files are then deployed to a CDN.

Answer

A way to generate static CSS files.

Answer

Generating a site without any Javascript.

Question 11

If you build an e-commerce site with 100,000 products using SSG (Static Site Generation), what architectural bottleneck will you hit?

Accepted Answer

Correct Answer

Answer

The browser will crash trying to load 100,000 products.

Answer

Build times will become catastrophically slow. Generating 100,000 static HTML files at build time could take hours. If a price changes on one product, you might have to wait 2 hours for the CI/CD pipeline to rebuild and deploy the site.

Answer

SSG cannot handle images.

Answer

The CDN will run out of storage space.

Question 12

What is ISR (Incremental Static Regeneration) in Next.js?

Accepted Answer

Correct Answer

Answer

A tool that regenerates React components using AI.

Answer

A hybrid architecture that allows you to create or update static (SSG) pages at runtime AFTER the site has been deployed, without needing a full rebuild. It caches a page for a set time (e.g., 60s), then regenerates it in the background on the next request.

Answer

A method of compressing static assets.

Answer

A routing technique.

Question 13

What is 'Edge Rendering' (Edge Compute)?

Accepted Answer

Correct Answer

Answer

Rendering React on a smart TV.

Answer

Executing SSR logic or middleware on lightweight serverless functions located in CDN edge nodes (physically close to the user), rather than routing the request all the way back to a centralized backend server.

Answer

Rendering the borders of an image.

Answer

A deprecated Internet Explorer feature.

Question 14

In a modern Next.js architecture (App Router), what is the primary benefit of 'React Server Components' (RSC)?

Accepted Answer

Correct Answer

Answer

They allow you to use Redux on the server.

Answer

They allow components to securely access backend resources (like SQL databases or file systems) directly, and they never send their Javascript code to the browser, massively reducing bundle size.

Answer

They automatically generate CSS.

Answer

They replace the need for an HTML document.

Question 15

If a React component needs an `onClick` event handler or uses `useState`, can it be a Server Component?

Accepted Answer

Correct Answer

Answer

Yes, Server Components support all React features.

Answer

No. Interactivity and state require the component to run in the browser. You must mark the component with the `'use client'` directive to make it a standard Client Component.

Answer

Yes, but only if wrapped in an async function.

Answer

No, event handlers are deprecated.

Question 16

What is 'Hydration Mismatch' in an SSR architecture?

Accepted Answer

Correct Answer

Answer

When the user drinks too much water.

Answer

When the initial HTML rendered by the server does not exactly match the Virtual DOM generated by the client during the first render (e.g., the server renders a timestamp, but the client generates a slightly newer timestamp).

Answer

When CSS files fail to load on the server.

Answer

When the server uses a different version of React.

Question 17

How do you architect a 'Progressive Web App' (PWA) using React?

Accepted Answer

Correct Answer

Answer

By using only functional components.

Answer

By registering a Service Worker to intercept network requests for offline caching, providing a `manifest.json` file for installability (App Icon, Theme Color), and strictly serving the app over HTTPS.

Answer

By compiling the React app to a native Android APK.

Answer

By using GraphQL.

Question 18

What is the primary architectural difference between an SPA (Single Page App) and an MPA (Multi-Page App)?

Accepted Answer

Correct Answer

Answer

SPAs use React, MPAs use Vue.

Answer

In an MPA (like a traditional PHP site), every link click causes the browser to completely discard the current page and request a brand new HTML document from the server. An SPA loads the shell once and Javascript dynamically rewrites the DOM for subsequent navigations.

Answer

SPAs only have one route.

Answer

MPAs cannot use CSS.

Question 19

What is 'Error Tracking' architecture in a large frontend application?

Accepted Answer

Correct Answer

Answer

Writing `console.error` logs.

Answer

Integrating a tool like Sentry or Datadog, paired with React `<ErrorBoundary>` components. When a component crashes in production, it catches the error, grabs the stack trace and user context, and sends an alert to the engineering team.

Answer

A Redux middleware for API errors.

Answer

A testing framework.

Question 20

What is a 'Babel Plugin' or 'SWC Plugin' in the frontend build pipeline?

Accepted Answer

Correct Answer

Answer

A plugin for Chrome DevTools.

Answer

A tool that intercepts the Abstract Syntax Tree (AST) during the compilation phase to transform code. It allows you to use experimental Javascript features (like decorators), strip out console.logs, or convert JSX into native `React.createElement` calls.

Answer

A plugin for formatting CSS.

Answer

A routing mechanism.

Question 21

What is the purpose of 'Polyfills' in frontend architecture?

Accepted Answer

Correct Answer

Answer

To fill empty spaces in CSS Grid.

Answer

To provide modern Javascript functionality (like `Promise` or `Array.prototype.includes`) to older, legacy browsers (like Internet Explorer 11) that do not natively support those features, ensuring the React app doesn't crash.

Answer

To compress image files.

Answer

To manage Redux state.

Question 22

What is 'State Machine' architecture (e.g., XState) and why use it over standard React state?

Accepted Answer

Correct Answer

Answer

It makes the app run on a server.

Answer

It forces you to explicitly define every possible 'State' (e.g., Idle, Loading, Success, Error) and the strict 'Transitions' allowed between them. It mathematically prevents impossible states (like being 'Loading' and 'Success' simultaneously).

Answer

It is a database structure.

Answer

It replaces the Virtual DOM.

Question 23

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 24

In a Micro Frontend architecture using Webpack Module Federation, what is a 'Remote'?

Accepted Answer

Correct Answer

Answer

A developer working from home.

Answer

An independent Micro Frontend application that exposes specific modules (like a React component or a utility function) to be dynamically loaded and consumed by a 'Host' application at runtime.

Answer

A Git repository.

Answer

A backend API endpoint.

Question 25

What is 'Resilience' in frontend architecture?

Accepted Answer

Correct Answer

Answer

Using a highly durable CSS framework.

Answer

Designing the application so that if a non-critical system fails (e.g., the 'Recommended Products' API goes down, or a third-party tracking script crashes), the core application (e.g., the Checkout flow) continues to function normally.

Answer

Storing all data in Redux.

Answer

Preventing the user from clicking too fast.

Academy

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