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

Question 1

What is a 'Performance Budget' in CI/CD architecture?

Accepted Answer

Correct Answer

Answer

The financial cost of running AWS servers.

Answer

A strict threshold defined in the build pipeline (e.g., 'main.js must be under 200kb'). If a developer imports a massive library and pushes the PR, the CI pipeline will automatically FAIL the build because it exceeded the performance budget.

Answer

The time it takes to run Jest tests.

Answer

The amount of RAM the React app uses.

Question 2

What is 'Feature Creep' and how does it destroy frontend architecture?

Accepted Answer

Correct Answer

Answer

When CSS animations are too slow.

Answer

The continuous, unchecked addition of new features to a project beyond its original scope. It leads to bloated bundles, spaghetti code, and architectural collapse because the original foundation was not designed to support those features.

Answer

When Redux state grows too large.

Answer

When the database runs out of space.

Question 3

What is the architectural principle of 'Separation of Concerns'?

Accepted Answer

Correct Answer

Answer

Using multiple databases.

Answer

Dividing a program into distinct sections where each section addresses a separate concern. In React, this historically meant separating HTML, CSS, and JS into different files, but modern React separates concerns by *Component Functionality*.

Answer

Separating frontend and backend developers.

Answer

Using Redux instead of Context.

Question 4

Why is it an architectural anti-pattern to use Redux for routing state (e.g., `state.router.currentPath`)?

Accepted Answer

Correct Answer

Answer

Redux cannot store strings.

Answer

The URL should be the single source of truth for routing. Syncing the URL to Redux duplicates state, creates nasty race conditions (e.g., if the user clicks the browser 'Back' button), and breaks standard browser navigation.

Answer

It makes the bundle size too large.

Answer

React Router is deprecated.

Question 5

What is 'Tree Shaking' specifically dependent on to function correctly?

Accepted Answer

Correct Answer

Answer

CommonJS (`require()`) syntax.

Answer

ES6 Module (`import` / `export`) syntax. Because ES6 modules are static, the bundler can analyze exactly what is imported without executing the code. CommonJS is dynamic, making Tree Shaking almost impossible.

Answer

React Hooks.

Answer

TypeScript interfaces.

Question 6

What is the 'Facade Pattern' in frontend architecture?

Accepted Answer

Correct Answer

Answer

A CSS overlay technique.

Answer

Creating a simple interface (a facade) that hides a complex underlying subsystem. For example, creating a custom `useAnalytics()` hook that internally handles sending data to Google, Mixpanel, and Sentry, hiding that complexity from the UI components.

Answer

A database caching layer.

Answer

A Redux store.

Question 7

How does an 'Anti-Corruption Layer' (ACL) protect a new React application?

Accepted Answer

Correct Answer

Answer

It prevents XSS attacks.

Answer

When a modern React app must interact with a horrible, messy legacy API, you create a translation layer (ACL) in the frontend. The ACL receives the messy API data, cleans it into a perfect modern format, and passes it to the React app. The React app never sees the mess.

Answer

It prevents memory leaks.

Answer

It checks for type safety.

Question 8

What is 'Eager Loading' vs 'Lazy Loading' in routing architecture?

Accepted Answer

Correct Answer

Answer

Eager loading uses Webpack, Lazy loading uses Vite.

Answer

Eager loading downloads the Javascript for ALL routes immediately on the initial page load (creating a massive bundle). Lazy loading (`React.lazy`) downloads the Javascript for a route ONLY when the user navigates to it.

Answer

Eager loading is for CSS, Lazy loading is for JS.

Answer

They are the exact same thing.

Question 9

In a Micro Frontend architecture, what is a 'Shared UI Component'?

Accepted Answer

Correct Answer

Answer

A component that connects to a database.

Answer

A 'dumb' component (like a Button, Input, or Grid) that contains zero business logic and zero API calls, allowing it to be safely imported and used by every independent Micro Frontend team.

Answer

A component that manages Redux state.

Answer

A routing component.

Question 10

What is the 'Observer Pattern' and how is it used in React architecture?

Accepted Answer

Correct Answer

Answer

A tool for watching CSS animations.

Answer

A design pattern where an object (the subject) maintains a list of its dependents (observers) and notifies them automatically of any state changes. This is the fundamental architecture behind Redux subscriptions and Context API.

Answer

A database replication technique.

Answer

A method for routing.

Question 11

What is 'Isomorphic Fetch'?

Accepted Answer

Correct Answer

Answer

Fetching data from a GraphQL API.

Answer

A library or architecture that provides a unified `fetch` API that works identically on both the client (browser) and the server (Node.js). This allows the exact same API-calling code to be used for Server-Side Rendering and Client-Side Hydration.

Answer

Fetching data from an iframe.

Answer

A Redux middleware.

Question 12

What is the 'Adapter Pattern' in frontend integration?

Accepted Answer

Correct Answer

Answer

A tool for converting CSS to SASS.

Answer

A design pattern that allows two incompatible interfaces to work together. If you switch from Axios to native Fetch, you write an Adapter that mimics the Axios API but uses Fetch under the hood, so you don't have to rewrite your app.

Answer

A database tool.

Answer

A React routing component.

Question 13

Why do Enterprise teams use 'Staging' and 'UAT' environments?

Accepted Answer

Correct Answer

Answer

To compile code faster.

Answer

To provide exact replicas of the Production environment. QA teams test on Staging. Clients perform User Acceptance Testing (UAT) on the UAT server. Code only reaches Production after passing these environments.

Answer

To store backup databases.

Answer

To run Lighthouse audits.

Question 14

What is a 'Polyfill' vs a 'Transpiler' (like Babel)?

Accepted Answer

Correct Answer

Answer

They are the exact same thing.

Answer

A Transpiler rewrites modern SYNTAX (like Arrow Functions `() => {}`) into old syntax (`function() {}`). A Polyfill injects missing FUNCTIONALITY (like `Promise` or `fetch`) into the browser environment at runtime.

Answer

Polyfills are for CSS, Transpilers are for JS.

Answer

Polyfills are for backend, Transpilers for frontend.

Question 15

In a Serverless frontend architecture (e.g., Vercel, Netlify), where does the backend API live?

Accepted Answer

Correct Answer

Answer

There is no backend API.

Answer

The API is broken down into small 'Serverless Functions' (AWS Lambda). Instead of maintaining a constantly running Node server, the functions spin up on-demand when a frontend request is made, run the code, and spin down instantly.

Answer

Inside the React bundle.

Answer

Inside a Docker container.

Question 16

What is 'Vendor Lock-in'?

Accepted Answer

Correct Answer

Answer

A security feature in NPM.

Answer

When an architecture becomes so deeply integrated with a specific proprietary service (like Firebase, or AWS Amplify) that migrating away to a competitor becomes financially and technically impossible.

Answer

Locking package versions in `package-lock.json`.

Answer

A CSS scoping technique.

Question 17

What is the architectural purpose of a `package-lock.json` or `yarn.lock` file?

Accepted Answer

Correct Answer

Answer

To encrypt the source code.

Answer

To guarantee deterministic builds. It locks the exact version of every single sub-dependency. Without it, Developer A and Developer B might install slightly different versions of a deeply nested library, causing "it works on my machine" bugs.

Answer

To list the authors of the project.

Answer

To prevent NPM from downloading.

Question 18

What is a 'Headless CMS' architecture?

Accepted Answer

Correct Answer

Answer

A CMS without a database.

Answer

A Content Management System (like Contentful or Sanity) that only provides a backend interface and an API. It has no frontend "head" (unlike Wordpress). The React app consumes the API and builds a completely custom UI.

Answer

A CMS that runs in the terminal.

Answer

A CMS without security.

Question 19

What is 'Rate Limiting' and where should it be implemented?

Accepted Answer

Correct Answer

Answer

In the React component state.

Answer

A security mechanism to prevent DDoS attacks and brute-force password guessing by limiting how many requests an IP can make. It MUST be implemented on the API Gateway or Backend server, never the frontend.

Answer

In Redux middleware.

Answer

In the browser's LocalStorage.

Question 20

What is 'Cross-Origin Resource Sharing' (CORS)?

Accepted Answer

Correct Answer

Answer

A React routing feature.

Answer

A security feature implemented by BROWSERS. It blocks a web page from making AJAX requests to a different domain than the one that served the web page, unless the target server explicitly sends headers allowing it.

Answer

A database encryption method.

Answer

A method of code splitting.

Question 21

What is the 'Principle of Least Privilege' in frontend architecture?

Accepted Answer

Correct Answer

Answer

Junior developers cannot merge code.

Answer

A security concept stating that a user, process, or component should only have access to the exact data and permissions necessary to perform its job, and nothing more. E.g., a "View Profile" component should not receive the user's password hash in its props.

Answer

Using `const` instead of `let`.

Answer

Restricting CSS classes.

Question 22

What is the architectural purpose of an 'Error Boundary' in React?

Accepted Answer

Correct Answer

Answer

To validate form inputs.

Answer

To catch Javascript exceptions during rendering, lifecycle methods, and constructors in the whole tree below them, log the error, and display a fallback UI instead of crashing the entire component tree (White Screen of Death).

Answer

To catch API network timeouts.

Answer

To catch CSS syntax errors.

Question 23

What is 'Jamstack' architecture?

Accepted Answer

Correct Answer

Answer

A stack using Java, Angular, and MongoDB.

Answer

Javascript, APIs, and Markup. It is an architecture where the UI is pre-compiled into static HTML (Markup) and served from a CDN. Dynamic functionality is handled by Javascript calling third-party Serverless APIs.

Answer

A stack for building audio plugins.

Answer

A deprecated stack from 2010.

Question 24

Congratulations! You have completed the Architecture & Micro Frontends module. What is the ultimate goal of a Software Architect?

Accepted Answer

Correct Answer

Answer

To write the most complex code possible.

Answer

To manage complexity. An architect makes high-level decisions (frameworks, folder structures, CI/CD, testing strategies) that ensure the application remains maintainable, scalable, and easy to understand even as the team grows to 100+ developers.

Answer

To only write CSS.

Answer

To avoid using third-party libraries.

Academy

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