Interview questions in Frontend Dev, page 9
Explain Angular default change detection, zone.js, and OnPush
Deep knowledge of Angular's automatic vs explicit change detection. Explain zone.js monkey-patching async APIs to trigger default checks; contrast with OnPush requiring immutable inputs, async pipe, or markForCheck.
Implement IntersectionObserver in TypeScript for lazy-loading images
Tests precise DOM typing and observer lifecycle. A strong answer types the callback as receiving IntersectionObserverEntry[], narrows entry.target to HTMLImageElement, swaps data-src to src, and calls unobserve.
Explain Shallow Routing in Next.js Pages Router
This tests URL updates without re-running getServerSideProps or getStaticProps in the Pages Router. A strong answer defines shallow: true, cites query-state UI like filters or modals, and notes same-page and App Router limits.
CSS will-change: purpose, appropriate use, and overuse consequences
Tests whether you know will-change is a last-resort hint, not a default. Strong answers: hint imminent changes, toggle via script, and warn that overuse wastes memory. Red flag: leaving it in CSS permanently or applying it preemptively to many elements.
Fundamental difference between Vue computed and watcher with examples
Tests derived state vs side effects in Vue reactivity. Computed returns cached derived value; watch executes callback on mutation. Example: computed filters list; watch fetches data when ID changes. Red flag: watch for template state or computed for async.
Write a generic TypeScript handler for mixed form inputs?
Tests TypeScript DOM narrowing. Strong answer: union-type ChangeEvent, narrow target with instanceof or tag checks, branch on element.type to read .checked for checkboxes or .value otherwise. Red flag: casting to any or assuming all inputs use .value.
How do you handle 404s in React Router and Next.js App Router?
Tests client versus server routing architecture. React Router uses a wildcard route returning HTTP 200 by default; Next.js App Router uses not-found.js for server-rendered 404s. Red flag: confusing the two routers or ignoring status code semantics.
How do you programmatically sync CSS animation progress to scroll?
This tests scroll-driven APIs beyond legacy scroll listeners. A strong answer names CSS animation-timeline and scroll-timeline declaratively, plus the Web Animations API with ScrollTimeline in JS. A red flag is using only requestAnimationFrame style mutations.
How do Svelte Stores work and how do you create custom ones?
Tests Svelte store contract mastery. A strong answer defines the subscribe/unsubscribe interface, wraps writable() with custom set/update logic, subscribes via $ prefix or manually, and uses $store in templates.
How do you wrap a callback-based API into a Promise?
This tests Promise constructor mechanics and callback migration. A strong answer returns a new Promise, calls the legacy function, maps success to resolve and errors to reject.
Explain controlled vs uncontrolled React form inputs and trade-offs
Tests state versus DOM ownership. Controlled inputs bind to React state via onChange; uncontrolled inputs read from DOM via refs. Trade-offs: reactivity, validation, complexity. Red flag: saying uncontrolled is easier while ignoring lost live validation.
How should you adapt animations for prefers-reduced-motion?
Scope motion to no-preference, swap scaling for opacity or instant cuts, keep functional changes visible.
Compiler vs runtime reactivity: Svelte, Vue, Angular?
Svelte compiles away reactivity (smaller bundles, zero-cost), Vue/Angular use runtime Proxies/zone.js (flexible but heavier).
Promise .catch() versus async/await try...catch
.catch() handles rejection for all preceding chain steps and reads functionally; try/catch reads synchronously and can scope errors per await, but only catches awaited rejections.
How do you handle a basic form submission in React?
Tests declarative form handling via controlled state. Nail it with onSubmit on the form, preventDefault to stop native reload, and state as the single source of truth. Red flag: reading values through refs or querySelector.
How do you structure and tokenize animation and transition values?
This tests semantic token architecture for motion. Structure duration and easing into tiered tokens: primitive values, semantic aliases like feedback or navigation, and component bindings. Avoid hardcoding values or using only raw milliseconds without meaning.
Explain the BEM naming convention
Block is a standalone component, Element is a child tied by double underscore, Modifier is a variant by double dash, keeping specificity flat.
Implement auto-cleanup reactive logic in Vue's Composition API and Svelte
Vue pairs onMounted with onUnmounted or watchEffect cleanup; Svelte uses $store auto-subscription or onDestroy.
How do you fetch from three APIs using Promise.all versus allSettled?
Promise.all parallelizes but rejects on first failure. allSettled returns every outcome with status, value, and reason.
Prefer multiple useState or useReducer for multi-field forms?
Separate useState for simple fields; one object for coupled validation or batch resets; useReducer for complex logic.
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