Interview questions in Frontend Dev, page 5
How do you emit events from a child to parent component?
This probes unidirectional data flow and child-to-parent event emission. In Vue, call $emit with a named event and payload; in Angular, use @Output with EventEmitter and emit the query. A red flag is suggesting two-way binding or direct parent mutation.
How would you model a WebSocket message discriminated union in TypeScript?
This tests TypeScript discriminated union narrowing. Define interfaces with readonly literal kind fields, union them, and narrow with switch or if checks. A red flag is typing kind as generic string or using type assertions instead of narrowing.
What is a custom hook? Write a simple useToggle example.
What it tests: Whether you see hooks as stateful logic extraction. Outline: Define a use-prefixed function calling hooks; write useToggle with useState and callback; explain extraction vs duplication. Red flag: Helpers without hooks or missing use prefix.
Explain flex-grow, flex-shrink, flex-basis and their interaction
Tests deep understanding of flexbox sizing beyond keywords. A strong answer defines grow and shrink as ratios for distributing leftover or overflow space, basis as the starting size, and explains the two-step calculation.
Content projection: slots vs props for composition?
Slots let parent pass markup (not data) to child, child renders it as-is, vs props pass values; slots excel when parent needs full layout control.
Write a generic ApiResponse<T> type with success and error states
Define two interfaces sharing a status literal, one with data: T and the other with error: { code; message; }.
Explain useReducer and when to prefer it over useState
Tests if you know useReducer centralizes complex state transitions better than scattered useState. Answer: define reducer/dispatch, then contrast with useState via interdependent fields or deep updates. Red flag: calling it only for global state or Redux.
Create a responsive card grid without media queries
This tests CSS Grid intrinsic sizing. Answer: grid-template-columns with repeat(auto-fit, minmax(min, 1fr)), leveraging repeat, minmax, and auto-fit for fluid wrapping. Red flag: defaulting to Flexbox or media queries instead of intrinsic grid behavior.
What bindings do v-model and ngModel sugar, and why?
V-model sugars value and input; ngModel sugars [value] and (ngModelChange). This enforces one-way data flow for predictable state.
How would you combine BaseRecord and PostContent into a Post type?
This tests TypeScript type composition for API resources. A strong answer proposes an intersection type or interface extends, then discusses overlap conflicts and the type versus interface trade-off.
Use useContext to provide theme state without prop drilling
This tests global state sharing without prop drilling. A strong answer uses createContext and a Provider with useState at the app root, then calls useContext in nested components. Red flag: ignoring re-render costs or placing the Provider too deep.
Explicit vs implicit grid: how do you control implicit tracks?
Explicit tracks use grid-template; implicit tracks appear on overflow. Control via grid-auto-rows/columns and grid-auto-flow.
Compile-time vs runtime prop validation across frameworks?
TypeScript (compile-time) catches errors before build; Vue props validation (runtime) catches at runtime; tradeoff: TS is stricter, Vue validation is flexible but less safe.
How do you type a GeoJSON Coordinate tuple and LineString array?
Tests fixed-length tuple typing versus flexible arrays in TypeScript. A strong answer uses [number, number] for Coordinate, then Coordinate[] for LineString, and explains why number[] loses length safety. Red flag: using number[] or objects instead of tuples.
Explain the difference between useMemo and useCallback
This tests whether useMemo caches values while useCallback caches functions, and why that matters for React.memo. A strong answer notes React.memo uses Object.is, so a new inline function prop triggers a child re-render. Red flag: claiming they are the same.
Implement a fixed-width sidebar with Flexbox and CSS Grid
This tests Flexbox as one-dimensional versus Grid as 2-dimensional. A strong answer covers Flexbox with flex: 1 on main and flex: none on sidebar, and Grid with grid-template-columns: 250px 1fr. Red flag: claiming Grid is always superior or ignoring overflow.
Compare multiple boolean props versus a single status string prop
Booleans let callers pass conflicting flags like isLoading plus isError, leaking implementation priority; a single status enum makes invalid states unrepresentable.
Build a typesafe ApiRoute type using template literal types
Tests type-level string composition with template literals. Good answer: define a Resource union, interpolate it into /api/v1/ paths, then union with the /{id} variant. Red flag: suggesting runtime regex or plain string instead of literal types.
Compare HOCs and custom hooks for sharing logic
Tests your grasp of React's shift from wrapper-based to function-based logic reuse. Hooks eliminate wrapper hell and implicit props by extracting stateful behavior into plain functions without nesting components. Red flag: calling hooks just sugar.
What problem does subgrid solve? Give a concrete example.
This tests whether you know nested grids create track contexts breaking cross-level alignment. A strong answer explains subgrid inherits parent tracks, using a card whose internals align to a global page grid.
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