Middle Design Patterns Interview Questions (50 MCQs)

Question 1

What characterizes Compound Components?

Accepted Answer

Related components that implicitly share state

Answer

Only one shared CSS file

Answer

No nesting allowed

Answer

Requiring Redux

Question 2

In a Controlled component, where is the source of truth?

Accepted Answer

React state (`value` + `onChange`)

Answer

Only the DOM without React

Answer

The `.env` file

Answer

The CDN

Question 3

Which is an Observer example on the frontend?

Accepted Answer

DOM events / store subscriptions / IntersectionObserver

Answer

Only `border-radius`

Answer

JPEG compression

Answer

DNS lookup

Question 4

Why have custom hooks mostly replaced HOCs?

Accepted Answer

No wrapper hell or prop-name collisions, and simpler composition

Answer

HOCs were removed in React 19

Answer

Hooks don't run on the server

Answer

HOCs always cause TS errors

Question 5

What is the Strategy pattern?

Accepted Answer

Interchangeable algorithms behind a common interface (e.g. validators)

Answer

One big if/else for every case

Answer

An object-creation pattern

Answer

A routing pattern

Question 6

What is the Adapter pattern used for on the frontend?

Accepted Answer

Converting API response shapes into the app's model

Answer

Plugging in a laptop charger

Answer

Faster list rendering

Answer

Building animations

Question 7

What is the Facade pattern?

Accepted Answer

A simple interface over a complex subsystem

Answer

A full class copy

Answer

A testing pattern

Answer

A type of cache

Question 8

What is the Provider pattern in React?

Accepted Answer

An upstream component supplies values to its subtree via Context

Answer

Each component fetches from the server

Answer

A routing pattern

Answer

A mandatory HOC type

Question 9

How does Pub/Sub differ from classic Observer?

Accepted Answer

Pub/Sub uses a broker/channel so publishers and subscribers don't know each other

Answer

No difference

Answer

Observer is server-only

Answer

Pub/Sub must be synchronous

Question 10

What does the State Reducer pattern (as in Downshift) enable in reusable components?

Accepted Answer

The consumer passes a `stateReducer` to override internal state changes before they apply

Answer

The component stores its state in Redux

Answer

Internal state stays fully immutable and hidden

Answer

The reducer is only used to shrink bundle size

Question 11

What is the benefit of the prop getters pattern, like `getToggleProps()`, in a headless hook?

Accepted Answer

It returns required props (aria, handlers) and composes user handlers with internal ones

Answer

It automatically converts props into global state

Answer

It fully prevents component re-renders

Answer

It only works for class components

Question 12

What does the `as` prop do in a polymorphic component like `<Text as="h2">`?

Accepted Answer

Changes the rendered element or component while keeping styles and behavior

Answer

Lazy-loads the component

Answer

Casts the TypeScript type to `any`

Answer

Renders the component only on the server

Question 13

A `Layout` needs a header, sidebar, and content. Which composition approach fits best?

Accepted Answer

Accept several `ReactNode` props like `header` and `sidebar` (named slots)

Answer

Walk `children` with `React.Children` and detect slots by index

Answer

Accept HTML strings and use `dangerouslySetInnerHTML`

Answer

Store each section in Context and read it in Layout

Question 14

Why do teams sometimes split a Context into separate state and dispatch contexts?

Accepted Answer

So components needing only dispatch don't re-render on state changes

Answer

Because a single Context can't hold functions

Answer

So state is automatically persisted

Answer

Because React doesn't support more than one value per Context

Question 15

When should a custom hook return a tuple like `[value, setValue]` instead of an object?

Accepted Answer

When there are few values and consumers usually want to rename them freely

Answer

When the hook returns more than five values

Answer

Always, because objects aren't allowed in hooks

Answer

When values are optional and order doesn't matter

Question 16

When does using `useImperativeHandle` make sense?

Accepted Answer

When exposing a limited imperative API like `focus()` or `scrollToItem()` to a parent

Answer

To replace all props with ref methods

Answer

To share state between siblings

Answer

To fetch data on mount

Question 17

Which errors does a React Error Boundary NOT catch?

Accepted Answer

Errors in event handlers and async code like `setTimeout`

Answer

Errors during children's render

Answer

Errors in children's lifecycle methods

Answer

Errors in child component constructors

Question 18

In the Optimistic UI pattern, what should happen if the server request fails?

Accepted Answer

Roll back to the previous state and show the user an error

Answer

Keep the change since the user already saw it

Answer

Fully reload the page

Answer

Retry the request infinitely

Question 19

What does the Repository pattern offer in a frontend data layer?

Accepted Answer

Components are decoupled from data source details (REST, GraphQL, cache)

Answer

All data is automatically stored in Git

Answer

The need for error handling disappears

Answer

Requests always run faster

Question 20

Why create a central API client instead of calling `fetch` directly in components?

Accepted Answer

To centralize base URL, auth headers, error handling, and response mapping

Answer

Because `fetch` doesn't work inside React components

Answer

So requests never fail

Answer

To eliminate the need for HTTPS

Question 21

Why doesn't `debounce(fn, 300)` defined in a component body work correctly without `useMemo` or `useRef`?

Accepted Answer

Each render creates a new debounced function with its own timer

Answer

Because debounce only works in class components

Answer

Because React automatically clears all timers

Answer

Because `setTimeout` doesn't exist in the browser

Question 22

What problem can a simple `memoize` using `JSON.stringify(args)` as the cache key have?

Accepted Answer

Unbounded cache growth and wrong keys for functions, `undefined`, or different property order

Answer

None; it's accurate for all inputs

Answer

It just doesn't work for numbers

Answer

It makes the function async

Question 23

What's the recommended API to connect an external Observer-based store (with `subscribe`) to React?

Accepted Answer

`useSyncExternalStore`

Answer

`useEffect` with a class `forceUpdate`

Answer

`useLayoutEffect` without cleanup

Answer

`useId`

Question 24

How do Vue 3 and MobX use the Proxy pattern for reactivity?

Accepted Answer

They intercept get to track dependencies and set to trigger updates

Answer

They deep clone every object on each change

Answer

They poll for changes every 100ms

Answer

They rewrite the DOM directly with `innerHTML`

Question 25

Why is `status: "idle" | "loading" | "success" | "error"` better than several booleans like `isLoading` and `isError`?

Accepted Answer

It makes impossible states (like loading and error at once) unrepresentable

Answer

Because booleans are deprecated in TypeScript

Answer

Because strings use less memory than booleans

Answer

Because React only accepts strings in state

Question 26

A `Button` takes either `href` (link) or `onClick` (button), not both. What's the best props model?

Accepted Answer

A discriminated union of two prop types that rejects invalid combos at compile time

Answer

Make both optional and warn at runtime

Answer

Type all props as `any`

Answer

Create two components with fully duplicated code

Question 27

To implement a fluent interface like `schema.string().min(3).max(10)`, what should each method return?

Accepted Answer

The same object (`this`) or a new instance of the same type

Answer

Always `undefined`

Answer

A Promise

Answer

A JSON string

Question 28

What pattern does the Redux middleware signature `store => next => action => {...}` implement?

Accepted Answer

Chain of Responsibility with currying; each middleware can transform, stop, or pass the action to `next`

Answer

Singleton; only one middleware is allowed

Answer

Prototype; it clones the store

Answer

Flyweight; it shares actions between stores

Question 29

What is the core of the Flux architecture?

Accepted Answer

Unidirectional data flow: action → dispatcher → store → view

Answer

Two-way data binding between all components

Answer

Views mutating the store directly

Answer

Removing state from the app entirely

Question 30

Why should a selector returning `state.items.filter(...)` be memoized with `createSelector`?

Accepted Answer

Because it creates a new array every call, causing unnecessary re-renders

Answer

Because `filter` throws without memoization

Answer

Because Redux clears state otherwise

Answer

Because selectors must be async

Question 31

What is the benefit of normalizing state (e.g. `{ ids: [], entities: {} }`)?

Accepted Answer

Each entity is stored once, making updates simple and avoiding inconsistent duplicates

Answer

It reduces network requests to zero

Answer

It removes the need for list keys

Answer

It automatically stores state in the URL

Question 32

What's the advantage of mocking at the network level with MSW over mocking the `fetch` or axios module?

Accepted Answer

The real API client code is exercised and tests don't depend on the HTTP library

Answer

Tests connect to the production server

Answer

Assertions are no longer needed

Answer

It only works in E2E

Question 33

In Testing Library, which query is preferred for finding a button?

Accepted Answer

`getByRole("button", { name: /submit/i })`

Answer

`container.querySelector(".btn-primary")`

Answer

`getByTestId("submit-btn")` in all cases

Answer

Finding it via the component's internal state

Question 34

What is the benefit of the Page Object pattern in E2E tests (like Playwright)?

Accepted Answer

A page's selectors and interactions live in one class, so UI changes are fixed in one place

Answer

It runs tests without a browser

Answer

It removes the need to wait for elements

Answer

It turns every test into an HTML file

Question 35

How does `vi.spyOn(obj, "method")` differ from fully replacing a module with `vi.mock`?

Accepted Answer

A spy records calls and runs the original implementation by default

Answer

A spy always deletes the method

Answer

A spy only works on async functions

Answer

A spy needs no restore and persists across all tests

Question 36

Why use a test data factory like `buildUser({ role: "admin" })` in tests?

Accepted Answer

It builds valid defaults and each test overrides only the fields that matter to it

Answer

It reads data from the production database

Answer

It parallelizes tests automatically

Answer

It replaces assertions

Question 37

What's a common problem with large component snapshot tests?

Accepted Answer

They break on any tiny change and developers update them without reviewing

Answer

They never fail

Answer

They only run on the server

Answer

They require a real browser

Question 38

How does an `IconButton` wrapping a native button honor LSP?

Accepted Answer

It accepts native button props (`disabled`, `type`, `aria-*`, `ref`) and forwards them to `<button>`

Answer

It ignores all native props to keep the API simple

Answer

It renames `onClick` to `onPress` and rejects `onClick`

Answer

It always hard-codes `type="submit"`

Question 39

An `Avatar` needs only `imageUrl` and `name` but receives the whole `user` object. Which principle is violated?

Accepted Answer

Interface Segregation; it depends on more data than it needs

Answer

DRY; because it has duplicate code

Answer

Law of Demeter; because it uses hooks

Answer

No principle is violated

Question 40

`ProductList` calls `fetch("/api/products")` directly. What does applying DIP mean here?

Accepted Answer

Make it depend on an abstraction like `useProducts()` or a `products` prop, with data access separate

Answer

Replace `fetch` with `XMLHttpRequest`

Answer

Put the URL in a global variable

Answer

Convert it into a class component

Question 41

In Atomic Design, what is the correct order of levels from smallest to largest?

Accepted Answer

atoms → molecules → organisms → templates → pages

Answer

molecules → atoms → pages → organisms → templates

Answer

pages → templates → organisms → molecules → atoms

Answer

atoms → organisms → molecules → pages → templates

Question 42

In Feature-Sliced Design, what is the main import rule between layers?

Accepted Answer

A layer may only import from layers below it

Answer

A layer only imports from the layer above

Answer

All layers import from each other freely

Answer

Imports between layers are completely forbidden

Question 43

What problem does the Null Object pattern solve?

Accepted Answer

Removes repeated `if (x)` checks by providing a do-nothing implementation like `noopLogger`

Answer

Deleting all `null` values from the database

Answer

Preventing garbage collection

Answer

Converting `undefined` to `null` in JSON

Question 44

Why do modern subscription APIs (like `store.subscribe(fn)`) return an unsubscribe function?

Accepted Answer

To make cleanup simple, returnable directly from `useEffect`, preventing memory leaks

Answer

So the subscription runs twice automatically

Answer

Because JavaScript can't remove listeners by reference

Answer

So it can be serialized to localStorage

Question 45

What's the difference between `useState(createInitialState())` and `useState(createInitialState)`?

Accepted Answer

The second is lazy initialization; the function runs only on the first render

Answer

There's no difference

Answer

The second resets state on every render

Answer

The first throws a runtime error

Question 46

What does Command-Query Separation (CQS) say at the function level?

Accepted Answer

A function should either change state (command) or return data (query), not both

Answer

All functions must be async

Answer

Queries are only allowed in SQL

Answer

Every function must take exactly one parameter

Question 47

A `transfer(fromId: string, toId: string, amount: number)` whose arguments get swapped by mistake shows which code smell?

Accepted Answer

Primitive Obsession; branded types or value objects can help

Answer

Feature Envy

Answer

Dead Code

Answer

Shotgun Surgery

Question 48

What design problem does `<Button primary secondary danger small large />` have, and what's the fix?

Accepted Answer

Conflicting boolean props allow invalid combos; use enum props like `variant` and `size`

Answer

Too many props; put them all in Context

Answer

Boolean props are slow; use a JSON string

Answer

No problem; it's an ideal API

Question 49

What's the best way to implement a feature flag in frontend code?

Accepted Answer

Read flags from a central service or Context and choose the implementation at a single, clear point

Answer

Scatter `if (process.env.X)` across dozens of files with no clear owner

Answer

Comment out old code and keep it forever

Answer

Create a separate Git branch per user

Question 50

What pattern does `withRetry(fn, { retries: 3 })` implement, and what's important to watch for?

Accepted Answer

A Decorator over an async function; retry only transient errors (network, 5xx), not 4xx

Answer

Singleton; the function runs only once

Answer

Iterator; returns results one by one

Answer

Prototype; it clones the function

Design Patterns · Middle · 50

What characterizes Compound Components?