Interview questions in Frontend Dev, page 6
Implement a scoped slot pattern in a reusable DataList
It tests delegating rendering while keeping data ownership in the child. A strong answer covers a DataList that fetches internally and exposes rows via slot props, plus Angular TemplateRef via let-item. Red flag: parent loops or slots inheriting child scope.
How would you model fetchItem's return type with generics and conditional types?
Define base and extended Item, return T extends true ? ExtendedItem : BaseItem, and overload the plain boolean case.
Describe combining useContext and useReducer for scalable feature state
This tests replacing prop drilling with a context-reducer pattern. A strong answer covers two contexts for state and dispatch, a provider wrapping the subtree, and a pure reducer. A red flag is one global context or async logic inside the reducer.
How do min-content, max-content, and fit-content work in CSS Grid?
It tests intrinsic track sizing. A strong answer defines min-content as the smallest no-overflow width, max-content as widest no-wrap width, and fit-content as clamped max-content; then shows labels hugging longest word.
Architect a headless Toggle with scoped slots
This tests decoupling logic from markup via scoped slots. A strong answer exposes on and toggle through a single default scoped slot, renders no DOM, and cites UI flexibility. A red flag is using config props or CSS classes to control layout.
Type alias for a function with optional param and default value
Tests whether you know function type expressions cannot encode default values. A great answer writes (s: string, n?: number) => boolean, explains defaults are implementation-only, and notes parameter names are required.
Pass server-fetched data from Server Components to nested Client Components
Tests RSC boundary awareness. Strong answer: fetch in the async Server Component, pass serializable props to nested Client Components. Red flag: proposing Context or useEffect inside the Server Component.
How can CSS aspect-ratio and modern layout properties prevent CLS?
Set width/height attributes, use CSS aspect-ratio for responsive scaling, and reserve container space with min-height.
How do Vue and Angular detect nested object mutations?
Tests deep reactivity vs reference-based detection. Vue 3 Proxies catch nested mutations; Angular Default checks on zone ticks and OnPush misses same-reference changes. Fix via immutability, deep watchers, or ngDoCheck.
Create a Person class using TypeScript parameter properties
This tests TypeScript parameter properties: constructor access modifiers auto-declare and initialize fields. A strong answer gives class Person { constructor(public name: string, private age: number) {} } and notes it removes manual this.name = name…
What is a stale closure in React hooks?
Tests closures and hook dependencies. A strong answer defines stale closure as capturing an outdated variable, shows a useEffect interval with stale state, and fixes it with dependencies and cleanup. Red flag: omitting cleanup or using refs blindly.
What is the viewport meta tag and what does width=device-width, initial-scale=1.0 do?
This tests mobile viewport behavior and CSS pixels. The tag instructs browsers how to size the viewport; width=device-width sets width to screen CSS pixels; initial-scale=1.0 sets a 1:1 zoom ratio. A red flag is confusing viewport width with physical pixels.
How do you conditionally render Login/Logout with isLoggedIn in Vue or Angular?
This tests DOM lifecycle awareness versus CSS toggling. A strong answer uses v-if/*ngIf for infrequent changes that need cleanup, and v-show/[hidden] for frequent toggles that should stay mounted. A red flag is treating them as interchangeable.
How do you type a function with string and number overloads?
Tests if you know overloads are public API and the implementation uses a union. Answer: write process(string):string and process(number):number overloads, then implement with string|number and narrow. Red flag: exposing only the implementation signature.
How do CSS Modules solve global scope conflicts in React?
This tests build-time hashing and local scope. An answer explains that CSS Modules compile classes into unique hashes, scoping styles to the component, and shows the React import pattern styles.primary.
Explain the mobile-first approach and how it differs from desktop-first
Mobile-first starts small, layers up with min-width; desktop-first starts large, overrides down with max-width.
Explain two-way data binding and provide input binding syntax
Tests whether you see two-way binding as sugar for value binding plus an input event. Strong answer: show one syntax, then explain the prop-out, event-in pattern. Red flag: syntax only with no mention of change detection or unidirectional flow.
Why does this lose context in class callbacks and two TypeScript fixes?
This tests runtime this binding. Explain that regular functions get this from the call site, so passing a method strips its object context. Fix with an arrow property or constructor bind. Red flag: var self = this or claiming TypeScript changes binding.
Where and how to import global stylesheets in Next.js
This tests Next.js style entry points. In the App Router, import global CSS in the root layout.js; in the Pages Router, import it in _app.js. Never import global styles inside pages or components, since Next.js restricts global CSS to root-level files.
Make an image scale fluidly without exceeding its original size
Tests intrinsic sizing awareness. Good answer: max-width: 100% scales the image down with its container but never stretches it beyond intrinsic size; add height: auto to preserve aspect ratio. Red flag: width: 100% or omitting height, causing distortion.
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