Advanced interview questions in Frontend Dev, page 4
How do you bypass Svelte's scoped styles to target global elements?
Tests Svelte style encapsulation escape hatches. Strong answer: :global() syntax for elements and classes, plus risks like leaky side effects and specificity wars. Red flag: external stylesheets or inline styles as the primary solution.
How do you cancel pending fetches using AbortController?
Keep one AbortController, abort before each fetch, pass its signal, and swallow AbortError.
When does fetch trigger a CORS preflight, and what POST is complex?
Tests whether you know the simple-request boundary. A strong answer names the three safe POST content-types and gives a cross-origin POST with application/json plus a custom header like Authorization.
Download a large file via fetch and track ReadableStream progress
It tests streaming I/O and backpressure beyond Promise-based fetch. Acquire a reader from response.body, loop read() until done, sum chunk lengths against Content-Length, and emit progress.
How would you avoid new functions per list item without useCallback?
Tests stable handler patterns for large lists. Answer: define one handler outside the map, attach it to every item, and read the id from a data-id attribute via currentTarget.dataset.id. Or use event delegation on the parent. Red flag: useCallback in loop.
Build a scalable Sass theming system
Store themes as maps, emit values as CSS custom properties so runtime switching needs no recompile, generate per-theme scopes via mixins.
Explain list virtualization and when it beats React.memo
This tests whether you know React.memo skips re-renders but leaves off-screen nodes in the DOM. A strong answer describes virtualization mounting only visible items to cut memory use. A red flag is claiming memoization fixes jank or saves memory for big lists.
Diagnose and shrink a large CSS bundle
Purge unused selectors, minify and merge with cssnano, split critical CSS and code-split per route.
Build a custom PostCSS plugin (px to rem)
Export a plugin returning visitor hooks, walk Declaration nodes, parse and rewrite px values to rem against a base size.
Implement an async Angular validator with HTTP and PENDING feedback
Tests Angular async validator lifecycle and HTTP race conditions. A strong candidate returns an Observable from AsyncValidatorFn, lets Angular set PENDING automatically, debounces input, and binds control.pending in the template.
How do you structure components and state for a dynamic Vue form?
This tests your design of normalized reactive state for dynamic Vue forms. A great answer uses a flat item array with stable keys, row components or scoped slots, and schema-driven validation. Red flags include mutating by index or using array indices as keys.
How would you architect a multi-step Svelte wizard with Stores?
Tests state isolation and validation orchestration across wizard steps. A solid answer uses a centralized store with step slices, derived validity stores, and pre-navigation guards. Red flag: unrelated per-step stores or validation only on final submit.
Implement MyReturnType<T> using conditional types and infer
This tests type-level pattern matching with conditional types and infer. Answer uses T extends (...args: any[]) => infer R ? R : never, noting infer captures return slot, non-functions yield never. Red flag: conflating runtime values with compile-time types.
What is state hydration in Next.js SSR with Redux or Zustand?
Hydration attaches listeners to server HTML; serialize state to an escaped script tag; boot client store before React or markup is discarded.
Implement a generic PickByType<T, U> utility type
Tests mapped-type key filtering via conditional types and as remapping. Great answer: [K in keyof T as T[K] extends U ? K : never]: T[K]. Red flag: mapping all keys and setting values to never, which preserves keys instead of removing them.
Support a one-off that deviates from the system
Offer sanctioned escape hatches like custom-property overrides, scope the one-off to the app not the library, track it for promotion or removal.
Versioning a design system library
Monolithic versioning is simple and coherent but couples unrelated changes; independent versioning gives granular upgrades but adds tooling complexity.
Architect themes on a token foundation
Separate primitive tokens from semantic alias tokens that themes redefine, emit semantics as custom properties per theme scope, components use only semantics.
Token architecture for white-label multi-brand
A shared semantic schema, per-brand primitive and mapping overrides, a build step emitting one bundle per brand, components consume stable semantic names.
Differentiate client state from server state and their tools
This tests whether you recognize server state as async, remote, and cacheable versus local synchronous client state. A strong answer contrasts ownership and lifecycles, mapping Pinia to UI state and Vue Query to fetched data.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles