DEV Community: Aindrila Bhattacharjee

10 System Design Patterns You Must Know in 2026

Aindrila Bhattacharjee — Thu, 04 Jun 2026 12:30:35 +0000

Why Patterns Matter More Than Memorizing Architectures

System design interviews are not memory tests. No interviewer expects you to memorize the exact architecture of DoorDash's delivery tracking system. What they're evaluating is whether you have a mental toolkit of reusable patterns that you can compose to solve any design problem — including ones you've never seen before.

In 2026, the bar has risen. SDE-2 and SDE-3 candidates are expected to know not just what these patterns are, but when to apply them, what trade-offs they introduce, and when to explicitly reject them. This guide covers the 10 patterns that appear most frequently across FAANG, fintech, and high-growth startup interviews.

Pattern 1: Event Sourcing

The Core Idea

Instead of storing the current state of an entity (e.g., "Account balance: $1,500"), store every event that led to that state ("Deposit $2,000 → Withdraw $500 → Deposit $300 → Withdraw $300"). The current state is derived by replaying the event log.

When to Use It

Financial transaction systems where audit trails are regulatory requirements
Collaborative editing tools (Google Docs) where you need to replay changes
Systems with complex temporal queries ("What was the account balance on March 15th?")
Any domain where understanding how you arrived at a state is as important as the state itself

Trade-offs and Caveats

Pro: Perfect audit trail. Complete historical record. Easy to replay and rebuild projections.
Pro: Natural fit for event-driven architectures — your events are the source of truth, not a derived artifact.
Con: Current state reads require replaying the event log — mitigated by periodic snapshots (store a checkpoint every N events).
Con: Schema evolution is hard — old events must remain parseable as you change your domain model.

Interview signal: Mention snapshots without being prompted. Interviewers are looking for awareness of the read performance problem.

Pattern 2: CQRS (Command Query Responsibility Segregation)

The Core Idea

Separate the model/data store used for writes (commands) from the model/data store used for reads (queries). The write model is optimized for consistency and transactional integrity. The read model is optimized for query performance, often pre-joined and denormalized.

When to Use It

Systems with dramatically different read/write patterns (e.g., an e-commerce platform where reads outnumber writes 100:1)
When your read queries require complex joins that slow writes
Combined with Event Sourcing, where events update the write store and projections populate read stores

Trade-offs and Caveats

Pro: Read and write sides can be scaled independently. Read replicas can be added without affecting write throughput.
Con: Introduces eventual consistency between write and read models — the read model may lag. This is unacceptable for some use cases (e.g., problematic when users require read-your-writes consistency and the read model lag is unacceptable).
Con: Significant operational complexity — two data models to maintain, keep in sync, and evolve.

Interview signal: Always call out the eventual consistency problem and discuss when it's acceptable (social media feeds) vs. unacceptable (financial balances).

Pattern 3: Saga Pattern (Distributed Transactions)

The Core Idea

In a microservices architecture, a business operation that spans multiple services cannot use traditional ACID transactions. Two-phase commit introduces coordinator bottlenecks, blocking behavior, reduced availability, and operational complexity, making it unpopular in large-scale microservice systems. The Saga pattern decomposes the transaction into a sequence of local transactions, each publishing an event that triggers the next step. If any step fails, compensating transactions undo the previous steps.

When to Use It

E-commerce order processing: Reserve inventory → Charge payment → Schedule shipping — each in a different service
Travel booking: Book flight → Book hotel → Book car — where partial failure requires rollbacks
Any multi-service workflow requiring atomicity

Trade-offs and Caveats

Pro: No distributed locking. Services remain independently scalable and deployable.
Con: Complicated failure handling — compensating transactions must be idempotent and their own failures must be handled.
Con: Temporary inconsistency is visible — a user might see "Payment charged" before "Order confirmed" if a saga is mid-flight.

Two styles: Choreography (services react to events — decoupled but hard to track) vs. Orchestration (a saga orchestrator tells each service what to do — centralized visibility but a potential single point of failure).

Pattern 4: Sidecar Pattern

The Core Idea

Deploy auxiliary functionality (logging, monitoring, service mesh proxy, configuration management) in a separate container that runs alongside the main application container within the same pod (in Kubernetes). The sidecar shares the same lifecycle, network, and storage as the main container.

When to Use It

Service meshes (Envoy/Istio): Deploy a proxy sidecar that handles mTLS encryption, circuit breaking, and observability without touching application code
Log shipping: A sidecar reads log files and forwards them to a centralized aggregator (Fluentd, Datadog Agent)
Configuration polling: A sidecar watches for config changes and reloads the main application without a restart

Trade-offs and Caveats

Pro: Separation of concerns — network policy, observability, and security are managed outside application code
Pro: Language-agnostic — the same Envoy sidecar works for Java, Python, and Go services
Con: Increases resource usage (CPU/memory for each sidecar per pod) and adds network hop latency

Pattern 5: Circuit Breaker

The Core Idea

When a downstream service starts failing repeatedly, stop making calls to it temporarily instead of hammering it with retries. The circuit "opens" (stops requests) after a failure threshold, enters a "half-open" state periodically to test if the service recovered, and "closes" (resumes normal operation) when health is confirmed.

States and Transitions

Closed (normal): Requests flow through. Track failure count.
Open (failures exceeded threshold): All requests fail fast without calling downstream. A timer starts.
Half-Open (timer expired): Allow one probe request. If successful → Closed. If fails → Open again.

When to Use It

Any synchronous RPC call to an external dependency (payment gateway, third-party API, another microservice). Essential for preventing cascading failures in distributed systems.

Interview signal: Discuss the difference between Circuit Breaker and Retry. Retries are for transient errors (network blip). Circuit Breakers are for sustained degradation. Using retries without Circuit Breakers during sustained outages can amplify the problem with retry storms.

Pattern 6: Outbox Pattern

The Core Idea

When a service needs to both update its database AND publish a message to a message broker (Kafka, RabbitMQ), these are two separate I/O operations — and they can fail independently, leading to inconsistency. The Outbox pattern writes the message to an "outbox" table in the same database transaction as the business data update. A separate relay process reads the outbox and publishes to the broker.

Why It Matters

Without the Outbox pattern, you get "dual write" problems: the DB update succeeds but the message publish fails (no one is notified of the order), or the message publishes but the DB rollback fails (the system thinks the order was created when it wasn't). The Outbox pattern guarantees atomic persistence of business data and events, enabling at-least-once delivery. Consumers must still be idempotent because duplicate event publication can occur.

When to Use It

Any microservice that needs to reliably publish events upon state changes
Financial systems where "event published exactly once" is a compliance requirement

Pattern 7: Consistent Hashing

The Core Idea

A technique for distributing data/requests across a ring of nodes such that when a node is added or removed, only K/N keys need to be remapped (where K = number of keys, N = number of nodes) — not a complete redistribution.

When to Use It

Distributed caches (Redis Cluster, Memcached) where you need to shard data across multiple cache nodes without rehashing everything when a node is added
Load balancing with session affinity — route the same user to the same backend server
Content delivery networks — route requests to the nearest cache node

Virtual Nodes

A critical detail to mention in interviews: without virtual nodes, consistent hashing distributes load unevenly because physical nodes can be clustered on the ring. Virtual nodes assign each physical node multiple positions on the ring, achieving far more even distribution. This is how DynamoDB and Cassandra implement their partitioning.

Pattern 8: Rate Limiting (Token Bucket vs Leaky Bucket)

The Core Idea

Control the rate at which requests are processed to prevent abuse, protect backend services, and ensure fair resource distribution among clients.

Token Bucket

A bucket holds tokens (up to a max capacity). Tokens are added at a fixed rate. Each request consumes a token. If the bucket is empty, requests are rejected or queued. Allows bursting up to bucket capacity before throttling kicks in. Ideal for APIs where occasional bursts are acceptable.

Leaky Bucket

Requests enter a queue (the bucket) and are processed at a fixed rate (they "leak" out). If the queue is full, new requests are rejected. No bursting — output is always at a constant rate. Ideal for smooth egress to downstream services.

Sliding Window Counter (Most Interview-Recommended)

Combines the precision of a fixed window counter with burst smoothing, avoiding the boundary-condition problem of fixed windows (where 2×limit requests can pass by clustering at window boundaries). Uses Redis to implement efficiently across distributed instances.

Pattern 9: Bulkhead Pattern

The Core Idea

Isolate elements of an application into pools so that if one fails, the others continue to function. Named after ship bulkheads that divide a hull into watertight compartments — if one compartment floods, the ship doesn't sink.

Application in Software

Thread pool isolation: Assign dedicated thread pools to different downstream dependencies. A slow payment gateway exhausts its allocated 20 threads without affecting the 50 threads serving product catalog requests.
Connection pool isolation: Separate database connection pools for critical vs. non-critical operations.
Kubernetes resource limits: Set CPU and memory limits per pod so a runaway service can't starve other services on the same node.

Interview signal: Mention that Bulkhead is complementary to Circuit Breaker — they solve related but different problems. Circuit Breaker stops calling a broken downstream. Bulkhead prevents a broken call from consuming all resources and starving other healthy calls.

Pattern 10: Write-Through vs Write-Behind vs Cache-Aside

Why Caching Strategy Is a Design Pattern

Every system design question with a database will involve a cache. The strategy for keeping the cache and database consistent is a first-class design decision — and most candidates undersell it.

Cache-Aside (Lazy Loading)

Application reads from cache. On miss: reads from DB, writes to cache, returns result. Application writes go directly to DB, optionally invalidating/updating the cache. Most common pattern. Cache only contains frequently accessed data. Risk: cache stampede on cold start (N simultaneous requests all miss, all hit DB).

Write-Through

Every write goes to both the cache and DB synchronously. Cache is always fresh. Risk: every write is slower (two I/O operations). Cache accumulates data that may never be read.

Write-Behind (Write-Back)

Writes go to cache only and return immediately. A background process asynchronously flushes cache to DB. Highest write throughput. Risk: data loss if the cache fails before flushing. Not appropriate for financial or audit-critical data.

Interview signal: When asked about caching, immediately clarify which strategy you're proposing and justify why given the consistency and durability requirements of the system.

How to Apply These Patterns in an Interview

Knowing the patterns is the entry point. Using them well requires:

Identify the core constraint: Is the problem latency? Consistency? Throughput? Fault tolerance? This determines which patterns are relevant.
Propose a pattern with justification: "I'd use Event Sourcing here because the financial audit requirement means we need a complete immutable history of all changes."
Proactively call out trade-offs: Interviewers are waiting for you to acknowledge the downsides. They know the patterns — they want to know if you do.
Compose patterns: Real systems use multiple patterns. Event Sourcing + CQRS + Outbox is a common production combination for event-driven microservices.

Practice System Design with AI

System design is a skill that requires practice in the format of the actual interview — open-ended, interactive, with follow-up probing. Reading this article builds your vocabulary. Practicing out loud builds your performance.

MockExperts' AI interviewer simulates full system design rounds with adaptive follow-up questions, drawing from real interview patterns at FAANG companies and high-growth startups. Start a free system design mock interview and test how well you can apply these patterns under realistic interview pressure.

🔑 Crack Scalable Architecture & System Design:
Master high-level scalability. Read the 2026 System Design Masterclass: Scalability Patterns for Senior Engineers and test your distributed systems knowledge inside our AI System Design Simulator.

Frontend Engineering in 2026: Mastering Performance and DX

Aindrila Bhattacharjee — Fri, 29 May 2026 03:46:21 +0000

The Redefinition of "Frontend Engineer" in 2026

The era of the frontend engineer as a purely visual specialist is over. In 2026, companies like Vercel, Linear, Figma, Shopify, and major FAANG divisions expect their frontend engineers to think in terms of systems, not just components. A modern frontend engineer must understand rendering pipelines, browser internals, network optimization, and component architecture at the same depth that a backend engineer understands database indexing or API design.

This shift is reflected directly in how companies interview frontend candidates. If you walk into a 2026 frontend interview expecting to answer "what's the difference between let and const," you will be humbled. This guide covers everything you need to know to pass a senior-level frontend interview at a top tech company.

Core Web Vitals: The Mandatory Topic You Can't Skip

Google's Core Web Vitals have become a standard lens through which senior frontend engineers are evaluated. Interviewers now routinely ask candidates to diagnose performance bottlenecks using CWV metrics. The three primary metrics are:

LCP (Largest Contentful Paint): Measures perceived load speed. Target under 2.5 seconds. Optimized via image preloading, server-side rendering, and CDN caching.
INP (Interaction to Next Paint): Replaced FID in 2024. Measures responsiveness. Optimized by breaking up long tasks, using web workers, and deferring non-critical JavaScript.
CLS (Cumulative Layout Shift): Measures visual stability. Prevents jarring layout shifts by pre-defining dimensions for images, iframes, and dynamic content.

Be prepared to walk through a real-world scenario: "Given an LCP score of 4.2s, what is your systematic debugging and optimization approach?" This is now a standard senior frontend interview question.

React 19 and the Concurrent Rendering Model

React 19 introduced a fully concurrent rendering model that fundamentally changes how components behave. Key concepts interviewers probe in 2026 include:

Server Components vs. Client Components: Understanding the boundary between what renders on the server and what hydrates on the client is critical for Next.js App Router architectures.
Suspense and Streaming: How streaming HTML from the server enables progressive hydration and improves Time to First Byte (TTFB).
Transitions and useTransition: Deferring non-urgent state updates to keep the UI responsive during expensive re-renders.
useDeferredValue: Separating urgent updates from background computations, such as filtering large lists.

Frontend System Design: A Growing Interview Pillar

One of the most significant shifts in senior frontend interviews is the rise of frontend system design rounds. These are analogous to backend system design, but focused on browser rendering, state management, and component architecture at scale.

Common prompts include:

"Design a real-time collaborative document editor (like Google Docs)"
"Design a virtualized infinite-scrolling feed for 100M users."
"Design a component library that supports multiple themes and is accessible by default."

A strong answer covers: state management strategy (Zustand, Jotai, Redux Toolkit), rendering strategy (SSR, CSR, ISR), caching layers (React Query, SWR), code splitting, and accessibility considerations.

Advanced TypeScript: Expected, Not Optional

TypeScript fluency is now table stakes for senior frontend roles. Interviewers in 2026 test beyond basic generics. Expect questions on:

Conditional Types: Building types that change based on input type parameters.
Mapped Types: Transforming existing object types programmatically.
Template Literal Types: Generating string union types from combinations.
Discriminated Unions: Modeling complex state machines in a type-safe way.

Micro-Frontend Architectures

At larger organizations, candidates for senior and principal frontend roles are expected to have opinions on micro-frontend architecture. Be prepared to discuss the trade-offs between Module Federation (Webpack 5), single-spa, and iframe-based isolation. Interviewers want to understand: how do you share state between micro-frontends? How do you handle shared dependencies to avoid bundle duplication? How do you manage routing across independently deployed shells?

The Behavioral and Philosophy Round

For senior roles, behavioral rounds probe your engineering philosophy. Prepare for questions like:

"Tell me about a time you had to make a performance vs. developer experience trade-off."
"How do you approach setting frontend coding standards for a team of 20 engineers?"
"Describe how you've mentored a junior engineer to ownership of a complex feature."

How to Practice for Senior Frontend Interviews

The best preparation combines reading documentation deeply, building small proof-of-concept projects, and conducting timed mock interviews. Use MockExperts' AI mock interview platform to simulate senior frontend rounds—our AI will challenge your component architecture decisions, probe your understanding of rendering trade-offs, and score your communication quality in real-time.

Most importantly, stop thinking of yourself as a "UI developer." Start thinking like a frontend systems engineer—and your interviews will reflect that shift.

Conclusion

Frontend engineering in 2026 is a deep, architectural discipline that demands mastery of performance, rendering models, TypeScript, and large-scale component systems. Companies are looking for engineers who can build fast, accessible, maintainable interfaces at scale—and whose technical instincts are validated by data, not just intuition. Prepare accordingly, and you'll stand out in a crowded candidate pool.

Run a senior frontend mock interview on MockExperts now →

💻 Master Your Frontend Loops:

Advance your frontend skills further. Check out our 10 Modern JavaScript Patterns for Senior Frontend Interviews and baseline your coding performance on our secure AI Frontend Sandbox.

25 React Interview Questions 2026 (With Answers) — Hooks, React 19, Concurrent Mode

Aindrila Bhattacharjee — Fri, 22 May 2026 13:56:09 +0000

React powers the frontends of Facebook, Instagram, Netflix, Airbnb, and thousands of top tech startups. With over 40% market share among frontend frameworks, React remains the most sought-after skill for frontend developers in 2026.

Whether you're preparing for a startup loop or a FAANG panel, this comprehensive list of 25 React interview questions—updated with React 19 paradigms and modern performance patterns—will ensure you stand out.

🚀 Fundamentals (Questions 1-8)

1. What is the Virtual DOM and how does React use it?

The Virtual DOM (VDOM) is an in-memory, lightweight representation of the real browser DOM.

When a component's state or props change, React updates the Virtual DOM first. The process follows three main steps:

Render: React generates a new Virtual DOM tree representing the updated UI.
Reconciliation (Diffing): React compares the new Virtual DOM tree with the previous one using a highly optimized O(n) diffing algorithm.
Commit: React computes the minimal set of changes needed and applies them to the real DOM (via batching), minimizing expensive layout recalculations in the browser.

2. What is JSX and why does React use it?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like structures directly inside your JavaScript code.

JSX is not valid browser JavaScript; it must be compiled (typically using Babel or SWC) before execution. Under the hood, JSX compiles to standard function calls. In modern React (17+), JSX compiles using the automatic JSX transform:

// What you write:
const element = <h1 className="title">Hello World</h1>;

// What it compiles to:
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello World' });

React uses JSX because it combines UI markup and rendering logic in one place, enhancing readability, developer experience (DX), and enabling compile-time syntax checks.

3. Explain the difference between controlled and uncontrolled components.

Controlled Components: The form input data is handled by React state. React serves as the "single source of truth" for the input values, updating the state on every keystroke.
Uncontrolled Components: The form data is handled directly by the browser DOM. React accesses the DOM node when needed (usually on submission) using useRef.

Controlled Component Example:

import { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  return (
    <input 
      type="text" 
      value={value} 
      onChange={(e) => setValue(e.target.value)} 
    />
  );
}

Uncontrolled Component Example:

import { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Input Value: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

Verdict: Controlled components are preferred for most real-world scenarios because they enable instant field validation, dynamic disabling of submit buttons, and enforce predictable state.

4. What are React keys and why are they important?

Keys are unique, stable strings assigned to elements in a list. They serve as an identity card for React's reconciliation engine.

<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

Why they are critical:

Reconciliation Guide: When list items change, are reordered, or deleted, keys tell React which specific element in the real DOM should be updated, kept, or destroyed.
Indices as Keys Warning: Using the array index (key={index}) as a key is an anti-pattern for dynamic lists. If list items are reordered, filtered, or inserted at the top, React will mismatch the DOM state with the component instances, causing visual glitches and rendering bugs.

5. What is prop drilling and how do you avoid it?

Prop drilling occurs when data is passed from a parent component down through multiple layers of nested child components that do not actually need the data, simply to deliver it to a deeply nested target component.

How to avoid it:

Component Composition: Pass components or children down directly, keeping the state logic in the parent:
```
<ParentLayout>
  <DeepChild user={user} />
</ParentLayout>
```
React Context API: Ideal for global, low-frequency state updates like themes, user authentication, or language settings.
State Management Libraries: Using lightweight global stores like Zustand, Redux Toolkit, or Jotai.

6. Explain the React component lifecycle in functional components.

In modern functional React, lifecycle methods are replaced by Hooks (primarily useEffect):

Mounting: The component is rendered for the first time.

useEffect(() => {
  console.log('Component mounted');
  // API calls, event listeners setup
}, []); // Empty dependency array

Updating: The state or props of the component change, triggering a re-render.

useEffect(() => {
  console.log('Dependency changed, component updated');
}, [dependency]); // Runs on mount and whenever the dependency changes

Unmounting: The component is removed from the DOM.

useEffect(() => {
  return () => {
    console.log('Component will unmount');
    // Clean up subscriptions, intervals, event listeners
  };
}, []);

7. What is the difference between state and props?

Feature	State	Props
Definition	Component's local, internal memory	Data passed down from a parent component
Mutability	Mutable (via updater function like `setState`)	Immutable (read-only within the receiver)
Scope	Local to the component that defined it	Dynamic; controlled by the parent component
Re-render	Triggers component and children to re-render	Triggers component and children to re-render

8. How does React handle events differently from vanilla JavaScript?

React abstracts standard DOM events through SyntheticEvents:

Cross-Browser Compatibility: React wraps native browser events in a SyntheticEvent instance, ensuring that event properties behave identically across Chrome, Safari, Firefox, and Edge.
CamelCase Naming: Event handlers are named using camelCase (e.g., onClick, onSubmit) rather than lowercase (e.g., onclick, onsubmit).
Event Delegation: Instead of attaching event handlers to individual DOM nodes, React attaches a single listener to the root container of your application (#root) and bubbles events up for maximum memory efficiency.

⚓ Hooks Deep Dive (Questions 9-15)

9. Explain `useState` vs `useReducer`. When would you use each?

useState is designed for managing simple, independent state variables (numbers, strings, booleans, or shallow objects).
useReducer is suited for complex state trees, multi-step forms, or state where the next state depends heavily on the previous state.

useReducer Example:

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    case 'DECREMENT': return { count: state.count - 1 };
    default: return state;
  }
};

const [state, dispatch] = useReducer(reducer, { count: 0 });

Rule of Thumb: Use useReducer when you have 3+ interrelated state variables or when your state-updating logic starts leaking out of your component and needs to be isolated for clean testing.

10. What are the rules of hooks?

React enforces two strict rules for all Hooks:

Only call Hooks at the top level: Do not call Hooks inside loops, conditional statements, or nested functions. This ensures React maps state variables in the exact same call sequence on every re-render.
Only call Hooks from React functions: Call them from React functional components or custom hooks. Do not call Hooks from regular JavaScript utility functions.

Tip: Enable eslint-plugin-react-hooks in your project to automatically catch rule violations at compile time.

11. How does `useEffect` cleanup work?

The cleanup function is the function returned from inside your useEffect callback. It executes:

Immediately before the effect re-runs (to clean up residual side effects from the previous render).
When the component unmounts from the DOM.

useEffect(() => {
  const handleResize = () => console.log(window.innerWidth);
  window.addEventListener('resize', handleResize);

  // Cleanup Function:
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

Failing to clean up event listeners, WebSocket channels, or polling intervals results in memory leaks that degrade web application performance.

12. What is `useMemo` and when should you use it?

useMemo caches (memoizes) the computed result of an expensive calculation, recalculating it only when its specified dependency values change.

const heavyCalculation = useMemo(() => {
  return performComplexSort(dataSet);
}, [dataSet]); // Recalculates only when dataSet changes

When to use it:

Heavy Computations: CPU-intensive tasks like sorting large arrays, parsing complex JSON structures, or rendering complex mathematical graphs.
Referential Equality: Caching object references passed down as props to children to prevent child re-renders.
Warning: Do not wrap every variable in useMemo. Overusing it adds garbage collection and dependency check overhead, which can actually slow down simple rendering.

13. Explain `useCallback` and its relationship with `React.memo`.

useCallback memoizes the function reference itself, preventing it from being re-created on every single render.
React.memo is a higher-order component that prevents a child component from re-rendering unless its props change.

// Parent Component
const handleButtonClick = useCallback(() => {
  console.log("Clicked!");
}, []); // Reference remains identical across renders

return <MemoizedButton onClick={handleButtonClick} />;

Without useCallback, a standard child component wrapped in React.memo will still re-render on every parent change because inline functions are re-created with new memory references on every tick, failing shallow prop equality checks.

14. What is `useRef` and how does it differ from `useState`?

useRef returns a mutable object whose .current property persists throughout the lifecycle of the component. Crucially, updating .current does not trigger a component re-render.
useState preserves state values across renders and explicitly triggers a re-render whenever the state updater function is called.

// useRef: Perfect for capturing DOM references directly
const inputElement = useRef(null);
const focusInput = () => inputElement.current.focus();

Use useRef when storing values that don't affect the visual output of the UI (e.g., keeping track of timer intervals, click counts, or previous state references).

15. How do you create a custom hook? Give an example.

A custom hook is a standard JavaScript function whose name starts with "use" and which calls other React hooks internally. It allows you to extract complex stateful logic out of your UI components.

Reusable Custom Fetch Hook Example:

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let active = true;
    setLoading(true);

    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        if (active) {
          setData(data);
          setLoading(false);
        }
      });

    return () => {
      active = false; // Aborts stale responses
    };
  }, [url]);

  return { data, loading };
}

⚡ Performance & Advanced (Questions 16-21)

16. How do you optimize React app performance?

When discussing optimizations, focus on these five core pillars:

Code Splitting: Dynamic importing of routing pages using React.lazy() and <Suspense />.
Memoization: Strategic application of React.memo(), useCallback(), and useMemo() to halt unnecessary renders.
List Virtualization: Utilizing libraries like react-window or react-virtualized to only render the visible DOM nodes of a 10,000+ item list.
Debouncing / Throttling: Delaying heavy search API calls or scroll listeners.
State Colocation: Moving local states as close as possible to the components that actually use them to avoid sweeping parent-child re-render chains.

17. What is code splitting and how does React implement it?

Code splitting is the practice of breaking down a large, single production JavaScript bundle into multiple smaller chunks that are loaded dynamically (on-demand) as the user navigates your application.

import { lazy, Suspense } from 'react';

// Heavy component loaded lazily:
const DashboardChart = lazy(() => import('./DashboardChart'));

function App() {
  return (
    <Suspense fallback={<div>Loading Dashboard Chart...</div>}>
      <DashboardChart />
    </Suspense>
  );
}

This reduces the initial page load time, maximizing core web vitals and overall page speeds.

18. Explain React's reconciliation algorithm.

The reconciliation algorithm determines how React updates the real DOM. Instead of comparing whole trees with O(n³) complexity, React uses heuristic rules to run at O(n) speeds:

Different Element Types: If two elements have different types (e.g., swapping a <div> for a <section>), React tears down the entire subtree and mounts a completely new one from scratch.
Same Element Types: If two elements have the same type, React compares the attributes/props, updates only the changed attributes, and recursively moves down to diff the children.
Keys Strategy: When diffing children, React relies on keys to quickly match items in the old list with items in the new list, minimizing DOM rearrangements.

19. What are React Server Components (RSC)?

React Server Components (RSC) are a new architectural paradigm where components can render entirely on the server.

Server Components (Default): Render on the server, have zero impact on the client-side bundle size, can directly fetch database query results or secure API keys, and cannot use client hooks like useState or useEffect.
Client Components (Opt-in via "use client"): Hydrated on the client-side, fully interactive, and are free to use hooks, event listeners, and standard browser APIs.

RSCs allow you to build complex web apps with minimal client JavaScript, faster page load speeds, and improved SEO.

20. What is Suspense and how is it used in React 19?

Suspense is a built-in React component that lets you declaratively handle loading states across your application. It acts as an orchestrator, catching promises thrown by children fetching data or code-splitting.

In React 19, Suspense is deeply integrated with the framework:

It supports streaming server-side rendering (SSR), sending static sections to the browser immediately and hydration-streaming dynamic sections as data fetches resolve.
It handles resource loading (stylesheets, scripts, fonts) seamlessly, ensuring components render only after critical dependencies are ready in the browser.

21. Explain React's error boundaries.

An Error Boundary is a React component that catches JavaScript errors anywhere in its child component tree, logs the crash diagnostics, and displays a backup fallback UI instead of letting the entire web page crash blank.

Note: Error boundaries must currently be written as class components, as functional hooks do not support componentDidCatch or getDerivedStateFromError yet.

import React from 'react';

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true }; // Updates state to render fallback UI
  }

  componentDidCatch(error, errorInfo) {
    console.error("ErrorBoundary caught an error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Oops! Something went wrong.</h2>;
    }
    return this.props.children;
  }
}

🗃️ State Management & Patterns (Questions 22-25)

22. Compare Context API, Redux, and Zustand.

Context API: Built directly into React. Excellent for static or low-frequency updates (e.g., dark mode, user session). However, it is not optimized for rapid updates, as any value change forces all consumer components downstream to re-render.
Redux Toolkit: The classic, battle-tested standard. Strong ecosystem, middleware integration, and top-tier debugging (DevTools). However, it can be boilerplate-heavy for simple states.
Zustand: A modern, ultra-lightweight state manager. Based on a publish-subscribe model, it has zero boilerplate, does not wrap your app in providers, and allows hooks-based selective consumption, preventing unwanted renders.

23. What is the React Compiler (React Forget)?

The React Compiler is a new build-time tool introduced in React 19.

Traditionally, developers had to manually optimize components using useMemo, useCallback, and React.memo to avoid wasteful re-renders. The React Compiler automatically compiles your component tree at build time, injecting auto-memoization logic where it identifies that outputs won't change.

This brings the performance of hand-optimized code to standard React code without manual hook pollution.

24. Explain the render props pattern vs custom hooks.

Render Props Pattern: Sharing code by passing a function as a prop, letting the receiving component decide how to render details:
```
<MouseTracker render={(mouse) => (
  <h1>Mouse position is: {mouse.x}, {mouse.y}</h1>
)} />
```
Custom Hooks: Extracts stateful logic directly into clean functions, avoiding component nesting ("wrapper hell"):
```
const { x, y } = useMousePosition();
return <h1>Mouse position is: {x}, {y}</h1>;
```

Verdict: While render props are still useful for layout components, custom hooks are the standard choice for sharing stateful business logic.

25. How do you handle authentication in a React app?

Authentication typically follows this robust pattern:

State Storage: Store the user session/JWT token in a secure global state (like a Context Provider or Zustand store).
API Requests: Attach the JWT token inside HTTP headers (using an Axios Request Interceptor) for all outgoing requests.

Route Protection: Wrap sensitive dashboard routes inside a ProtectedRoute component:

function ProtectedRoute({ children }) {
  const { isAuthenticated } = useAuth();
  return isAuthenticated ? children : <Navigate to="/login" />;
}

Token Refreshing: Set up interceptors to automatically listen for 401 Unauthorized statuses and refresh expired tokens securely in the background.

🎯 Elevate Your Frontend Prep with MockExperts

Reading the answers is just the first step. To pass high-stakes frontend interview loops, you need to communicate these concepts clearly under pressure.

Try MockExperts' proctored AI Interview Simulator to practice live coding, dynamic React 19 system design, and behavioural rounds with instant, actionable feedback.

👉 Practice a Free Mock Interview now: MockExperts.com

2026 AI Engineer Interview Guide: RAG, LLMs, and Vector Databases

Aindrila Bhattacharjee — Mon, 18 May 2026 04:13:37 +0000

The Role of the Decade: Why AI Engineering is Not Just Python

In 2026, building software is trivial; building intelligent, robust, and verifiable systems is the real challenge. The AI Engineer role has surpassed the traditional "Full Stack" position in both demand and compensation. But the technical interview for this role is a hybrid beast—part software architecture, part data engineering, and part model optimization. You are being hired as the bridge between "Research" and "Production."

This guide is your deep-dive roadmap to the 2026 AI technical stack, focusing on Production-grade RAG, Agentic Orchestration, and Automated Evaluation Frameworks. If you want to work at the likes of Scale AI, OpenAI, or a high-growth AI startup, this is what they expect you to know.

I. Production RAG: Beyond the "Chat with PDF" Demo

Every junior developer can build a "Chat with PDF" app in 15 minutes using LangChain. In a Senior AI Engineer interview, you will be expected to discuss Systemic Retrieval Failures and how to architect a "Robust Retrieval" pipeline that works for 100M documents.

The "Advanced Retrieval" Playbook

Hybrid Search (Dense + Sparse): How to combine the semantic power of Vector search (Dense) with the exact-match precision of BM25 (Keyword search). Why do we need "Reciprocal Rank Fusion" (RRF) to merge these results efficiently? Why is vector search bad for part numbers or specific email addresses?
Query Transformation Architectures: Using an LLM as a pre-processor to "re-write" a bad user query into 3 distinct technical queries. Understand HyDE (Hypothetical Document Embeddings) - how creating a "fake" answer first can improve retrieval recall.
Reranking (The Cross-Encoder Round): Why vector search only gets you the "top 20 likely" candidates, and why you need a second, much smarter model (a Cross-Encoder) to sort those 20 chunks accurately before the LLM sees them. Discuss the latency vs. accuracy trade-off. Rerankers are 10x more accurate but 100x slower.
Document Chunking 2.0: Moving away from "Fixed characters" to "Semantic Chunking" where the model understands the logical boundaries of paragraphs and sections. How do you handle "over-chunking" where info is lost? (Answer: Recursive Character Splitting with Overlap).

The Math of Embeddings

Don't just use embed(). Know the difference:

Cosine Similarity vs. Dot Product: When does one matter over the other? (Dot product is faster but requires normalized vectors; Cosine similarity handles magnitude better).
Dimensions & Quantization: Why 1536 dimensions is the standard and how to use Matryoshka Embeddings to truncate dimensions without losing semantic power.

Handling Multi-Modal Data

In 2026, RAG isn't just text. Be ready to discuss how to index images (using CLIP-like models), tables (using specialized markdown parsing or vision-to-text), and even video timestamps. How do you maintain the relationship between a complex graph image and the text that explains it in a 500-page report?

II. Agentic Orchestration: Reasoning Loops and Memory

The AI industry has moved away from simple "Chains" (A -> B -> C) toward "Cyclic Agents" (Think -> Act -> Observe -> Repeat). Interviewers now look for your understanding of LangGraph vs. LlamaIndex Workflows. The core question is: "How do you give the model a sense of agency without letting it loop forever?".

The "Thinking Agent" Architecture

Tool Calling (Function Calling): How to reliably get an LLM to output valid, structured JSON for API calls. What happens when the API returns an error? How does the agent "reflect" on the error and retry with a better prompt? Discuss Structured Outputs (Pydantic in Python / Zod in TypeScript).
Persistent State & Checkpoints: Handling "Threads." How do you design an agent that can pause for 2 days while waiting for human-in-the-loop approval (e.g., for a bank transfer) and then resume its reasoning perfectly? This is the core of "Long-running Agents."
Architectural Persistence (Memory): Differentiating between "Short-term context" (the current sliding window) and "Long-term semantic memory" (storing summarized past interactions in a dedicated database). How do you decide what to forget?

III. Vector Databases: The New Production Pillar

You must defend your choice of database: Pinecone, Weaviate, Milvus, Qdrant, or pgvector?

Namespaces and Multitenancy: How do you ensure "User A" never sees the embedded data of "User B" in a shared vector index? Discuss "Metadata Filtering" at the index level vs. post-retrieval filtering.
Index Optimizations: HNSW (Hierarchical Navigable Small World) for high recall vs. IVF (Inverted File Index) for lower memory footprint. Discuss Product Quantization (PQ) as a way to scale to billions of vectors while saving 90% on RAM costs.
The SSD vs RAM Trade-off: Understanding how modern vector DBs like Pinecone "serverless" manage the disk-to-memory throughput for massive datasets without charging for idle RAM.

IV. Fine-Tuning vs. RAG: When to do what?

One of the most common interview traps.

RAG: For Dynamic Knowledge. (e.g., Today's news, user-specific data).
Fine-Tuning: For Format, Tone, and Domain Logic. (e.g., Teaching a model how to write code in a proprietary language or output a very specific JSON schema).
Techniques: Understand LoRA (Low-Rank Adaptation) and QLoRA - how to fine-tune a model on a consumer GPU. Discuss SFT (Supervised Fine-Tuning) vs. DPO (Direct Preference Optimization).

V. Quantization and Model Optimization

As an AI Engineer, you must care about the cost of inference.

Quantization Formats: GGUF (for CPU/Apple Silicon), EXL2 (for high-speed GPU), and AWQ. How does 4-bit quantization affect the perplexity of a model?
Model Distillation: How do you use GPT-4 to train a tiny 1B parameter model to perform the same specific classification task for 1/100th the cost?
Inference Servers: Comparing vLLM, TGI (Text Generation Inference), and NVIDIA Triton. Discuss "Continuous Batching" and why it increases throughput by 5-10x.

VI. Evaluation and MLOps: The Secret to Production-Ready AI

This is the round that separates the hobbyists from the senior engineers. How do you prove that your AI system is actually better today than it was yesterday?

Automated Evaluation (LLM-as-a-Judge): Using a frontier model like Claude 3.5 or GPT-4o to grade the output of your production model. How do you prevent "Identity Bias" where an LLM prefers its own style?
The RAG Triad Metrics: Master Ragas (Retrieval Augmented Generation Assessment):
- Faithfulness: Does the answer contradict the retrieved source? (No hallucinations).
- Answer Relevance: Does it actually answer the user's question?
- Context Relevance: Was the retrieved data actually useful?
Tracing and Observability (OpenTelemetry for AI): Using LangSmith or Arize Phoenix to "trace" every step of a 15-step agentic loop. "Where did the agent decide to call the wrong tool?"
Guardrails & Safety: Implementing NeMo Guardrails or Guardrails AI to ensure the model never discusses competitors, leaks secrets, or generates PII.

VII. The Ethics of Intelligence: Bias and Alignment

In 2026, you cannot ignore the social impact of your algorithms.

Algorithmic Bias: How do you detect and mitigate bias in your training data or prompt templates? Discuss the use of "Counterfactual Testing."
The Multi-modal Safety Gap: Why is it harder to filter safe content in images and video than in text? Discuss the state of the art in "Vision-Language Safety Models."
The Energy Cost of AI: Being aware of the carbon footprint of training massive models. How do you optimize for "Inference Efficiency" to reduce the global compute load?

VIII. The Future of AI Engineering: Reasoning vs. Retrieval

In mid-2026, the industry is debating if "Infinite Context" will eventually kill RAG.

Long-Context Window Strategy: How to decide between putting 2M tokens in the prompt vs. using a Vector DB. Discuss the cost-per-query implications and the "Lost in the Middle" phenomenon in massive prompts.
Stateful Inference: How new inference models are moving beyond "Stateless" requests toward "Stateful Sessions" where the model maintains a permanent reasoning state across hours of interaction.

IX. Preparation Roadmap for the 2026 AI Role

[ ] The Technical Prototype: Build a hybrid-search RAG pipeline that includes a Reranker step and a "Query Expansion" loop. Be ready to explain the latency of every component.
[ ] The Math Deep-Dive: Understand Tokenization (BPE), Temperature, Top-P, and the "Attention" mechanism at a high level. Explain "KV Caching."
[ ] The System Design: Practice designing a "Self-Healing Technical Support Agent" that can read 10k documentation pages, execute live code snippets to verify bugs, and create GitHub issues automatically.
[ ] The Tooling Suite: Be proficient in Python, BentoML/modal, and the latest OpenAI / Anthropic / LangChain / LlamaIndex SDKs.

Lead the AI Revolution with MockExperts

AI Engineer interviews are moving faster than any other tech role in history. What was "best practice" last month is legacy code today. MockExperts’ AI Engineer Track is updated weekly with the latest interview questions and architectural challenges from companies like Stripe, Scale AI, and Midjourney. Our specialized AI interviewer supports Python coding environments with live LLM integrations, letting you build real RAG systems and agentic loops while explaining your logic to a virtual Senior AI Architect. We grade you on architectural depth, prompt efficiency, and eval-readiness.

Master the stack of the future today and become the AI engineer the world's most innovative companies are fighting for.

Start your free AI Engineer mock interview session now

10 Modern JavaScript Patterns for Senior Frontend Interviews (ES2026+)

Aindrila Bhattacharjee — Wed, 13 May 2026 07:46:42 +0000

Proving Your JavaScript Seniority in 2026

The bar for senior frontend interviews has risen dramatically. Whether you're targeting a Senior Frontend Engineer role at Google in Mountain View, a Staff Engineer position at Spotify in Stockholm, or a Lead Developer role at Shopee in Singapore — modern frontend interviews require moving far past traditional scope and hoisting questions. You need to demonstrate architectural prowess, deep runtime understanding, and production-grade patterns in modern ECMAScript.

This guide covers the 10 essential JavaScript patterns that separate senior candidates from mid-level ones in 2026. For each pattern, we explain what it is, why interviewers ask it, how to implement it, and where it appears in real-world frameworks.

1. The Advanced Closure (Memoization & Private State)

What it is: Use closures not just to hide variables, but to cache heavy computations and create truly private state. A senior developer can write a generic memoize(fn) utility on a whiteboard that efficiently caches arguments using a Map.

Why interviewers ask it: Closures are the foundation of JavaScript's scope model. Understanding them deeply proves you grasp how the language actually works at the engine level — not just surface API usage.

Key implementation details:

Use a Map (not a plain object) for the cache because Map supports any key type, including objects and arrays. 2.For multi-argument functions, serialize arguments into a cache key using JSON.stringify(args) or a custom hashing function.
Consider cache eviction strategies (LRU) for production-grade memoization to prevent memory leaks.
Understand how closures interact with garbage collection — the closure holds a reference to its outer scope, preventing GC of enclosed variables.

Real-world usage: React's useMemo and useCallback are closure-based memoization primitives. Lodash's _.memoize() follows this exact pattern. Understanding this helps you reason about React re-render optimization.

2. Event Loop Mastery (Macrotasks vs Microtasks)

What it is: You must confidently trace console logs involving synchronous code, Promises (Microtasks), and setTimeout (Macrotasks). Knowing that the Microtask queue drains entirely before the next Macrotask is critical.

Why interviewers ask it: This is the single most common "gotcha" question at companies like Meta, Amazon, and Bloomberg. It tests whether you understand JavaScript's concurrency model or just use async/await blindly.

The execution order you must know:

All synchronous code in the current call stack executes first.
The entire Microtask queue drains (Promise.then, queueMicrotask, MutationObserver).
ONE Macrotask is picked from the queue (setTimeout, setInterval, I/O callbacks, requestAnimationFrame).
The Microtask queue drains again before the next Macrotask.
The render/paint step happens (between Macrotasks, not between Microtasks).

Advanced follow-ups to prepare for: What happens when a Microtask schedules another Microtask? (Answer: It gets added to the current Microtask queue and drains before any Macrotask.) How does requestAnimationFrame fit into the event loop? (Answer: It fires before the paint step, after Macrotask processing.)

Real-world impact: Understanding this explains why Vue's nextTick() uses Microtask scheduling, why React batches state updates, and why an infinite Microtask loop can freeze the browser without ever allowing a repaint.

3. Proxy-Based Reactivity

What it is: Vue 3, Solid.js, and modern state managers use Native Proxy objects to intercept get/set operations on state, enabling automatic dependency tracking and UI re-rendering.

Why interviewers ask it: It tests your understanding of metaprogramming in JavaScript — a concept most mid-level developers never encounter.

Key implementation details:

Create a reactive state using new Proxy(target, { get(target, prop) { /* track dependency */ }, set(target, prop, value) { /* trigger re-render */ } }).
Understand the difference between Proxy (intercepts operations on the wrapper) and Object.defineProperty (intercepts operations on the original object). Proxy is superior because it handles property additions/deletions, which defineProperty cannot.
Know how to implement deep reactivity by recursively wrapping nested objects in Proxies.
Understand Reflect API and why it's used inside Proxy handlers for maintaining correct this binding and receiver forwarding.

Real-world usage: Vue 3's entire reactivity system is built on Proxies. Immer.js uses Proxies to enable "mutable-style" code that produces immutable state updates. MobX 6+ also migrated to Proxy-based observation.

4. Async Iterators and Generators (for await...of)

What it is: For handling data streams — like reading chunks from a Fetch response body, processing WebSocket messages, or consuming Node.js streams — you yield data over time using async function* and consume it with for await (const chunk of stream).

Why interviewers ask it: This separates developers who understand JavaScript's iteration protocol from those who only use arrays. Staff/principal engineers are expected to design streaming APIs.

Key implementation details:

An async generator function (async function*) can use both yield (to produce values) and await (to wait for async operations).
Understand the Symbol.asyncIterator protocol that makes an object consumable by for await...of.
Know how to implement backpressure — controlling the rate at which a producer emits data to match the consumer's processing speed.
Understand how to handle errors and cleanup using try/finally in generators and the return() method for early termination.

Real-world usage: The Fetch API's response.body is a ReadableStream consumable via async iteration. Node.js streams implement the async iterable protocol. AI/LLM streaming responses (like ChatGPT-style token streaming) rely heavily on this pattern.

5. The Result/Either Pattern for Error Handling

What it is: Instead of unpredictable try/catch blocks scattered throughout your codebase, functional JavaScript adopts returning tuples: const [error, data] = await safeFetch(url). This guarantees that errors are handled as explicit data values rather than exceptions that may or may not be caught.

Why interviewers ask it: Error handling strategy reveals engineering maturity. Senior engineers design systems where errors are impossible to ignore, not just possible to catch.

Key implementation details:

Implement a wrapper: async function safe(promise) { try { return [null, await promise]; } catch (err) { return [err, null]; } }
The TC39 "Safe Assignment Operator" proposal (const [err, val] ?= await fetch(url)) aims to standardize this pattern in future ECMAScript versions.
Understand the difference between recoverable errors (network timeouts, validation failures) and unrecoverable errors (out of memory, corrupted state) — only the former should use this pattern.
In TypeScript, use discriminated unions: type Result<T> = { ok: true; value: T } | { ok: false; error: Error }.

Real-world usage: Go, Rust, and Elm all use result-type error handling. SvelteKit's load functions return error/data objects. This pattern is increasingly adopted in Node.js backend services at companies like Stripe and Vercel.

6. Functional Composition (Pipe / Compose)

What it is: Building complex logical operations by chaining small, pure, single-responsibility functions. Writing a pipe(...fns) utility that reduces an initial value through multiple function applications is a common senior whiteboard task.

Why interviewers ask it: It tests understanding of higher-order functions, reduce, and functional programming principles — concepts essential for building maintainable, testable code at scale.

Key implementation details:

pipe applies functions left-to-right: const pipe = (...fns) => (x) => fns.reduce((v, fn) => fn(v), x).
compose applies functions right-to-left: const compose = (...fns) => (x) => fns.reduceRight((v, fn) => fn(v), x).
Understand how to handle async functions in a pipe using reduce with Promise.resolve() as the initial accumulator.
Know the TC39 Pipeline Operator proposal (value |> fn1 |> fn2), which aims to add native pipe syntax to JavaScript.

Real-world usage: Express/Koa middleware chains, Redux middleware pipeline, RxJS operator chaining, and functional libraries like Ramda and fp-ts all leverage composition patterns.

7. Inversion of Control / Dependency Injection

What it is: Designing modules that receive their dependencies as parameters rather than instantiating them internally. This decouples components, making code highly unit-testable and swappable — a major requirement for staff-level and principal engineers.

Why interviewers ask it: It tests architectural thinking. Can you design a system where swapping a database or API client requires zero changes to your business logic?

Key implementation details:

Factory functions: function createUserService(db, logger, cache) { return { getUser: async (id) => { /* uses injected dependencies */ } } }
In React, Context API and custom hooks serve as lightweight DI containers: const db = useDatabase().
In Angular, dependency injection is a first-class framework feature with decorators and providers.
Understand the difference between constructor injection, property injection, and interface injection — and when each is appropriate.

Real-world usage: NestJS (Node.js framework) is built entirely on DI. Angular's DI system. Spring Boot (Java) developers transitioning to Node.js interviews are expected to know JS equivalents. Testing libraries like Jest use DI concepts via jest.mock().

8. Observer APIs for Performance (IntersectionObserver, ResizeObserver, MutationObserver)

What it is: Replacing expensive event listeners (scroll, resize) with browser-native Observer APIs that run asynchronously off the main thread. IntersectionObserver handles visibility detection, ResizeObserver handles element size changes, and MutationObserver watches DOM mutations.

Why interviewers ask it: Modern web performance is a first-class concern at companies like Google (Core Web Vitals), Shopify (lighthouse scores), and any e-commerce platform. Knowing these APIs proves you write performant code, not just functional code.

Key implementation details:

IntersectionObserver: Use for lazy-loading images, infinite scroll, ad viewability tracking, and triggering animations on scroll. Configure with threshold (visibility percentage) and rootMargin (preload offset).
ResizeObserver: Use for responsive component behavior without media queries. Detects individual element size changes, not just viewport changes.
MutationObserver: Use for watching third-party DOM changes (analytics scripts, A/B testing tools) without polling. Understand its performance implications — observing subtree mutations in large DOM trees can be expensive.
Always remember to observer.disconnect() or observer.unobserve(element) to prevent memory leaks, especially in SPA frameworks.

Real-world usage: React's experimental useIntersectionObserver hook. Next.js Image component uses IntersectionObserver for lazy loading. Vercel Analytics uses IntersectionObserver for viewability tracking. Every major e-commerce platform (Amazon, Flipkart, Shopee) relies on these APIs for performance-critical user journeys.

9. The Module Pattern & ES Modules Deep Dive

What it is: Understanding how ES Modules form singletons, the mechanics of dynamic imports (import()) for code-splitting, Top-Level Await, and the critical difference between import/export and CommonJS require/module.exports.

Why interviewers ask it: Module architecture is the backbone of every production application. Senior engineers are expected to architect code-splitting strategies, understand tree-shaking, and debug circular dependency issues.

Key implementation details:

ES Modules are statically analyzed at parse time (before execution), enabling tree-shaking. CommonJS modules are evaluated at runtime, blocking tree-shaking.
ES Modules are singletons — importing the same module twice returns the same reference. This is why module-level state persists across imports.
Dynamic import() returns a Promise, enabling route-based code splitting in Next.js (dynamic()), React (React.lazy()), and Webpack.
Top-Level Await allows await at the module's top scope — useful for loading configuration or establishing database connections before export. But understand that it makes the module async, which can delay dependent module loading.
Circular dependency handling: ES Modules handle circular imports via "live bindings" (references, not copies), while CommonJS gives you an incomplete, partially-executed module object.

Real-world usage: Every modern bundler (Webpack, Vite, Rollup, esbuild) relies on ES Module semantics for tree-shaking. Next.js App Router uses dynamic imports extensively. Deno is ES Module-native and doesn't support CommonJS at all.

10. Structural Sharing & Immutability Patterns

What it is: How to efficiently create "copies" of nested objects without the performance cost of deep cloning. Structural sharing means reusing unchanged subtrees when creating a new version of a data structure — only the changed path is copied.

Why interviewers ask it: Immutability is the foundation of predictable state management in React, Redux, and all functional programming paradigms. Getting it wrong causes subtle bugs; getting it right enables time-travel debugging and optimistic UI updates.

Key implementation details:

The spread operator ({ ...obj }) creates a shallow copy — nested objects remain shared references. This is fine for flat state but dangerous for deeply nested updates.
structuredClone(obj) (global API, supported in all modern browsers since 2022) creates a true deep copy. It handles circular references, Maps, Sets, ArrayBuffers, Dates, and RegExps — unlike JSON.parse(JSON.stringify(obj)) which fails on all of these.
Immer.js implements structural sharing via Proxies: you write "mutating" code inside a produce() function, and Immer returns a new immutable state with minimal copying. This is the default in Redux Toolkit.
Understand persistent data structures (used by Immutable.js): trie-based maps and vectors that achieve O(log32 n) structural sharing, making even large state updates O(1) amortized for unchanged paths.
Know when NOT to use immutability: high-frequency updates (game loops, animations), large binary data, and performance-critical hot paths where mutation is acceptable within a controlled scope.

Real-world usage: Redux's core principle is immutable state. React's useState setter requires a new reference to trigger re-render. Zustand, Jotai, and Recoil all rely on reference equality checks that depend on proper immutability. Git itself uses structural sharing (trees and blobs) for efficient version control.

How These Patterns Map to Interview Difficulty

Pattern	Level Expected	Companies That Ask
Closures / Memoization	Mid → Senior	Amazon, Microsoft, Uber
Event Loop	Mid → Senior	Meta, Bloomberg, Stripe
Proxy Reactivity	Senior → Staff	Google, Vercel, Vue/React core teams
Async Generators	Senior → Staff	Netflix, OpenAI, Cloudflare
Result Pattern	Senior → Staff	Stripe, Vercel, Prisma
Pipe/Compose	Senior	Shopify, Atlassian, Canva
Dependency Injection	Senior → Staff	Google (Angular), NestJS shops
Observer APIs	Mid → Senior	Any e-commerce, Shopify, Amazon
ES Modules Deep Dive	Senior → Staff	Vercel, Deno, Build tool teams
Structural Sharing	Senior → Staff	Meta (React), Redux maintainers

Interview Strategy: How to Present These Patterns

Knowing these patterns isn't enough — you need to demonstrate them effectively under interview pressure:

Start simple, then optimize: If asked to implement memoization, start with a basic version using a plain object cache, then mention its limitations and upgrade to a Map with LRU eviction.
Connect to real-world experience: "In my current role, we used IntersectionObserver to lazy-load product images, which improved our Largest Contentful Paint by 40%." Concrete metrics win offers.
Mention trade-offs unprompted: "Proxy-based reactivity is powerful but has overhead. For high-frequency calculations like game physics, direct mutation within a controlled scope would be more appropriate."
Show awareness of the ecosystem: Reference framework implementations — "React uses a fiber-based reconciliation model, but if we were building this in Vue 3, the Proxy-based reactivity system would handle dependency tracking automatically."
Ask clarifying questions: "Should this memoize function handle object arguments, or is it sufficient to support primitives?" — This shows engineering discipline.

Common Mistakes Senior Candidates Make

Memorizing syntax without understanding "why": You can write new Proxy() but can't explain why Vue 3 chose Proxy over defineProperty? That's a red flag.
Ignoring browser compatibility: Knowing that structuredClone isn't available in Node.js < 17 or older Safari versions shows production awareness.
Over-engineering in interviews: Don't implement a full LRU cache when a simple Map-based memoize is what's asked. Mention the optimization but don't code it unless prompted.
Not testing edge cases: After writing your memoize function, test it with memoize(fn)(0), memoize(fn)(undefined), and memoize(fn)({a:1}). Proactive testing impresses interviewers.
Skipping TypeScript considerations: In 2026, most senior frontend roles require TypeScript. Mention generic types, type guards, and discriminated unions when relevant.

Originally published at MockExperts

DEV Community: Aindrila Bhattacharjee

10 System Design Patterns You Must Know in 2026

Pattern 1: Event Sourcing

The Core Idea

When to Use It

Trade-offs and Caveats

Pattern 2: CQRS (Command Query Responsibility Segregation)

The Core Idea

When to Use It

Trade-offs and Caveats

Pattern 3: Saga Pattern (Distributed Transactions)

The Core Idea

When to Use It

Trade-offs and Caveats

Pattern 4: Sidecar Pattern

The Core Idea

When to Use It

Trade-offs and Caveats

Pattern 5: Circuit Breaker

The Core Idea

States and Transitions

When to Use It

Pattern 6: Outbox Pattern

The Core Idea

Why It Matters

When to Use It

Pattern 7: Consistent Hashing

The Core Idea

When to Use It

Virtual Nodes

Pattern 8: Rate Limiting (Token Bucket vs Leaky Bucket)

The Core Idea

Token Bucket

Leaky Bucket

Sliding Window Counter (Most Interview-Recommended)

Pattern 9: Bulkhead Pattern

The Core Idea

Application in Software

Pattern 10: Write-Through vs Write-Behind vs Cache-Aside

Why Caching Strategy Is a Design Pattern

Cache-Aside (Lazy Loading)

Write-Through

Write-Behind (Write-Back)

How to Apply These Patterns in an Interview

Practice System Design with AI

Frontend Engineering in 2026: Mastering Performance and DX

The Redefinition of "Frontend Engineer" in 2026

Core Web Vitals: The Mandatory Topic You Can't Skip

React 19 and the Concurrent Rendering Model

Frontend System Design: A Growing Interview Pillar

Advanced TypeScript: Expected, Not Optional

Micro-Frontend Architectures

The Behavioral and Philosophy Round

How to Practice for Senior Frontend Interviews

Conclusion

💻 Master Your Frontend Loops:

25 React Interview Questions 2026 (With Answers) — Hooks, React 19, Concurrent Mode

🚀 Fundamentals (Questions 1-8)

1. What is the Virtual DOM and how does React use it?

2. What is JSX and why does React use it?

3. Explain the difference between controlled and uncontrolled components.

Controlled Component Example:

Uncontrolled Component Example:

4. What are React keys and why are they important?

Why they are critical:

5. What is prop drilling and how do you avoid it?

How to avoid it:

6. Explain the React component lifecycle in functional components.

7. What is the difference between state and props?

8. How does React handle events differently from vanilla JavaScript?

⚓ Hooks Deep Dive (Questions 9-15)

9. Explain useState vs useReducer. When would you use each?

useReducer Example:

10. What are the rules of hooks?

11. How does useEffect cleanup work?

12. What is useMemo and when should you use it?

When to use it:

13. Explain useCallback and its relationship with React.memo.

14. What is useRef and how does it differ from useState?

15. How do you create a custom hook? Give an example.

9. Explain `useState` vs `useReducer`. When would you use each?

11. How does `useEffect` cleanup work?

12. What is `useMemo` and when should you use it?

13. Explain `useCallback` and its relationship with `React.memo`.

14. What is `useRef` and how does it differ from `useState`?