Interview questions in Frontend Dev, page 25
Center a div with Flexbox on the parent
Set display flex on parent, justify-content center for the main axis, align-items center for the cross axis.
How do Vue, Angular, and Svelte handle deep prop mutation re-rendering?
Vue and Svelte detect nested mutations via Proxies; Angular default re-renders via Zone.js, but ngOnChanges misses it since the reference is unchanged.
Type a compose function using generics and overloads
It tests your ability to type higher-order pipelines where each function's output feeds the next input. Use function overloads with chained generics for each arity so TypeScript infers the composed parameter and return types.
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.
CSS Modules versus BEM for encapsulation
CSS Modules scope via build-time hashed class names automatically; BEM scopes via disciplined human naming with no tooling.
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.
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.
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.
What are keys in React lists and why are they important?
Whether you understand React's reconciliation identity tracking. Keys are unique identifiers that let React match items across renders, preserving DOM state and avoiding unnecessary recreation.
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.
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