React / Frontend Developer Interview Questions

Your polling component uses setInterval inside useEffect, but it keeps reading a stale count value even after state updates. Walk through why the closure captures old state and the two or three ways you'd fix it without restarting the interval every render.

A theme context at the app root causes every consumer to re-render whenever any field in its value object changes, tanking interaction latency. How do you restructure the context, memoize the value, or split providers to stop the re-render storm without rewriting consumers?

A teammate's useEffect fetches data and updates state, but the network tab shows the same request firing in an infinite loop. The dependency array includes an object built inline. Explain the root cause and how you'd fix it while keeping the effect correct.

After enabling concurrent features, a component reading from a custom external store occasionally renders inconsistent values mid-update — classic tearing. How would you diagnose this, and why does useSyncExternalStore fix it where a plain useEffect subscription doesn't?

Users report that deleting a row from a filterable table sometimes wipes the wrong row's inline edit state. The list uses array index as the key. Walk through how React reconciliation causes this and what a correct key strategy looks like here.

You're migrating a legacy class component that opens a WebSocket in componentDidMount, reconnects in componentDidUpdate on prop change, and cleans up on unmount. Walk through translating that lifecycle into hooks without introducing duplicate connections or missed cleanups under StrictMode.

You wrapped an expensive chart component in React.memo, but profiling shows it still re-renders on every parent update. The props include an inline style object and an arrow-function callback. Explain why memo fails here and how you'd actually stabilize those props.

Your search typeahead filters a 5,000-item list on every keystroke and visibly stutters on mid-range Android phones. Compare fixing this with useDeferredValue, useTransition, debouncing, or moving the filter off the main thread — and what trade-offs drive your pick.

A 40-field onboarding form uses one useState object, and typing in any input lags because the entire form re-renders. Walk through how you'd restructure state, isolate field components, or switch to uncontrolled inputs to make typing feel instant again.

Your error boundary catches render crashes fine, but an exception thrown inside a button's onClick handler still escapes to the console and never shows the fallback UI. Explain why boundaries miss event-handler errors and how you'd design consistent error capture across both paths.

You need to remember a chat window's scroll position across tab switches without triggering re-renders on every scroll event. Walk through when you'd reach for useRef instead of useState here, and what bugs appear if you choose wrong.

Design a reusable usePolling hook for an order-status screen: it must back off exponentially on failures, pause when the tab is hidden, and never set state after unmount. Walk through the API you'd expose and the cleanup edge cases you'd guard.

After upgrading, your analytics dashboard logs every page-view event twice in development but once in production. Explain what StrictMode's double-invoked effects are telling you about your effect hygiene, and how you'd make the analytics effect idempotent rather than just silencing it.

Your product page wraps three data-driven sections in a single Suspense boundary, so the whole page blanks out while the slowest query resolves, then everything pops in causing layout shift. How would you re-architect boundary placement and fallbacks for perceived speed?

A modal rendered through createPortal closes unexpectedly: clicks inside it bubble to a document-level listener that treats them as outside clicks, and focus escapes to the page behind. Walk through how portals affect event propagation and how you'd fix both issues.

A user-permissions object is drilled through six component layers, and every refactor breaks a prop somewhere. Walk through how you'd decide between lifting to Context, a store like Zustand, or component composition — and what signals tell you drilling has actually become a problem.

Your Redux app slowed down as the store grew: every dispatch runs dozens of selectors that rebuild arrays, re-rendering unrelated screens. Walk through diagnosing selector churn with the profiler and fixing it with memoized selectors, normalized state, and narrower subscriptions.

A component subscribes to your Zustand store with useStore() and no selector, so it re-renders whenever any slice changes — including ones it never reads. Explain how selector functions and shallow equality fix this, and how you'd audit the codebase for similar misuse.

Your team caches API data in both Redux and React Query, and the two copies drift — a cancelled order still shows active in one screen. How would you draw the line between server cache and client state, and migrate off the duplication safely?

One giant AppContext holds auth, theme, notifications, and cart, so toggling dark mode re-renders the cart drawer. Walk through splitting it into focused providers, deciding the nesting order, and verifying with the React DevTools profiler that the re-render blast radius actually shrank.

You're adding optimistic updates to a task board: a drag instantly moves the card, but the API can reject it seconds later while other mutations are in flight. Design the rollback and reconciliation strategy so the board never shows a state the server never had.

Your cart persists to localStorage via a store middleware, but after a schema change some returning users crash on load with old persisted shapes. Walk through versioning and migrating persisted state, and what you'd do when migration itself fails.

A legacy app runs hundreds of redux-saga effects nobody fully understands, and onboarding new engineers takes weeks. Make the case for or against migrating to Redux Toolkit and RTK Query incrementally — what you'd migrate first, and how you'd keep both worlds consistent meanwhile.

A bug report shows the order-summary total disagreeing with the line items: the total is stored as its own state field and updated separately. Explain why this derived-state duplication rots, and how you'd refactor to compute it instead without hurting performance.

Product wants undo/redo across a multi-step document editor backed by your global store. Compare command-pattern history, state snapshots, and patch-based approaches like Immer patches — covering memory cost, selective undo, and how server sync complicates each option.

Your KYC form has cross-field validation, async PAN verification, and conditional sections. Walk through deciding between React Hook Form, Formik, or hand-rolled useState — and which requirements would actually flip your decision rather than just team familiarity.

Users keep two tabs of your trading dashboard open; logging out in one leaves the other authenticated and acting on a dead session. Design cross-tab state synchronization for auth and critical flags, comparing storage events, BroadcastChannel, and server-driven invalidation.

Your checkout flow is governed by a dozen interacting booleans — isLoading, isPaymentPending, hasError, isRetrying — and QA keeps finding impossible combinations. Walk through remodeling it as an explicit state machine, and how you'd justify the XState learning curve to the team.

Your Next.js page renders 'Last updated: 10:42' on the server but the client hydrates with a different time, throwing hydration mismatch warnings and occasionally garbled UI. Explain why this happens and the patterns you'd use to render time-dependent content safely.

Marketing changed prices, but ISR pages kept serving stale amounts for hours and a customer screenshot went viral. Walk through how you'd redesign revalidation — time-based versus on-demand revalidatePath/tag webhooks — and what you'd monitor to catch staleness early.

You're building a catalog with 50,000 product pages where stock changes hourly but descriptions rarely do. Walk through choosing between SSG, ISR, SSR, and client-side fetching for different parts of the page, and what data you'd want before deciding.

Your App Router dashboard awaits four fetches sequentially in nested server components, so TTFB ballooned to three seconds. Walk through finding the waterfall, restructuring with parallel fetches and preload patterns, and deciding what moves behind Suspense instead of blocking the shell.

Your hero banner is the LCP element, and field data from Indian users on slow 4G shows it loading late. Walk through how you'd configure next/image — priority, sizes, formats, placeholder — and verify the improvement actually lands in real-user metrics.

You moved auth checks into Next.js middleware running at the edge, but users in India now see added latency because your session store lives in a single US region. Walk through your options: JWT verification at edge, regional replicas, or splitting which routes need middleware.

A page using getServerSideProps has a P95 TTFB of four seconds. Walk through how you'd break down where the time goes — upstream APIs, serialization, cold starts — and which fixes you'd try before abandoning SSR for that route.

You want the analytics dashboard's shell to paint immediately while three slow widgets stream in. Walk through implementing streaming SSR with Suspense boundaries and loading.js, and the pitfalls — SEO, error handling inside streamed segments, and proxies that buffer the response.

An admin-only rich-text editor adds 300KB to the bundle every user downloads, though under two percent of visitors are admins. Walk through fixing this with next/dynamic, what ssr:false changes, and how you'd confirm the main bundle actually shrank.

Your multi-tenant SaaS serves per-tenant themes and content from the same Next.js app, but CDN caching keeps leaking one tenant's branding to another. Walk through designing the cache key, routing, and rendering strategy so isolation holds without giving up caching entirely.

Your team debates putting payment-webhook handling and a few CRUD endpoints into Next.js route handlers versus the existing Node backend. Walk through how you'd decide, considering deployment coupling, timeouts on serverless, observability, and who owns the code long-term.

After a data fix, some users still see old content: you have fetch caching, full route cache, the client router cache, and a CDN all layered. Walk through how you'd trace which layer served the stale response and design a coherent invalidation story.

You own a 120-route Pages Router app and leadership wants App Router benefits without a feature freeze. Walk through your incremental migration plan — route ordering, shared layouts and providers across both worlds, and the regressions you'd specifically test for.

Right after every deploy, some active users hit chunk-load errors or broken navigation because the client requests JS files from the previous build. Explain why this happens with immutable hashed assets and how you'd handle it gracefully — retries, version skew detection, or prompting a reload.

Your API layer is littered with 'as any' casts added under deadline pressure, and a renamed backend field silently broke three screens. Walk through how you'd ratchet the codebase back to safety — lint rules, unknown at boundaries, and generated types — without a big-bang rewrite.

Your fetch result type has optional data, error, and loading fields, and engineers keep writing impossible states like data plus error together. Walk through redesigning it as a discriminated union and how that change propagates through consuming components and tests.

You're building a reusable DataTable where column definitions must only reference keys that exist on the row type, and the cell renderer should receive the correctly typed value. Walk through the generics and keyof constraints you'd use, and where you'd stop adding type cleverness.

Enabling strictNullChecks on your five-year-old codebase produces four thousand errors. Walk through your migration strategy — per-directory enablement, codemods, triaging real bugs from noise — and how you keep new violations from creeping in while the cleanup runs for months.

You narrowed a nullable user with an if-check, but inside a setTimeout callback in the same block TypeScript flags it as possibly null again. Explain why narrowing doesn't survive the callback boundary and the patterns you'd use instead of a non-null assertion.

Your design system needs a polymorphic Button supporting an 'as' prop — anchor, button, or Next.js Link — with correct prop types for each. Walk through typing this with generics and ComponentPropsWithoutRef, and the inference and ref-forwarding pitfalls you'd expect to hit.

A payments SDK you must integrate ships no TypeScript definitions and its docs are thin. Walk through your options — declare module shims, hand-written ambient types for just the surface you use, or DefinitelyTyped — and how you'd keep your types honest as the SDK updates.

tsc on your monorepo went from forty seconds to six minutes after someone introduced deeply recursive conditional types in a shared utility. Walk through profiling compilation with extended diagnostics and trace, and how you'd decide which type-level cleverness to unwind.

Your shared package exports a TypeScript enum for order status, and consumers complain about bundling artifacts and awkward interop from JavaScript files. Walk through the trade-offs of enums versus union-of-literal types with const objects, and how you'd migrate without breaking consumers.

Your types claim the API returns amount as a number, but production crashed when a backend hotfix sent it as a string. Walk through where you'd add runtime validation like Zod at the boundary, how you'd derive static types from schemas, and the performance cost question.

Your edit-profile form type keeps drifting from the API model — every backend field addition means hand-editing three interfaces. Walk through using Pick, Omit, Partial, and mapped types to derive form, payload, and response types from one source of truth.

In your monorepo, editing a shared types package forces full rebuilds of every app, and editors show stale types until manual restarts. Walk through setting up project references with composite builds, and the trade-offs versus letting each app compile shared sources directly.

A production incident traced back to 'response as UserProfile' hiding a missing field that crashed three screens deep. Walk through your postmortem: why assertions defeated the compiler, where you'd ban them via lint, and what boundary patterns you'd mandate instead.

Clicking 'Export' freezes your dashboard for four seconds while a loop transforms 50,000 records. Explain what's happening on the event loop, then compare fixing it by chunking with setTimeout, scheduler.yield, or moving the work into a Web Worker.

Heap snapshots of your SPA show thousands of detached DOM nodes retained after navigating away from a chart-heavy screen. Walk through how closures in event listeners and module-level caches cause this, and your process for finding the exact retaining path.

A teammate's code resolves a promise and sets a setTimeout(fn, 0), assuming the timeout runs first, and the UI flashes inconsistent state. Walk through the microtask versus macrotask ordering at play and how you'd restructure the code so it doesn't depend on queue trivia.

A hot formatting function is fast in isolation but slow inside the app; the profiler hints at V8 deoptimization. Walk through how megamorphic call sites and inconsistent object shapes cause this, and how you'd confirm and fix it without cargo-culting micro-optimizations.

After refactoring, someone passed this.handleSave directly as a callback and now it throws because 'this' is undefined inside. Explain how 'this' binding actually gets decided at the call site, and the fixes you'd choose between in a class versus a hooks codebase.

Your real-time dashboard stutters every few seconds; the Performance tab shows recurring GC pauses. Walk through how you'd identify allocation hot spots — short-lived arrays and objects created per frame — and refactor toward object reuse without making the code unreadable.

Your scroll handler updates a progress bar and fires analytics, and on mid-range Android phones scrolling visibly stutters. Walk through choosing between debounce, throttle, and requestAnimationFrame for each concern, and why one size doesn't fit both.

A 'deep clone' via JSON.parse(JSON.stringify()) silently dropped Date objects and undefined fields in your saved drafts feature, corrupting user data. Walk through why that happened, what structuredClone handles differently, and where both still fail — functions, class instances, DOM references.

Finance reports your cart shows ₹1,847.9999999998 for some combinations because totals are computed with floating-point arithmetic. Explain why 0.1 + 0.2 misbehaves, and how you'd redesign money handling on the frontend — integer paise, a decimal library, or server-computed totals.

You're streaming a paginated audit-log API into an export feature, but naive Promise.all over all pages spikes memory and hammers the backend. Walk through designing this with async generators, bounded concurrency, and cancellation when the user abandons the export.

A 2,000-row table attaches a click listener to every cell and interaction latency suffers on low-end devices. Walk through replacing it with event delegation on the container — how bubbling makes it work, and which events like focus or mouseenter complicate the pattern.

You need to attach computed layout metadata to DOM elements managed by a third-party library, but a plain Map keyed by element leaks memory as nodes are removed. Walk through why WeakMap solves the retention problem and its limitations, like non-enumerability, you must design around.

A legacy script creates click handlers in a for loop with var, and every button alerts the last item's name. Walk through what the shared closure is doing, why let fixes it, and how you'd sweep the codebase for the same pattern.

A flex row holding a long unbroken email address refuses to shrink, pushing the action buttons off-screen on small phones. Walk through why flex items default to min-width auto, and the combination of min-width, overflow, and text truncation you'd apply.

You're adding dark mode to a product with hardcoded hex values across 300 components. Walk through designing a semantic token layer with CSS custom properties, handling images and shadows, honoring prefers-color-scheme with a manual override, and avoiding the white flash on load.

Your table header has position: sticky but simply doesn't stick, while the same pattern works elsewhere. Walk through how you'd hunt the culprit — overflow on an ancestor, missing top value, parent height — and your systematic approach to debugging sticky failures.

Field data shows your article pages shifting layout as the custom font swaps in, hurting CLS for readers on slow 4G. Walk through your font-loading strategy — font-display choices, preloading, and size-adjust fallback metrics — and how you'd measure that the shift actually disappeared.

You're building a dashboard with a sidebar, header, and a main area of resizable card widgets. Walk through where you'd use CSS Grid versus flexbox in this layout and the concrete signals — two-dimensional control, content-driven sizing — that drive each choice.

Your ProductCard renders in a wide grid, a narrow sidebar, and a modal, and media queries keep styling it wrong because they track viewport, not context. Walk through refactoring to container queries, including containment setup, fallback strategy, and how the design-system contract changes.

A dropdown menu renders underneath a card despite z-index: 9999, because an ancestor's transform created a new stacking context. Walk through how you'd diagnose stacking-context traps in DevTools and the structural fixes — portals, isolation, removing the transform — you'd weigh.

Profiling shows your styled-components setup doing meaningful main-thread work at runtime, and hydration suffers on cheap Android devices. Walk through evaluating a migration to zero-runtime styling — Tailwind or vanilla-extract — including codemod strategy, theming parity, and how you'd prove the win.

Your full-screen mobile overlay sized with 100vh hides its CTA button behind Chrome's collapsing URL bar on Android. Explain why viewport units misbehave in mobile browsers and how you'd fix it with dvh and svh units plus a fallback for older WebViews.

Five years of global CSS, BEM, and utility overrides have produced specificity wars where every fix needs !important. Walk through introducing cascade layers and a scoping convention to restore order incrementally, and how you'd stop new unscoped styles from landing.

User-uploaded product photos arrive in random dimensions, and your listing grid jumps around as each image loads. Walk through reserving space with aspect-ratio and width/height attributes, plus object-fit cropping, so the grid stays stable on slow connections.

Your accordion animates height from zero to auto using max-height hacks, and it stutters on low-end phones while breaking with dynamic content. Walk through better approaches — grid-template-rows tricks, transform-based motion, the newer interpolate-size capability — and the compositing reasons behind your choice.

Your app is being localized into Urdu and the RTL build breaks: padding-left hacks, absolutely positioned icons, and chevrons all point wrong. Walk through migrating to logical properties and direction-aware patterns, and what you'd add to review checklists to keep RTL working.

CrUX shows your LCP at 4.8 seconds for mobile users in India while your laptop measures 1.9. Walk through your triage plan — TTFB versus resource load versus render delay — and the ordered list of fixes you'd attempt for mid-range Android on 4G.

INP regressed from 180ms to 420ms the week after your team shipped a new mega-menu. Walk through how you'd confirm the menu is responsible using field attribution data and the Performance panel, and what kinds of fixes you'd try first.

Lighthouse in CI scores your page 95, yet field CWV data fails the LCP threshold and the SEO team is escalating. Explain why lab and field diverge — device class, network, cache state, user journeys — and how you'd rebuild your measurement strategy around RUM.

Your LCP element is a hero image discovered late because it's set as a CSS background. Walk through restructuring it as a preloaded img with fetchpriority high and responsive sources, and how you'd verify discovery time improved in the waterfall.

Marketing keeps adding tags — analytics, chat widget, session replay — and your main thread now spends two seconds in third-party scripts. Walk through how you'd quantify each script's cost, then weigh facades, delayed loading, and web workers, plus the governance process to stop regrowth.

Your main bundle grew forty percent after someone added a charting library for one admin graph. Walk through using bundle analysis to confirm the cause, then fixing it with dynamic imports or a lighter library, and adding a size check to CI.

Hydration of your content-heavy homepage produces 800ms of long tasks on mid-range Android phones, delaying first interaction. Walk through your options — reducing client components, lazy hydration of below-fold sections, islands-style architecture — and how you'd measure which interventions actually move INP.

Your job-feed infinite scroll keeps thousands of DOM nodes mounted, and scrolling stutters badly on budget phones. Walk through introducing list virtualization, the trade-offs it brings — accessibility, find-in-page, scroll restoration — and how you'd validate smoothness on real low-end hardware.

Performance keeps regressing two weeks after every cleanup sprint. Design a performance budget enforced in CI: which metrics and thresholds you'd pick, lab versus field gates, how you'd handle flaky measurements, and what happens culturally when a PR busts the budget.

Your article pages inject an ad slot and a newsletter banner after load, shoving content down mid-read and failing CLS. Walk through fixing injected-content shift — reserved slots, transform-based entrances, skeletons — while business insists the banners stay.

You're designing the code-splitting strategy for a 30-route B2B app. Walk through how you'd decide route-level versus component-level splits, what you'd prefetch on hover or viewport entry, and how too many small chunks can backfire on high-latency Indian mobile networks.

A teammate wrapped nearly every component in useMemo, useCallback, and memo 'for performance', yet profiling shows renders got slightly slower and the code is harder to read. Walk through how memoization overhead works and your criteria for where it actually pays off.

Field INP is failing but you can't reproduce slowness locally. Walk through instrumenting with the web-vitals library's attribution build, segmenting by device and interaction target, and how you'd translate 'slow pointerdown on the filter button' into a concrete main-thread fix.

Users on slow 4G see invisible text for several seconds while your custom font downloads. Walk through diagnosing the FOIT, choosing a font-display strategy, subsetting for Latin plus Devanagari, and self-hosting versus a font CDN for your India-heavy audience.

Forty percent of your traffic is repeat visitors on patchy networks, and every visit re-downloads the world. Design a service-worker caching strategy: which assets get cache-first versus stale-while-revalidate, how you'd handle API responses, and how you'd avoid serving stale app shells after deploys.

Bundle analysis shows all of lodash shipped to production even though the team uses three functions. Walk through why tree-shaking failed — CommonJS interop, import style, sideEffects flags — and how you'd fix it and prevent the next heavy dependency from sneaking through.

Your webpack 5 build takes nine minutes and devs are demanding Vite. Walk through how you'd plan the migration — auditing loaders and custom plugins, environment variable differences, dev-prod parity risks since Rollup builds production — and what would make you say no.

The app crashes with 'invalid hook call' and the bundle analyzer reveals two copies of React coming from a linked internal package. Walk through diagnosing duplicate dependencies and fixing them with resolution aliases, peerDependencies, and dedupe settings.

Aggressive code splitting left your app requesting a chain of tiny chunks, each discovered only after the previous one parses, adding seconds on high-latency mobile connections. Walk through diagnosing the chunk waterfall and fixing it with preloading, smarter split points, and chunk consolidation.

A security review finds an internal API key visible in your shipped JS because someone referenced the wrong env variable. Explain how build-time env inlining works in Vite or Next.js, the prefix conventions, and the guardrails you'd add to prevent the next leak.

Every release busts your users' entire JS cache because one line changed in app code rewrites all chunk hashes. Walk through designing stable long-term caching — vendor chunk strategy, deterministic module ids, runtime chunk extraction — and how you'd verify hashes stay stable across builds.

HMR on your large dashboard now takes ten-plus seconds per change and devs are rebuilding instead. Walk through profiling what's slow — barrel files pulling in everything, heavy transforms, too many watched files — and the highest-leverage fixes you'd try first.

Two teams' module-federation remotes pin incompatible versions of a shared design-system package, and the shell crashes depending on load order. Walk through how shared dependency resolution works in federation, and how you'd design singleton constraints and version contracts to prevent this.

Production stack traces are minified gibberish, but the team worries that shipping source maps exposes proprietary code. Walk through your options — hidden source maps uploaded only to Sentry, restricted access, no maps — and the debugging cost of each choice.

Your analytics show meaningful traffic from older Android WebViews that crash on modern syntax, but transpiling everything to ES5 inflates the bundle for everyone. Walk through designing a browserslist and polyfill strategy — module/nomodule or capability-based splits — and how you'd validate both paths.

Users on slow connections see a flash of unstyled content because your CSS arrives after the JS renders. Walk through how CSS extraction and injection order work in your bundler, and how you'd restructure critical CSS delivery to kill the flash.

Your monorepo's CI rebuilds all twelve packages on every PR, taking forty minutes for one-line changes. Walk through introducing task orchestration with Turborepo or Nx — dependency graphs, remote caching, affected-only builds — and the cache-poisoning risks you'd guard against.

A critical dependency's new major version ships ESM-only, breaking your CommonJS Jest setup and a legacy webpack config. Walk through your options — transformIgnorePatterns, dual-format wrappers, migrating the toolchain to ESM — and how you'd sequence the fix without freezing feature work.

A Cypress test for your order list passes locally but fails in CI one run in five, usually on an assertion racing the API response. Walk through how you'd de-flake it properly — intercepts, retry-ability, removing fixed waits — rather than adding sleeps.

You're defining the testing strategy for a new design system used by six teams. Walk through how you'd distribute coverage across unit, interaction, visual regression, and accessibility tests, what runs on every PR versus nightly, and what contract you publish to consumers.

Your test suite is full of getByTestId queries, and a refactor that broke keyboard access still passed everything. Walk through why role-based and accessible-name queries catch more real regressions, and how you'd migrate the suite incrementally without a flag day.

Your Playwright suite went parallel and now fails randomly: tests share a seeded user account and stomp each other's data. Walk through redesigning for isolation — per-worker fixtures, API-based setup and teardown, unique test data — and how you'd burn down the flake rate.

Half your component tests stub global fetch with hand-rolled mocks that drift from the real API. Walk through what migrating to MSW changes — request-level interception, shared handlers across tests and Storybook — and how you'd keep mock responses honest against the backend.

After a CSS refactor silently broke the pricing page's layout in production, leadership wants visual regression testing. Walk through rolling it out — choosing screenshot diffing versus DOM snapshots, taming font and animation flakiness, and keeping review noise low enough that engineers don't rubber-stamp.

Your useAutoSave hook debounces writes by two seconds, and the test either times out or passes without asserting anything. Walk through testing it with fake timers — advancing time deliberately, flushing pending promises, and the act warnings you'll need to handle.

The backend team broke your frontend twice this quarter with renamed response fields that integration environments caught too late. Walk through introducing consumer-driven contract tests or generated-schema checks between the React app and the API, and where they sit in both teams' pipelines.

Your repo has 900 Jest snapshot tests, and every PR includes a wall of snapshot updates nobody reads. Walk through evaluating which snapshots earn their keep, what you'd replace the rest with, and how you'd stop blind 'update snapshots' approvals.

You must E2E-test a UPI payment flow without touching the real gateway or moving money. Walk through designing the test boundary — sandbox environments, stubbing the gateway redirect, verifying webhooks — and which payment scenarios you'd still verify manually before release.

Accessibility bugs keep reaching production because checks happen only in manual QA. Walk through wiring axe-based assertions into component tests and CI, what automated scans realistically catch versus miss, and how you'd handle the existing violation backlog without blocking every PR.

Your team chases a ninety percent coverage mandate, and you're seeing assertion-free tests written just to inflate numbers. Walk through how you'd argue for a better quality signal — mutation testing, critical-path coverage, flake budgets — and what you'd explicitly choose not to test.

A checkout-breaking bug shipped despite a green pipeline: unit tests mocked the exact integration that failed. Walk through running the test-gap postmortem — mapping the bug's path to missing test layers — and how you'd rebalance mocks versus integration coverage afterward.

A keyboard user reports that opening your filter modal silently drops them: focus stays on the page behind, and Escape does nothing. Walk through implementing focus trapping, initial focus, Escape handling, and focus restoration — and how you'd verify it with a screen reader.

An external audit hands you 240 WCAG violations and a contractual three-month deadline. Walk through how you'd triage by user impact versus effort, fix systemic issues in shared components first, and set up regression prevention so the count doesn't rebound next quarter.

Your toolbar uses icon-only buttons, and a screen-reader user hears 'button, button, button'. Walk through fixing the accessible names — aria-label versus visually hidden text versus tooltips — and how you'd prevent unnamed interactive elements from passing review again.

Design insists on a custom-styled dropdown that native select can't match. Walk through the real cost of building an ARIA combobox — keyboard interaction model, screen-reader announcements, mobile behavior — and how you'd decide whether the visual polish justifies owning that complexity forever.

Screen-reader users submit your loan form and hear nothing when validation fails, leaving them stuck. Walk through announcing errors properly — aria-live regions versus focus management to the first invalid field, aria-describedby wiring, and which combination you'd ship.

Your infinite-scroll feed silently appends content, so screen-reader and keyboard users get no indication new items loaded and can never reach the footer. Walk through redesigning it — load-more affordances, announcements, focus handling — and the metrics conversation when product fears losing engagement.

Brand's light-orange-on-white CTA fails contrast at 2.4:1, and marketing refuses a palette change. Walk through how you'd measure against WCAG thresholds, negotiate accessible variants for text versus large text versus non-text elements, and document the exception process if they override you.

In your SPA, client-side route changes leave screen-reader users hearing nothing — focus stays on the old page's button and the new content is never announced. Walk through designing route-change focus management and announcements, and where you'd centralize it in the router layer.

Your responsive design turns a data table into stacked cards on mobile, but screen readers lose all row-column relationships. Walk through preserving table semantics — proper th and scope, captions, or honest div-based alternatives with ARIA — and how you'd test the result.

Your kanban board is drag-and-drop only, locking out keyboard and switch users from a core workflow. Walk through designing the keyboard alternative — move menus or grab-and-drop interaction, live-region announcements during moves — and how you'd retrofit it without breaking the pointer experience.

A user with vestibular sensitivity reports nausea from your page-transition and parallax animations. Walk through implementing prefers-reduced-motion across CSS and JS-driven animations, deciding what 'reduced' means for each effect, and how you'd bake the media query into the design system.

Each product team keeps reintroducing the same accessibility bugs in their own button and modal implementations. Walk through enforcing accessibility through the design system — accessible-by-default components, lint rules, CI checks, and the governance needed when teams bypass the system under deadline.

Your marketplace renders thousands of seller-uploaded product images with empty alt attributes, and decorative icons that announce filenames. Walk through your alt-text strategy — when empty alt is correct, generating meaningful descriptions from product data, and validating it at the component-API level.

Sentry shows crashes on app boot: JSON.parse throws on corrupted localStorage data, and some users hit QuotaExceededError on write. Walk through wrapping storage access defensively — validation, versioned keys, quota fallbacks — and deciding what state deserves localStorage at all.

Field agents use your survey app in areas with patchy connectivity and must capture data offline for hours. Walk through designing IndexedDB persistence with a sync queue — conflict handling when the same record changed server-side, retry semantics, and storage eviction risks.

Your team is debating keeping the session token in localStorage versus a cookie, with arguments flying about XSS, CSRF, and mobile WebViews. Walk through the actual trade-off matrix and what you'd recommend for a banking-adjacent product, including how the backend contract changes.

Support tickets show users with multiple tabs acting on dead sessions after logging out elsewhere. Walk through implementing cross-tab session sync — storage events versus BroadcastChannel, handling the tab that initiated logout versus listeners — and the edge cases with sleeping background tabs.

Your IntersectionObserver-based lazy loading never fires for images inside a horizontally scrolling carousel, though it works elsewhere. Walk through debugging observer config — root, rootMargin, thresholds, the scroll container mismatch — and how you'd test the fix across viewport sizes.

A chunk of your PWA users stay stuck on a three-week-old service worker because the new one sits waiting forever in their always-open tab. Walk through the SW update lifecycle and designing an update UX — skipWaiting trade-offs, refresh prompts, and forcing updates for critical fixes.

Your 'Copy UPI ID' button works on desktop Chrome but silently fails on some Android browsers and inside in-app WebViews. Walk through Clipboard API permission and secure-context requirements, the user-gesture constraint, and the fallback chain you'd implement with honest failure UI.

Your live-price WebSocket dies silently when users ride through patchy 4G coverage; the UI keeps showing stale quotes as fresh. Walk through designing reconnection with exponential backoff and jitter, heartbeat-based death detection, staleness indicators, and resubscription state replay after reconnect.

Your monitoring is flooded with 'ResizeObserver loop completed with undelivered notifications' errors from a dashboard widget that resizes itself inside its own observer callback. Walk through what this loop means, whether it's harmful, and how you'd restructure the measurement logic.

Users upload 200MB site-survey videos over unstable connections, and a single network blip at ninety percent restarts everything. Walk through designing chunked, resumable uploads from the browser — slicing, parallelism, progress tracking, resume negotiation with the server — and where a library beats hand-rolling.

Your store-locator requests geolocation on page load; most users deny it and there's no recovery path, leaving a broken map. Walk through redesigning the permission flow — contextual triggers, handling each error code, the permanently-denied state, and a manual pincode fallback.

Your funnel analytics undercount exits because events fired in beforeunload never reach the server, especially on mobile where tabs are killed without warning. Walk through redesigning around visibilitychange and navigator.sendBeacon or fetch keepalive, and the delivery guarantees you still can't get.

Users complain that pressing back from a product page returns them to the top of the listing instead of where they were, losing their place in 200 results. Walk through diagnosing scroll restoration in your SPA router and implementing reliable position recovery.

Your CMS team embeds rich HTML in articles rendered via dangerouslySetInnerHTML, and a pentest just proved stored XSS through a crafted image attribute. Walk through your remediation — sanitization with DOMPurify, where it runs, allowlist design — and the regression tests you'd add.

A security review flags that your app ships no Content-Security-Policy, but a naive strict policy breaks your analytics snippets and inline styles. Walk through rolling out CSP incrementally — report-only mode, triaging violation reports, and the order you'd tighten directives.

You're redesigning auth token handling after an XSS scare: access tokens currently live in localStorage. Walk through moving to httpOnly cookies with refresh rotation, what CSRF protections that newly requires, and how the SPA handles silent renewal and 401 retries afterward.

A third-party widget your checkout loads from a CDN was reported compromised at another company. Walk through what Subresource Integrity would and wouldn't have protected, why it's hard with auto-updating scripts, and how you'd contain third-party code going forward.

Your embeddable widget communicates with partner sites via postMessage, and a researcher shows any website can send it commands because the handler never checks event.origin. Walk through fixing the trust model — origin allowlists, message schemas, response targeting — without breaking existing partners.

Users can save a 'website' link on their profile, and someone stored javascript:alert(document.cookie), which executes when others click it. Walk through validating and normalizing user-supplied URLs — protocol allowlists, server versus client checks — and auditing for other injection-through-href spots.

You want a nonce-based strict CSP, but your Next.js pages are statically generated, so per-request nonces don't exist for inline scripts. Walk through your options — hashes for known inline scripts, strict-dynamic, moving routes to dynamic rendering — and the caching consequences of each.

npm audit flags a critical prototype-pollution vulnerability in a transitive dependency five levels deep, and there's no patched version upstream. Walk through assessing real exploitability in your frontend context, using overrides or resolutions safely, and when you'd accept versus escalate the risk.

A researcher demonstrates clickjacking: your payment-confirmation page loads inside an invisible iframe on a malicious site, and users click through it. Walk through defending with frame-ancestors and X-Frame-Options, why JavaScript frame-busting is insufficient, and how you'd verify protection across legacy browsers.

Your login page redirects via a returnUrl query parameter, and phishers craft links sending authenticated users to a lookalike domain after sign-in. Walk through fixing the open redirect — relative-path enforcement, allowlists, signed redirect tokens — without breaking deep-link flows from emails.

Product wants third-party seller widgets to render inside your marketplace pages. Walk through the isolation architecture you'd require — sandboxed iframes with minimal allow flags, permissions policy, a postMessage API contract — versus letting their script run in your page context.

A bug-bounty report shows your production source maps publicly accessible, exposing internal API routes, comments with credentials, and unreleased feature code. Walk through the incident response — assessing exposure, rotating secrets, fixing the pipeline — and the build policy you'd institute afterward.

A checkout bug reproduces only in the production build — dev mode works flawlessly. Walk through your hypothesis list — minification, env differences, StrictMode absence, prod-only API behavior — and how you'd reproduce it locally with a production build and source maps.

Sentry shows a TypeError affecting 0.5 percent of sessions with no reproduction: stack traces point to a minified vendor chunk and breadcrumbs vary wildly. Walk through your triage — symbolication, release and device segmentation, breadcrumb mining — and deciding whether it's worth pursuing at all.

QA reports your form works on iPhones but the submit button does nothing on several mid-range Android phones running older Chrome. Walk through your remote-debugging workflow — chrome://inspect over USB, feature detection of suspect APIs — and how you'd find which polyfill or API is missing.

Ops teams keep your logistics dashboard open all day, and by evening the tab consumes two gigabytes and crawls. Walk through your memory investigation — comparing heap snapshots across hours, allocation timelines, the usual suspects like unbounded arrays, detached nodes, and never-cleared subscriptions.

Your app works locally and in production, but staging throws CORS errors on every API call. Walk through how you'd debug this systematically — comparing preflight responses across environments, credentials mode, proxy configuration drift — instead of pasting random header fixes from Stack Overflow.

Finance reports occasional duplicate orders; logs show two identical POSTs milliseconds apart from single users. Walk through hunting the race — double-click windows, retry middleware, effect re-runs — and the layered fix combining UI disabling, idempotency keys, and server-side dedupe.

A production-only crash gives you a one-line minified stack trace and no console access on the user's device. Walk through reconstructing what happened — uploading source maps to your error tracker, breadcrumbs, replay tooling — and what instrumentation gaps you'd fix so next time is easier.

Page-load time regressed thirty percent sometime in the last two hundred commits, and nobody noticed for three weeks. Walk through bisecting the regression efficiently — automated measurement per commit, confounders like data growth and dependency bumps — and the CI guardrail you'd add afterward.

Analytics shows every 'Add to Cart' click tracked twice, but only on the product page, not in search results. Walk through isolating the double-fire — duplicate listeners from re-mounted components, event bubbling through nested handlers, a tag manager binding on top of your code.

Users report the app breaks if left idle through lunch: requests fail silently and the UI half-updates. You suspect token expiry interacting with timers and a sleeping tab. Walk through reproducing time-dependent bugs deliberately and designing recovery for the resumed-tab lifecycle.

An intermittent infinite spinner haunts your orders page; logs show the API responded fine. Walk through hunting a swallowed promise rejection — empty catch blocks, missing finally for loading state, conditional early returns — and the lint rules you'd add to prevent recurrence.

Two percent of users see a white screen on launch; affected devices cluster on older Android WebViews inside a partner's super-app. Walk through debugging a crash you can't reproduce locally — error boundaries that report before dying, syntax-error-level failures bypassing React, device-lab verification.

One important customer sees a broken dashboard layout that no one can reproduce on identical browser versions. Walk through your interrogation checklist — browser extensions, OS zoom and font scaling, unusual data shapes from their account, locale formatting — and how you'd instrument to confirm.

Your 400-component SPA is owned by five teams whose releases keep colliding, and leadership floats micro-frontends. Walk through the signals that justify the split versus better modularization in a monolith, and the organizational prerequisites you'd insist on before any technical work.

You're choosing the composition mechanism for three independently deployed frontend apps under one shell: module federation, iframes, or build-time package integration. Walk through how isolation, payload sharing, release independence, and failure containment differ, and which you'd pick for a payments-adjacent product.

Three product teams consume your shared component library, and every release breaks someone: one team pins old versions while another demands daily fixes. Walk through setting up semantic versioning discipline, changelogs, codemods for breaking changes, and a deprecation policy teams actually follow.

Your micro-frontends started importing each other's stores directly, and now a 'cart' deploy breaks 'search'. Walk through designing cross-MFE communication that preserves independence — custom events, a thin pub-sub contract, URL state — and how you'd untangle the existing coupling.

Your app's folder structure groups by type — components, hooks, utils — and any feature change touches six distant directories. Walk through migrating to feature-based modules with public APIs per folder, and how you'd enforce boundaries with lint rules so the structure doesn't decay.

Your design system must serve one React app, one Vue app, and a legacy server-rendered portal. Walk through your layering strategy — tokens, vanilla web components versus per-framework wrappers — and the governance model that keeps three implementations from drifting apart visually.

Your shell loads four federated remotes, and users download React four times because each remote bundles its own copy. Walk through diagnosing shared-dependency misconfiguration, designing singleton sharing with version tolerance, and the failure mode when a remote needs an incompatible framework upgrade.

Two apps in your monorepo have copy-pasted the same date-formatting and currency utilities, and they've already drifted. Walk through deciding when duplication should become a shared package — the maintenance contract it creates, ownership, and the cost of premature extraction.

In your micro-frontend platform, two teams both registered routes matching /orders, and navigation behaves differently depending on load order. Walk through designing route ownership in the shell — registration contracts, conflict detection, nested routing delegation — and handling deep links into lazily loaded remotes.

You must migrate a revenue-critical AngularJS app to React with zero feature freeze and a team that's never done it. Walk through your strangler strategy — routing seams, embedding one framework inside the other, shared session state — and the first slice you'd migrate to de-risk.

Your codebase still follows strict container and presentational component splits from 2018, producing boilerplate pairs for everything. Walk through how hooks changed that calculus, what separation you'd still keep for testability, and how you'd refactor incrementally without churning every file.

Each of your micro-frontends handles login independently, so users re-authenticate when crossing from dashboard to billing, and token refresh races corrupt sessions. Walk through centralizing auth in the shell — token brokering to remotes, single refresh ownership, logout propagation — without coupling deploys.

Six months into micro-frontends, every release still requires coordinating all five teams because remotes share fragile global contracts — you've built a distributed monolith. Walk through diagnosing where independence broke down and which contracts you'd version, freeze, or delete to restore autonomous deploys.

Your micro-frontend product needs SEO, but the client-side shell composes remotes in the browser, so crawlers see an empty page. Walk through server-side composition options — SSR per remote with edge-side assembly, a rendering service, or selectively pre-rendering public routes — and their operational cost.

Fast typers in your search box sometimes see results for an earlier query because responses arrive out of order. Walk through fixing the race with AbortController cancellation or latest-wins guards, and how a library like React Query handles this for free.

After a mutation, parts of your app show updated data while other screens serve stale cache for minutes. Walk through designing React Query key architecture and invalidation strategy — hierarchical keys, targeted invalidation versus setQueryData, and when optimistic cache writes beat refetching.

Your app retries every failed request three times, which turned a brief backend outage into a self-inflicted traffic spike — and retried a POST that created duplicates. Walk through which errors and methods deserve retries, exponential backoff with jitter, and idempotency considerations.

Your mobile-heavy user base on slow networks suffers from chatty REST calls — six round trips per screen. The team proposes GraphQL. Walk through how you'd evaluate it against a BFF or response-shaping endpoints, considering caching loss, complexity, and who maintains the graph.

Your offset-paginated transaction list shows duplicate and skipped rows when new transactions arrive between page loads. Walk through why offset pagination breaks under live inserts, what cursor-based pagination changes for your frontend code, and the UX trade-offs like losing page jumping.

Your social feed's like button updates optimistically, but rapid toggles, network failures, and concurrent updates from other devices leave counts visibly wrong. Walk through designing reconciliation — mutation queues, server-authoritative counts on settle, and when you'd drop optimism for correctness.

Your dashboard fires eleven API calls on load — several sequential because each component fetches its own data after mounting. Walk through diagnosing the waterfall in the network tab and restructuring with hoisted parallel fetches, combined endpoints, or route-level loaders.

Your portfolio dashboard aggregates five services; when one is down, the whole page currently shows a full-screen error despite four healthy sections. Walk through designing partial-failure UX — per-section boundaries and retries, stale-data fallbacks with timestamps, and how you'd represent degraded state honestly.

Every screen in your app hand-rolls loading, error, and empty states differently — some spinners never resolve, some errors render blank. Walk through standardizing the pattern — a query-state component contract, skeleton conventions, retry affordances — and migrating screens without a rewrite.

Product wants live order-status updates currently served by five-second polling that hammers your API and still feels laggy. Walk through choosing between smarter polling, SSE, and WebSockets for this workload — connection limits, proxies and corporate networks in India, reconnection semantics, and infrastructure cost.

Users exporting a 100MB CSV report watch the tab freeze, and some downloads silently fail with auth errors because the link bypasses your token header. Walk through implementing authenticated downloads properly — fetch with blob streaming versus signed URLs — with progress feedback.

The backend must ship a breaking API change while old frontend bundles stay cached in users' browsers for weeks. Walk through coordinating the migration — API versioning or tolerant-reader patterns, a BFF as an isolation seam, and detecting outdated clients to nudge reloads.

Your effect-based fetches fire twice in development under StrictMode, and a teammate proposes a global 'hasFetched' flag to suppress duplicates. Walk through why that hack misdiagnoses the issue, and the correct patterns — cleanup with aborts, request deduplication, or moving fetching to a cache library.