Interview questions in Frontend Dev, page 26
AOT vs JIT compilation: what does ahead-of-time win?
AOT compiles templates at build time (catches errors early, smaller bundle, faster startup), JIT compiles in browser (slower startup, larger bundle, flexible).
Brand color as a token and CSS custom property
Define a typed color token in JSON, generate a custom property like --color-brand-primary, then reference it with var().
Why is Fiber's render phase interruptible but commit is not?
Render calculates changes on invisible tree; commit runs DOM mutations and lifecycles synchronously.
CSS Grid versus Flexbox fundamentals
Flexbox is one-dimensional (a single row or column), Grid is two-dimensional (rows and columns together); use Grid for page layout, Flexbox for a toolbar of items.
How does ngc work in Angular AOT and what artifacts improve performance?
This tests understanding of AOT build-phase compilation and output. Cover efficient JS output, inlined templates and styles cutting AJAX requests, and removal of compiler payload roughly half of Angular. Red flag: conflating AOT and JIT or calling it bundling.
How does React batch multiple setState calls in one event handler?
Tests your grasp of React batching and stale closures. React queues updates until the handler exits, so multiple literal setState calls with the same stale value update once, while updater functions queue sequentially.
CSS transition versus animation
Transitions interpolate between two states triggered by a change; animations use keyframes for multi-step, looping, autonomous motion.
What is Angular Ivy's 'locality' and its benefits over View Engine?
Tests Ivy's per-file compilation model. Locality compiles decorators to static properties without global knowledge, except components need their NgModule scope, speeding builds and tree-shaking.
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.
Server-side data fetching in Nuxt 3?
Use useFetch or useAsyncData to fetch on server, data is serialized and injected into page state, component accesses it as reactive data.
Core tokens versus alias semantic tokens
Core tokens are raw values like blue-500; alias tokens reference cores with intent like color-action; semantic aliasing decouples meaning from raw value.
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.
Component variants with BEM modifier classes
A base block class holds shared styles, modifier classes (block--primary, block--destructive) layer only the differences, and you combine base plus one modifier.
Pass server state to client in Nuxt and name the composable
This tests Nuxt SSR state hydration. A strong answer names useState, explains server values serialize to JSON for client hydration, and warns against refs defined outside setup.
Template syntax vs JSX: framework design trade-offs?
Templates (Vue, Angular) are declarative, easier to learn, enable static analysis; JSX (React, Solid) is code-based, flexible, familiar to JavaScript developers.
Monorepo tradeoffs for a design system
Monorepos give atomic cross-package changes, shared tooling, and easy local linking; drawbacks include build complexity, CI scaling, and tighter coupling.
How would you implement a custom useDebounce hook using useState and useEffect?
It tests effect cleanup and stale closure awareness. Use useState for the debounced value, useEffect to set a setTimeout when the input changes, and return a cleanup calling clearTimeout. Omitting cleanup leaks timers and fires stale values.
Multi-theme infrastructure for a component library
Style components against semantic tokens exposed as CSS custom properties, define per-theme token values, and switch at runtime via a data-theme attribute or class.
How do Vue, Angular, and Svelte stores trigger component re-renders?
Tests deep knowledge of reactivity primitives. Contrast Vue's proxy subscriptions, Angular's RxJS push through async pipe or markForCheck, and Svelte's compiler-generated store invalidation. Red flag: claiming all three use virtual DOM diffing or polling.
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