Intermediate interview questions in Frontend Dev, page 12
Create a custom synchronous validator for an Angular Reactive Form
Tests your grasp of the ValidatorFn contract and reactive form wiring. A strong answer: a function accepting AbstractControl returns null when valid or an error object when invalid, passed as the second FormControl argument. Red flag: returning booleans.
Create a CustomEvent with typed detail and a type-safe listener
Tests TypeScript generics with DOM events. Strong answer: generic CustomEvent wrapper, typed detail, listener typed via generic param. Red flag: using any for detail or casting event.target instead of parameterizing the event type.
Designing a Card component's configurable API
Expose content via composition (slots/children), expose constrained variants as enums, lock spacing and brand tokens.
How would you structure a scalable store for interconnected domains?
Tests domain-driven state partitioning and cross-slice derived data. Strong answers use feature slices, normalized entities, and memoized selectors; keep computed state out of the store. Red flag: a monolithic state tree with component-level recomputation.
How does export = differ from export default in TypeScript declarations?
It tests CommonJS to ES module interop in TypeScript. export = maps to the entire module.exports object and must be imported with import = require() or ES interop, while export default creates a named binding. A red flag is claiming they are interchangeable.
Distributing design tokens across web, iOS, and Android
Keep one source-of-truth JSON, transform with a tool like Style Dictionary, emit per-platform formats (CSS vars, Swift, XML) in CI.
How would you implement a memoized selector for expensive derived state?
It tests cache invalidation and pure functions for reactive derived state. A strong answer covers reference tracking on inputs, returning cached results when unchanged, and requiring immutable or stable arguments.
How do you write a declaration file for a JavaScript class?
Declare a class in a .d.ts, type the constructor, add instance members, and attach statics on the class.
Describe React's diffing algorithm and its O(n) heuristics
Different types unmount and rebuild; same types patch attributes and recurse; keys hint stable identity for children.
Fixing brand color contrast at the system level
Build a tonal palette with known contrast steps, define semantic text-on-surface token pairs that pass AA, and enforce with automated contrast checks.
How would you unit-test a Svelte date utility with Vitest?
This question tests isolating pure logic from Svelte and configuring Vitest. A good answer covers installing Vitest, co-locating a spec file, and asserting known inputs. A red flag is insisting you must mount a Svelte component to test a plain function.
Type a UMD library for script tags and CommonJS/ESM
Tests TypeScript UMD declarations for dual global and module usage. Use export as namespace MyLib for the global, export = MyLib for require, and declare the API inside a namespace. Red flag: default exports or declare global instead of export as namespace.
Why did React replace the Stack Reconciler with Fiber?
Tests React scheduling limits. Good answers note the old reconciler was synchronous and recursive, blocking the main thread, while Fiber enables incremental rendering and interruptible work. Red flag: citing Hooks or vague speed claims without frame budgets.
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.
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