Advanced interview questions in Frontend Dev, page 7
Building a container-query-driven card component
Declare a wrapper container with container-type, query it with @container, restyle the card's internal grid by container width, optionally use cqi units.
Performance concerns with the :has() selector
:has() forces upward and forward style invalidation on DOM changes, broad subjects are costly; mitigate by scoping the subject, avoiding deep or universal arguments, and limiting dynamic…
How would you diagnose and optimize slow Angular component tests?
Tests Angular test economics and runner overhead. Strong answers profile with Vitest, swap Karma for jsdom/happy-dom, mock services, and reduce TestBed recompilation via targeted imports.
Testing shared Vue components: unit, a11y, visuals?
Unit tests (Vitest/Jest) for logic, accessibility tests (axe, Pa11y) for ARIA/keyboard, visual regression (Percy, Chromatic) for rendering.
What isolatedModules enforces and why bundlers need it
IsolatedModules forbids features needing cross-file type info because Babel and esbuild compile each file alone; const enums, certain re-exports, and namespace tricks are flagged.
How do you configure a dual ESM/CommonJS package?
Use exports.require for .cjs and exports.import for .mjs, keep type unset or explicit, and compile separate artifacts.
How do you opt out of static rendering for real-time data?
Tests Next.js App Router caching and dynamic rendering escape hatches. Cover force-dynamic SSR, ISR with revalidate, noStore, and client fetching; weigh server load vs staleness. Red flag: only CDN purges without segment config or data cache fixes.
How does Svelte compile count += 1 into DOM updates?
Tests if you know Svelte reactivity is compile-time via runes, not runtime proxies. Good answer: $state marks reactive vars; runes are compiler hooks; compiler emits DOM-sync code. Red flag: describing useState or VDOM.
Explain TypeScript Project References in a monorepo and their configuration
This tests monorepo build scaling. Good answers: split into composite projects with references arrays, use tsc --build for incremental compilation, and consume .d.ts outputs for boundaries. Red flag: calling it path mapping or omitting --build.
Implement A/B testing with Middleware rewrites and cookies
Sticky cookie, internal rewrite, vary cache on cookie, server-side analytics.
Explain patch flags and static hoisting in Vue 3's compiler
Tests your grasp of compiler-informed virtual DOM optimizations. A strong answer covers patch flags as bitmap hints for dynamic bindings and static hoisting as extracting static nodes to skip diffing. Red flag: claiming Vue 3 removes the virtual DOM.
Implement a custom next/image loader for a self-hosted service
Tests next/image loader contract and URL construction. A strong answer defines a function taking src, width, and quality; returns a URL string for your service; and wires it via the loader prop or loaderFile config.
Compare SSR, SSG, and ISR trade-offs in meta-frameworks
What it tests: matching rendering modes to build time, freshness, and scale. Outline: contrast SSR per-request cost with SSG fast CDN delivery but stale content and long builds, then show ISR as lazy regeneration post-deploy.
How can you use Edge Middleware for auth and trade-offs versus getServerSideProps?
Middleware checks cookies/JWT for fast Edge rewrites/redirects; getServerSideProps uses full Node.js for heavy sessions with colder starts.
How would you design auth for ISR pages without losing cache benefits?
Tests cache segmentation and dynamic boundaries in Next.js. Propose a static ISR shell for anonymous users, then fetch personalized data client-side or via dynamic server paths when cookies are present.
What is a Fiber in React Fiber architecture?
Tests reconciler internals. Strong answers define a Fiber as a unit of work with child, sibling, return, and alternate pointers; explain the linked-list tree enables incremental traversal; and note alternate connects current and work-in-progress trees.
How does React's scheduler prioritize updates with Fiber?
Tests cooperative scheduling. Cover Fiber's incremental units, the Scheduler's time-slicing loop, and Lanes where SyncLane and InputContinuousLane outrank DefaultLane. Red flag: claiming React uses a separate thread or that batching alone handles priority.
Tearing and useSyncExternalStore in concurrent React
Tearing is inconsistent UI when an interruptible render reads a changed external store mid-pass; useSyncExternalStore subscribes and forces consistent snapshots, re-rendering synchronously on change.
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