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

Question 1

In React, what happens if a component throws a Javascript error during rendering and there is no Error Boundary?

Accepted Answer

Correct Answer

Answer

React logs a warning and continues rendering.

Answer

React will completely unmount the entire component tree, resulting in a blank white screen (the "White Screen of Death") for the user.

Answer

React automatically reloads the page.

Answer

The browser crashes.

Question 2

What is a React Error Boundary?

Accepted Answer

Correct Answer

Answer

A CSS class that outlines broken components.

Answer

A special Class Component that implements `getDerivedStateFromError` or `componentDidCatch`. It catches javascript errors anywhere in its child component tree, logs them, and displays a fallback UI instead of crashing the whole app.

Answer

A Redux middleware for API errors.

Answer

A strict Typescript interface.

Question 3

What types of errors do Error Boundaries NOT catch?

Accepted Answer

Correct Answer

Answer

Errors in child components.

Answer

They do NOT catch errors inside asynchronous code (like a failed `fetch` promise), errors in event handlers (like a crashing `onClick`), or errors in Server-Side Rendering. They only catch errors during the synchronous render phase and lifecycle methods.

Answer

Errors in `useEffect`.

Answer

Syntax errors.

Question 4

How should Error Boundaries be architected in a Micro Frontend application?

Accepted Answer

Correct Answer

Answer

Put a single Error Boundary at the very top of the Host app.

Answer

Place Error Boundaries around EACH independent Micro Frontend (Remote). If the 'Recommended Products' Micro Frontend crashes, it should show a localized fallback UI, while the main 'Checkout' app continues functioning normally.

Answer

Error Boundaries are not needed in Micro Frontends.

Answer

Put them inside Redux.

Question 5

What is 'Graceful Degradation'?

Accepted Answer

Correct Answer

Answer

Writing code that slowly gets worse over time.

Answer

Designing an architecture so that if modern features (like Javascript, or a specific API) fail or are unsupported, the application falls back to a simpler, but still usable, core experience rather than breaking completely.

Answer

Using CSS animations to hide loading states.

Answer

Degrading the database schema.

Question 6

What is 'Blue-Green Deployment' in frontend architecture?

Accepted Answer

Correct Answer

Answer

A CSS theme switching strategy.

Answer

An architecture with two identical production environments (Blue and Green). You deploy the new code to Green, test it privately, and then switch the router to instantly point all public traffic to Green. If a bug is found, you instantly switch back to Blue.

Answer

Deploying frontend to AWS and backend to Azure.

Answer

A Redux state pattern.

Question 7

What is a 'Canary Release'?

Accepted Answer

Correct Answer

Answer

A deployment that makes a chirping sound.

Answer

Deploying the new frontend code to a tiny subset of users (e.g., 5%). You monitor telemetry and error logs for those users. If the code is stable, you gradually roll it out to 100%.

Answer

A deployment that only happens at night.

Answer

A deployment exclusively for QA engineers.

Question 8

How does 'Offline-First' architecture function in a React PWA?

Accepted Answer

Correct Answer

Answer

The app refuses to load without an internet connection.

Answer

The app is designed to assume there is no network. It immediately reads data from a local database (like IndexedDB), renders the UI, and then attempts to sync with the backend server in the background if a connection exists.

Answer

The app downloads the entire backend database on load.

Answer

The app uses Redux.

Question 9

What is 'IndexedDB'?

Accepted Answer

Correct Answer

Answer

A Redux middleware.

Answer

A low-level API for client-side storage of significant amounts of structured data (files, blobs, JSON) inside the user's browser. It is much more powerful and has vastly higher storage limits than `localStorage`.

Answer

A cloud database like Firebase.

Answer

A React routing library.

Question 10

In a Micro Frontend architecture, what is 'Shadow DOM' most effectively used for?

Accepted Answer

Correct Answer

Answer

Creating drop shadows on buttons.

Answer

Providing absolute CSS and DOM encapsulation for a Micro Frontend. Styles defined inside the Shadow DOM cannot affect the parent Host application, solving the biggest issue with CSS collisions.

Answer

Hiding source code from users.

Answer

Managing Redux state.

Question 11

What is 'API Mocking' (e.g., Mock Service Worker / MSW) in frontend architecture?

Accepted Answer

Correct Answer

Answer

Writing insulting comments in the code.

Answer

A tool that intercepts outgoing network requests at the browser network level (using a Service Worker) and returns predefined mock data. It allows the frontend team to build and test UI before the backend APIs actually exist.

Answer

A database tool.

Answer

A CSS framework.

Question 12

Why is tightly coupling a React component directly to the `fetch` API considered poor architecture?

Accepted Answer

Correct Answer

Answer

Because `fetch` is deprecated.

Answer

It violates the Single Responsibility Principle and makes testing difficult. The component should delegate fetching to an API Client layer or a Custom Hook (like `useData`), allowing you to easily swap `fetch` for `axios` or mock the data later.

Answer

Because `fetch` cannot parse JSON.

Answer

Because it breaks Redux.

Question 13

What is the 'Hexagonal Architecture' (Ports and Adapters) as applied to Frontends?

Accepted Answer

Correct Answer

Answer

Using six-sided CSS shapes.

Answer

An architectural pattern that isolates the core Business Logic (Domain) from outside concerns (UI, APIs, Databases). The UI (React) is just one 'Adapter' that plugs into the core logic, meaning you could swap React for Vue without changing the business logic.

Answer

A database structure.

Answer

A Redux state pattern.

Question 14

What is 'Semantic Versioning' (SemVer)?

Accepted Answer

Correct Answer

Answer

A naming convention for CSS classes.

Answer

A versioning system (MAJOR.MINOR.PATCH, e.g., `2.1.4`). A MAJOR version change indicates breaking API changes. A MINOR version indicates added features (backwards-compatible). A PATCH indicates bug fixes.

Answer

A database schema version.

Answer

A React routing path.

Question 15

What is a 'Peer Dependency' in a package's `package.json`?

Accepted Answer

Correct Answer

Answer

A dependency developed by a coworker.

Answer

It tells NPM: "My package requires React to function, but I am NOT going to bundle React with my package. The application installing my package MUST provide its own copy of React." This prevents multiple versions of React from being installed.

Answer

A dependency that is only used for testing.

Answer

A dependency that is optional.

Question 16

In Next.js, what is the architectural difference between `pages` router and the new `app` router?

Accepted Answer

Correct Answer

Answer

The `app` router uses Angular.

Answer

The `app` router natively supports React Server Components (RSC), nested layouts, and streaming UI. It represents a fundamental shift from page-level fetching to component-level server fetching.

Answer

The `pages` router is faster.

Answer

There is no difference.

Question 17

What is 'Streaming SSR'?

Accepted Answer

Correct Answer

Answer

Watching videos in React.

Answer

Instead of waiting for the ENTIRE page's data to finish fetching on the server before sending HTML, the server streams the HTML in chunks. It sends the Header instantly, then sends the Main Content later as the database queries resolve, drastically improving Time To First Byte (TTFB).

Answer

Downloading CSS files.

Answer

Using WebSockets.

Question 18

What is an 'Event Sourcing' architecture in frontend state management?

Accepted Answer

Correct Answer

Answer

Using `addEventListener`.

Answer

Instead of storing the current state (e.g., `balance: 50`), you store an immutable log of all events (e.g., `deposit 100`, `withdraw 50`). The current state is calculated by replaying the events. (This is exactly how Redux works conceptually).

Answer

A database architecture.

Answer

A routing technique.

Question 19

What is a 'BFF' (Backend for Frontend) aggregation layer?

Accepted Answer

Correct Answer

Answer

A CSS layout technique.

Answer

If a frontend page needs data from the User API, Billing API, and Product API, the BFF makes those three calls internally on the fast backend network, aggregates the data into one clean JSON object, and sends it to the frontend in a single HTTP request.

Answer

A database schema.

Answer

A Redux store.

Question 20

Why must you NEVER store a JWT (JSON Web Token) in browser `localStorage` if your app handles highly sensitive data?

Accepted Answer

Correct Answer

Answer

It slows down the browser.

Answer

`localStorage` is completely accessible via Javascript. If your site has an XSS vulnerability (a hacker injects a script), the script can instantly read `localStorage` and steal the user's token. Tokens should be stored in HTTP-Only, Secure cookies.

Answer

Redux cannot read it.

Answer

It expires too quickly.

Question 21

What is an 'HTTP-Only' Cookie?

Accepted Answer

Correct Answer

Answer

A cookie that only works on HTTP (not HTTPS).

Answer

A security flag set by the backend server. It tells the browser: "Store this cookie, and send it back to the server with every request, but NEVER allow Javascript to read it via `document.cookie`."

Answer

A cookie that stores Redux state.

Answer

A cookie used for tracking.

Question 22

What does CORS (Cross-Origin Resource Sharing) protect against?

Accepted Answer

Correct Answer

Answer

It protects the user's browser.

Answer

It protects the BACKEND server. The browser enforces a policy where a frontend hosted on `domain-a.com` cannot read data from `domain-b.com`'s API unless `domain-b.com` explicitly sends headers saying it trusts `domain-a.com`.

Answer

It prevents XSS attacks.

Answer

It encrypts the network request.

Question 23

What is a 'Preflight Request' (OPTIONS) in CORS?

Accepted Answer

Correct Answer

Answer

A request to download HTML.

Answer

Before the browser sends a complex request (like a POST with a JSON body) to a different domain, it automatically sends a tiny OPTIONS request to ask the server: "Are you going to accept my POST request?". If the server says no, the browser blocks the POST.

Answer

A Redux initialization action.

Answer

A request to a Service Worker.

Question 24

In an enterprise monorepo, what is a 'Shared UI' library?

Accepted Answer

Correct Answer

Answer

A public library on NPM.

Answer

A dedicated internal package (e.g., `@mycorp/ui`) containing all the React components, theme tokens, and icons. All internal applications import buttons from this package, ensuring 100% visual consistency across the company.

Answer

A folder containing CSS files.

Answer

A Redux state slice.

Question 25

What is 'Code Ownership' (e.g., using `CODEOWNERS` files) in a massive frontend repository?

Accepted Answer

Correct Answer

Answer

Claiming copyright on the code.

Answer

A configuration file that dictates which specific team must review and approve Pull Requests that touch specific folders. E.g., any change to `src/checkout/` requires approval from the Checkout Team, preventing Team A from breaking Team B's code.

Answer

A file that lists the dependencies.

Answer

A Redux state manager.

Academy

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