Intermediate interview questions in Frontend Dev, page 7
Difference between jest.fn, jest.spyOn, and jest.mock in React
Tests whether you distinguish Jest's three mocking scopes. Good answers: jest.fn for standalone callbacks; jest.spyOn to observe existing methods; jest.mock to swap entire modules. Red flag: using them interchangeably or saying spyOn replaces modules.
Implement the built-in NonNullable<T> utility type from scratch
Tests conditional type distribution and union filtering. A strong answer uses distributive conditional types to map null and undefined to never while preserving other union members.
How do you create a dynamic route and access the id parameter?
This tests Vue Router dynamic segment syntax and param access. Define the path with a colon like /products/:id, then read via useRoute().params.id or $route.params.id. A red flag is expecting a remount on param changes or parsing window.location manually.
Customize a Button without !important
Expose CSS custom properties as a styling API, accept className or style overrides, keep internal selectors low specificity so overrides win cleanly.
Explain navigation guards and provide an auth use case
Guards are global, per-route, or in-component hooks; returning false cancels, a route object redirects; use auth on /dashboard.
Accessible composite TextField component
Associate label and input via matching for and id, generate a unique id, spread remaining props onto the native input.
How do you configure a route for lazy loading?
Tests route-level code splitting and initial bundle control. Outline: dynamic imports in route config, on-demand chunk fetching, and measurable load-time wins versus eager loading. Red flag: treating lazy loading as just images or components, not route code.
CSS Modules versus Styled Components
CSS Modules scope via build-time hashed class names with near-zero runtime; Styled Components scope via runtime CSS-in-JS with easy dynamics but a runtime cost.
What are nested routes and why are they useful?
Nested routes render children inside a parent's router-view, preserving shared layouts while URL segments swap nested content.
How do you create a /blog/[slug] route and access the slug value?
Use a [slug] directory with page.js; in App Router read the params prop in server components or useParams in client components.
Controlled vs uncontrolled Modal component
Uncontrolled is convenient but inflexible, controlled gives parent full power and predictability, and a hybrid supports both.
What are localStorage's capacity and synchronous blocking limitations?
This tests Web Storage API trade-offs and main-thread blocking. A strong answer notes synchronous calls block the main thread; cites a finite per-origin quota; and names IndexedDB for async needs. Red flag: calling it a database or ignoring UI freezes.
How do loading.js and error.js integrate with Suspense and Error Boundaries?
Tests grasp of App Router conventions wrapping React primitives. loading.js suspends its segment for instant navigation feedback; error.js adds a client Error Boundary for child segment crashes. Wrong: assuming they are server-only or replace manual usage.
Design a type-safe generic localStorage wrapper in TypeScript
Generic getItem<T> returns T|null via JSON.parse, setItem<T> stringifies, and a key-to-type map enforces safety.
What are Next.js Route Groups and a practical use case?
Tests App Router conventions organizing routes without changing URLs. A good answer names parenthesized folders like (shop) removed from the path, cites multiple layouts per section, and keeps URLs clean. Red flag: confusing them with dynamic [slug] segments.
Explain IndexedDB transactions and readonly vs readwrite modes
Every operation needs a transaction; readonly allows concurrent readers, readwrite is exclusive; they auto-commit when idle.
Recommended App Router pattern to fetch shared data once for child routes
Tests App Router layout constraints and request deduplication. Answer: wrap the user fetch in React cache, call it from layout and child Server Components, and let Next.js deduplicate. Red flag: layout prop drilling or getServerSideProps.
Write an IndexedDB add function with transaction error handling
Tests IndexedDB request-transaction lifecycle and event-driven error propagation. Answers open a transaction, call add(), and wire onsuccess/onerror on the request plus onabort/onerror on the transaction. Red flag: ignoring onabort or duplicate-key throws.
Managing focus in an accessible modal dialog
Move focus in on open, trap Tab within the dialog, close on Escape, and restore focus to the trigger on close.
ARIA roles for an accessible tab interface
Tablist contains tabs, each tab uses aria-selected and aria-controls, panels use role tabpanel with aria-labelledby, and arrow keys move between tabs.
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