Interview questions in Frontend Dev, page 11
Using :is() and :where() to manage specificity
:is() groups selectors and takes its most specific argument's specificity, :where() does the same grouping but contributes zero specificity, ideal for easily overridable defaults.
How do CSS Modules differ from Vue scoped CSS?
This question tests build-time versus compiler style isolation. CSS Modules export a hashed class mapping object; Vue scoped CSS adds unique data-attributes. You bind templates via $style.myClass or an imported object. Red flag: claiming both use attributes.
Write a createUser function that POSTs JSON via fetch
Precise fetch configuration for JSON POST requests. A strong answer names method POST, headers Content-Type application/json, and body JSON.stringify(data) with return typing. Red flag: passing the raw object as body or omitting headers.
Explain the difference between React.memo and useMemo
React.memo skips re-renders when props match; useMemo caches a computed value between renders.
What is a CSS pre-processor?
A pre-processor adds variables, nesting, mixins, functions, and partials, compiling its own syntax into plain CSS for the browser.
How do _ngcontent and _nghost attributes enforce Angular style isolation?
Unique component ID, _nghost on host, _ngcontent on template nodes, and CSS rewritten with attribute selectors to scope styles.
Write a typed async fetchUser with error handling
Tests promise-based fetch plus TypeScript return-type contracts. A strong answer checks response.ok before response.json() and types the return as Promise<User>. A red flag is swallowing 4xx/5xx errors silently.
Child re-renders with unchanged props: function identity and useCallback fix
This tests reference equality and React memoization. A strong answer says inline functions recreate on every parent render, breaking React.memo, and uses useCallback with a correct dependency array. A red flag is ignoring identity or omitting dependencies.
Sass variable versus CSS custom property
Sass $vars resolve at build time and vanish from output; CSS --vars live in the browser, cascade, inherit, and update at runtime. Use Sass for static config, custom properties for theming.
Shadow DOM vs build-time scoping for third-party widgets
Shadow DOM gives true isolation but blocks global theming and complicates SSR; build-time scoping keeps theming and SSR simple but needs tooling.
How do you include a JWT in a fetch request?
Tests knowledge of the fetch options object and Bearer scheme syntax. A strong answer sets headers: { Authorization: Bearer <token> } as the second argument and notes fetch does not auto-attach tokens. Red flag: omitting Bearer or hardcoding secrets.
How would you use React Profiler to find unnecessary re-renders?
This tests the Profiler for wasted renders. A good answer covers wrapping a subtree in Profiler, comparing actualDuration to baseDuration on updates, and checking for missing memoization. Red flag: mentioning only the browser extension without timing metrics.
What is nesting in Sass and its pitfall?
Nesting writes child rules inside parents mirroring structure, but deep nesting generates long descendant selectors with high specificity.
How does Vue's v-bind() CSS function work in style blocks?
Tests Vue SFC CSS transforms and browser primitives. Strong answer: Vue compiles v-bind() to scoped CSS custom properties, letting reactive values work with pseudo-selectors and media queries.
How do you handle an API returning 200 for success and failure?
This tests TypeScript narrowing and runtime validation of ambiguous 200 responses. A strong answer uses a discriminated union, narrows with a type guard, and validates shape before branching. Red flag: casting the body with as and skipping runtime checks.
When can overusing useMemo hurt performance and what are the trade-offs?
Memoizing cheap work wastes cycles, increases memory use, and burdens dependency tracking.
Sass @mixin versus @extend
@mixin copies declarations into each caller, accepts arguments, and can duplicate code; @extend groups selectors sharing one rule via a comma list, reducing duplication but coupling selectors.
How do you bypass Svelte's scoped styles to target global elements?
Tests Svelte style encapsulation escape hatches. Strong answer: :global() syntax for elements and classes, plus risks like leaky side effects and specificity wars. Red flag: external stylesheets or inline styles as the primary solution.
Create a generic fetchJson wrapper with typed response and error handling
Generic T parameter, optional RequestInit, throw if !res.ok, return res.json() as Promise<T>.
How do React.lazy and dynamic import() enable code splitting?
It tests your grasp of React code-splitting and the Suspense contract. A strong answer states that lazy defers loading until first render via dynamic import, and Suspense shows a fallback while the Promise resolves.
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