Intermediate interview questions in Frontend Dev, page 6
How would you build a reusable Svelte validation action?
Tests Svelte action lifecycles versus inline logic. Strong answers describe a node function that attaches input or blur listeners, toggles classes or ARIA directly, returns update and destroy, and cite reusability.
Write a generic type-safe getProperty using keyof
Command of TypeScript generics and keyof for compile-time property access. Declare generic T, accept key as keyof T, and return T[K].
Create a generic State class with getState and setState
Write class State<T> with private T, constructor(T), getState(): T, and setState(T).
How do you select a single property and prevent extra re-renders?
Tests selector granularity and reference equality in subscriptions. Great answer: return a primitive via a focused selector; for objects, memoize with createSelector or pass shallowEqual. Red flag: reaching for useMemo or React.memo before fixing the selector.
Write a generic fetchJSON<T> wrapper and explain its type safety benefits
Tests preserving type info across async boundaries via generics. Outline: write fetchJSON<T> returning Promise<T>, note response.json() is any, and show T lets callers lock in the response shape for compile-time checks.
How would you handle an async API call in Redux Toolkit versus Zustand?
Tests structured async state machines versus lightweight patterns. A strong answer contrasts createAsyncThunk's pending/fulfilled/rejected lifecycles with Zustand's direct set() in async functions, noting Redux's traceability trade-off.
Generic merge with an intersection return type
Use two type parameters T and U, return T & U, spread both objects; note later spread wins on key collisions and the type may not reflect that.
Explain atomic state management and how it differs from Redux
This tests bottom-up vs top-down architecture. Good response contrasts atom graphs with Redux's monolithic store, notes atoms avoid extra rerenders sans selectors, and flags granular subscriptions.
Roll out a design system color change
Update the token source, rebuild outputs, version and publish, bump the app's dependency, verify contrast and visual regressions.
Accessibility built into a Modal component
Trap focus in the modal, return focus on close, escape to dismiss, role dialog with aria-modal and a labelled title, inert background.
When to adopt Pinia or NgRx over simple services?
Services work for small apps; use Pinia/NgRx when state is shared across many components, mutations are complex, or debugging/undo matters.
Implement optimistic UI for a like button with rollback on failure
Tests state management and error recovery in async UIs. A strong answer mutates state instantly, fires the API in parallel, keeps a rollback snapshot, and reverts with a toast on failure. Red flag: waiting for the network or skipping revert logic.
Test a React component fetching async data on mount
Whether you can assert on asynchronous DOM updates without race conditions. Mock the API, render, then use findBy or waitFor to assert on loading and loaded states. Red flag: using getBy right after render or forgetting to await async queries.
Light and dark themes with design tokens
A shared primitives file plus per-theme semantic files, transformed into custom properties scoped by selector, components read the semantics.
How would you cache data between a list and detail view?
Use nested keys so detail reads from list cache with staleTime to skip refetches.
Write a generic MakeOptional<T> mapped type without using Partial
This tests mapped type mechanics and the optionality modifier. A strong answer iterates over keyof T, adds the ? modifier, and preserves the original type via indexed access. A red flag is suggesting Object.assign or saying you would just use Partial.
How do you unit test a custom React hook like useCounter?
This tests whether you know hooks must run inside a component and that renderHook provides that scaffold. A strong answer names renderHook and act, explains result.current access, and warns against calling hooks directly.
Testing a component that consumes React Context
Render inside the Context.Provider with a value, or omit it to exercise the default; use a custom render wrapper for reuse.
Create TerminalStatus from Status using Exclude or Extract
This tests conditional type mechanics and whitelist versus blacklist thinking. Extract selects matches by assignability; Exclude removes others. Prefer Extract when the desired set is explicit. Red flag: claiming they are equivalent or only knowing Exclude.
Implement MyParameters<T> using conditional types and infer
Tests if you can extract parameter types with infer. A strong answer matches T against a callable signature, uses infer to bind parameters into a tuple, and defaults to never for non-functions. Red flag: using any or indexing without inference.
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