Senior Design Patterns Interview Questions (50 MCQs)

Question 1

What does Dependency Injection mainly give the frontend?

Accepted Answer

Testability and swappable implementations (mock/real)

Answer

Removing TypeScript entirely

Answer

Forced higher coupling

Answer

Animation only

Question 2

What does Feature-Sliced Design focus on?

Accepted Answer

Organizing around features and layers with a dependency rule

Answer

One flat folder for everything

Answer

Removing components

Answer

Backend only

Question 3

Separating read/write models in the UI means what?

Accepted Answer

Edit forms and list views can use different shapes/caches

Answer

One mandatory model for everything

Answer

Removing forms

Answer

It only concerns theme colors

Question 4

What is a headless component (like Radix or TanStack Table)?

Accepted Answer

Provides logic, state, and a11y without fixed styles or markup

Answer

A server-only component

Answer

A component with no props

Answer

A component that only edits `<head>`

Question 5

The Command pattern is great for implementing what?

Accepted Answer

Undo/redo and operation queues

Answer

Responsive styling

Answer

Routing

Answer

Image compression

Question 6

What does the Open/Closed Principle say?

Accepted Answer

Open for extension, closed for modification: add behavior without editing existing code

Answer

Code must be open source

Answer

Files must never be closed

Answer

No class may be inherited

Question 7

What does Inversion of Control mean in component design?

Accepted Answer

Rendering/behavior control is handed to the consumer (slots, render props, state reducer)

Answer

The component decides everything internally

Answer

Reversing render order

Answer

Removing props

Question 8

What role does an Anti-Corruption Layer play on the frontend?

Accepted Answer

Isolating the app's model from external API models and quirks

Answer

A browser antivirus

Answer

Bundle compression

Answer

A CSS reset layer

Question 9

What is the benefit of a plugin architecture (like Vite or ESLint)?

Accepted Answer

A small core with features added through defined hooks

Answer

Every feature is hard-coded in the core

Answer

No API needed

Answer

Backend only

Question 10

What does applying Hexagonal architecture (Ports & Adapters) look like in a complex frontend app?

Accepted Answer

Domain logic defines interfaces (ports) and HTTP, storage, and UI act as adapters implementing or driving them

Answer

All components are laid out in a hexagonal grid

Answer

Each component connects directly to six backend services

Answer

Domain logic lives inside UI components to reduce layers

Question 11

What does the Dependency Rule in Clean Architecture state?

Accepted Answer

Source code dependencies point only inward, toward entities and use cases

Answer

Inner layers should import the UI framework

Answer

Each layer depends only on its outer layer

Answer

Dependencies must be resolved at runtime via reflection

Question 12

What is the strongest reason to choose micro-frontends?

Accepted Answer

Several autonomous teams that must deploy their parts independently on separate release cycles

Answer

Reducing bundle size in a small app with one team

Answer

Because micro-frontends always perform better

Answer

To eliminate the need for a design system

Question 13

In Module Federation, why is React usually configured as a shared dependency with `singleton: true`?

Accepted Answer

Two React copies break hooks and Context across remotes

Answer

Because React can't be imported otherwise

Answer

So each remote gets its own React copy

Answer

Because singleton enables automatic SSR

Question 14

In a large monorepo, what's the most effective way to stop one feature from importing another feature's internals?

Accepted Answer

Define a public API (entry point) per module and enforce boundaries with lint rules or Nx tags in CI

Answer

Write a wiki page and hope people follow it

Answer

Put all code in a single `shared` folder

Answer

Forbid all imports between packages

Question 15

When is the Backend for Frontend (BFF) pattern valuable?

Accepted Answer

When different clients (web, mobile) have different data needs and multiple services must be aggregated

Answer

When there's only one simple API and one client

Answer

To remove authentication entirely

Answer

To run CSS on the server

Question 16

To migrate a large AngularJS app to React without halting development, which pattern fits?

Accepted Answer

Strangler Fig: replace it gradually, route by route or section by section, until the old system is gone

Answer

A full rewrite in a separate branch merged once after a year

Answer

Freeze all new features until migration is done

Answer

Run both frameworks forever with no removal plan

Question 17

For undo/redo in a graphic editor with very large state, why are full snapshots per change problematic, and what's the alternative?

Accepted Answer

High memory use; store patches/inverse operations (like Immer patches) or use structural sharing

Answer

Snapshots aren't possible in JavaScript; read from the server

Answer

Undo must always reload the page

Answer

No problem; full snapshots are always best

Question 18

What does the Functional Core, Imperative Shell pattern offer for complex frontend logic?

Accepted Answer

Decisions live in pure, testable functions while side effects (fetch, DOM, storage) stay in a thin outer layer

Answer

All code must be written inside `useEffect`

Answer

Only classes are used; functions are banned

Answer

Side effects go in the core and pure logic in the outer layer

Question 19

A shared component has grown 15 boolean props for each page's special cases. What is Sandi Metz's "wrong abstraction" advice?

Accepted Answer

Inline the abstraction back into callers, accept duplication, then rediscover the right abstraction

Answer

Add more parameters until every case is covered

Answer

Convert the component into a HOC

Answer

Merge all props into one `config` object

Question 20

What is the fragile base class problem, a key reason to favor composition over inheritance?

Accepted Answer

Seemingly safe changes to a base class break subclasses relying on its implementation details

Answer

The base class gets randomly deleted at runtime

Answer

Base classes can't have methods

Answer

Subclasses can't have constructors

Question 21

An SDK requires `init()` before `track()` or it silently breaks. What's the problem and a better design?

Accepted Answer

Temporal coupling; a factory like `createTracker(config)` returning a ready object enforces the order

Answer

Feature envy; move the methods to another class

Answer

No problem; documenting it in the README is enough

Answer

Dead code; delete `init()`

Question 22

Why is separating server state (React Query/SWR) from client state an important architectural decision?

Accepted Answer

Server state has caching, invalidation, dedupe, and staleness concerns a generic store isn't designed for

Answer

Because Redux can't hold API data

Answer

Because client state must always live in the URL

Answer

Because React Query replaces every kind of state

Question 23

What does the colocation principle recommend in a large React codebase?

Accepted Answer

Keep code (state, styles, tests, queries) as close as possible to where it's used, lifting only when needed

Answer

Put all state in a global store from the start

Answer

Keep all tests in a separate root folder

Answer

Put all hooks in one big `hooks.ts` file

Question 24

When designing a design-system `DataTable`, when does composition (child parts) beat configuration (one big `columns` prop)?

Accepted Answer

When consumers need diverse render customization and you can't predict all cases upfront

Answer

Always; configuration is never appropriate

Answer

When the table only shows simple uniform data and must be serializable

Answer

When the goal is the fewest consumer lines of code in every case

Question 25

In a design system used by dozens of teams, what's the best way to rename a prop?

Accepted Answer

Support both names with a deprecation warning, ship a codemod, and remove it in the next major per semver

Answer

Rename it in a patch release without notice

Answer

Keep the old name forever and never change it

Answer

Fork the library for each team

Question 26

How does the Testing Trophy (Kent C. Dodds) shift emphasis compared to the classic test pyramid?

Accepted Answer

Most investment goes into integration tests, on a base of static analysis (TypeScript, ESLint)

Answer

Only E2E tests and no unit tests at all

Answer

Emphasizes snapshot tests as the main layer

Answer

Drops static analysis because tests suffice

Question 27

What problem does contract testing (like Pact) between frontend and backend solve that MSW mocks don't?

Accepted Answer

It ensures frontend mocks stay consistent with the real API; the backend is verified against the contract in CI

Answer

It fully replaces frontend unit tests

Answer

It runs visual regression tests

Answer

It measures production network speed

Question 28

What is the most common root cause of flaky UI tests?

Accepted Answer

Timing dependence (fixed sleeps, animations, async races) and state shared between tests

Answer

Using TypeScript

Answer

Too many assertions per test

Answer

Long test names

Question 29

A team says "every refactor breaks hundreds of tests though behavior is unchanged." What's the likely root cause?

Accepted Answer

Tests assert implementation details (internal state, method names, component structure) rather than observable behavior

Answer

There are too few tests

Answer

Tests are written in TypeScript

Answer

CI runs too fast

Question 30

When is a statechart (e.g. XState) justified over a plain `useReducer`?

Accepted Answer

When the flow has nested and parallel states, timeouts, and many guarded transitions

Answer

For every single-field form

Answer

When there's just a simple boolean toggle

Answer

Because XState is always faster than React

Question 31

What's the main advantage of signals-based reactivity (Solid, Preact Signals, Angular) over React's component re-rendering?

Accepted Answer

Fine-grained updates; only a signal's dependents update, not the whole component subtree

Answer

Eliminating the need for JavaScript in the browser

Answer

No need for state management

Answer

Guaranteeing bug-free code

Question 32

What kind of site is the Islands architecture (like Astro) best suited for?

Accepted Answer

Mostly content sites with a few isolated interactive parts, where only those parts hydrate

Answer

Highly interactive apps like a design editor with extensive shared state

Answer

Apps with no server-rendered HTML at all

Answer

Only Electron desktop apps

Question 33

In a typeahead search, an older request's response arrives after a newer one and shows wrong results. What's the proper fix?

Accepted Answer

Latest-wins: cancel the previous request with `AbortController` or ignore stale responses

Answer

Increase debounce to 5 seconds

Answer

Send all requests synchronously

Answer

Sort results alphabetically

Question 34

What does the Circuit Breaker pattern provide in a frontend client calling an unstable service?

Accepted Answer

After repeated failures it fails requests fast for a while, sparing the service and letting the UI show a fallback

Answer

It retries requests infinitely until they succeed

Answer

It cuts power to the server

Answer

It hides all errors and returns empty data

Question 35

In an offline-first app, what is a key requirement of an outbox queue of mutations for later sync?

Accepted Answer

Mutations must be idempotent (e.g. client-generated IDs) with a defined conflict-resolution strategy

Answer

The queue must live only in RAM

Answer

Mutations should be sent in random order

Answer

All conflicts are always resolved by discarding user data

Question 36

For multi-user collaborative editing with offline and peer-to-peer support, why is a CRDT (like Yjs) often preferred over OT?

Accepted Answer

CRDTs guarantee convergence without a central coordinating server

Answer

CRDTs have zero memory overhead

Answer

OT only works on numbers

Answer

CRDTs need no network because they don't share data

Question 37

What's the trade-off of using a full DI container (like InversifyJS) in a typical React app?

Accepted Answer

Swap flexibility vs complexity, decorators, and hidden dependencies; ES modules and Context often suffice

Answer

It has no cost and should always be used

Answer

React can't run without a DI container

Answer

A DI container removes the need for testing

Question 38

In SSR (e.g. Next.js), why is a module-level (singleton) store holding user data dangerous?

Accepted Answer

The module is shared across different users' requests on the server, leaking one user's data to another

Answer

Because singletons aren't supported in Node.js

Answer

Because it prevents the page from rendering

Answer

Because it doubles bundle size

Question 39

Why does a global event bus that all parts of the app communicate through become problematic long-term?

Accepted Answer

Data flow becomes implicit and untraceable; it's unclear who emits or listens, and ordering is ambiguous

Answer

Because events are slow in JavaScript

Answer

Because browsers support at most 10 events

Answer

Because TypeScript can't define events

Question 40

Why is Context great for injecting stable dependencies (API client, logger) but poor for high-frequency state (like mouse position)?

Accepted Answer

Every value change re-renders all consumers, and Context has no built-in selector mechanism

Answer

Because Context only holds strings

Answer

Because Context is cleared every render

Answer

Because Context only works in class components

Question 41

In a frontend with complex business rules (e.g. pricing), what problem arises from putting those rules directly in components and handlers?

Accepted Answer

Rules get scattered and duplicated and are hard to test without rendering UI; centralize them in pure domain modules

Answer

No problem, since components are the right place for logic

Answer

Components can't do arithmetic

Answer

It reduces bundle size to zero

Question 42

How does DDD's Bounded Context help when partitioning a large frontend?

Accepted Answer

Each module owns its model and language; e.g. `Product` in catalog vs inventory can be modeled differently

Answer

A single comprehensive `Product` model must be used app-wide

Answer

All modules must share one browser database

Answer

It only applies to backend, not frontend

Question 43

What is an Architecture Decision Record (ADR) and why is it valuable?

Accepted Answer

A short document of an architecture decision with context, options, and consequences; it preserves the why for the future

Answer

A webpack configuration file

Answer

An automatic class diagram generator

Answer

The project's list of open bugs

Question 44

What is the implication of Conway's Law for frontend architecture?

Accepted Answer

System structure mirrors the org's communication structure; module boundaries should align with team boundaries

Answer

Transistor counts double every year

Answer

Code always takes longer than estimated

Answer

Components must be at most 100 lines

Question 45

In a codebase with hundreds of feature flags, what's the biggest long-term risk and how is it managed?

Accepted Answer

Combinatorial code paths and dead flags; managed with owners, expiry dates, and regular cleanup

Answer

Flags make TypeScript stop working

Answer

Flags fill up the database

Answer

No risk; flags should stay forever

Question 46

You built an `apiClient` wrapper, but developers keep needing to know axios is underneath to handle errors. What is this an example of?

Accepted Answer

A leaky abstraction; it should map errors to its own domain error type

Answer

Perfect encapsulation

Answer

Correctly applied Open/Closed Principle

Answer

The Flyweight pattern

Question 47

Modules `orders` and `customers` import each other, causing `undefined` bugs at load time. What's the proper architectural fix?

Accepted Answer

Extract the shared part into a lower third module or invert the dependency via an interface/event

Answer

Reorder imports until it happens to work

Answer

Merge all code into one giant file

Answer

Use `require` instead of `import` everywhere

Question 48

In RxJS, for form autosave where every request must run in order without cancellation, which operator fits?

Accepted Answer

`concatMap`

Answer

`switchMap`

Answer

`exhaustMap`

Answer

`mergeMap` with unlimited concurrency

Question 49

For a multi-step checkout flow with inventory reservation, payment, and compensation on failure, which pattern fits best?

Accepted Answer

A Saga/Process Manager that orchestrates steps and runs compensating actions on failure

Answer

A chain of `useEffect`s each triggering the next via state changes

Answer

A Singleton running all steps at once in parallel

Answer

No failure handling; the user refreshes the page

Question 50

In a component library, which props change is a breaking change under semver?

Accepted Answer

Narrowing an existing prop's type, e.g. from `string` to `"sm" | "md"`

Answer

Adding a new optional prop with a default

Answer

Widening a prop's type, e.g. from `"sm" | "md"` to `"sm" | "md" | "lg"`

Answer

Improving a prop's JSDoc documentation

Design Patterns · Senior · 50

What does Dependency Injection mainly give the frontend?