Frontend
450 bites tagged Frontend — interview questions with model answers, and 60-second explainers.
Which video event signals completion, and how do you track playback time?
Tests HTMLMediaElement events and UI performance. Answer: use ended for replay; read currentTime on timeupdate but throttle updates or use requestAnimationFrame. Red flag: setInterval polling, currentTime===duration checks, or unthrottled state writes.
Get canvas 2D context and draw a filled circle
This tests Canvas API coordinates and context acquisition. A strong answer selects the canvas, calls getContext("2d"), uses path functions for circles, sets color style, and fills. A red flag is ignoring the top-left origin or using SVG instead.
Programmatically change SPA URL without reload and what is state for?
This tests History API fluency. Answer: use pushState or replaceState to change the URL silently; the state object is serializable data tied to the history entry, surfaced through popstate on back or forward navigation.
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.
What is the core difference between localStorage and sessionStorage?
SessionStorage dies with its tab; localStorage survives restarts and shares across tabs. Example: checkout form versus theme preference. Tab isolation versus origin-wide persistence. Claiming persistence time differs.
Programmatically create and append a div in TypeScript
Tests TypeScript DOM typing and safe element creation. Strong answers name HTMLDivElement and Document, use createElement plus classList.add and textContent, then append. Red flag: innerHTML for text or avoiding specific types.
What is the fundamental difference between window and document?
Window is the browser tab and global scope; document is the object-oriented DOM representation of the loaded page. Your mental model of the browser runtime layers.
Key differences: type alias vs interface for object shapes
Tests your grasp of TypeScript extensibility and declaration merging. Contrast interfaces' extends and open merging against type aliases' unions, intersections, and primitives; prefer interfaces for public APIs and types for unions or mapped types.
Ambient Module Declarations: Compile-Time Trust Falls
Ambient module declarations are compile-time trust falls: you tell TypeScript the shape of code it cannot see. Use them for untyped npm packages, CSS imports, or CDN scripts.
Next.js 16.2 brings 67-100% faster server Fast Refresh
Next.js 16.2 Turbopack brings Server Fast Refresh to Node.js, cutting reload times 67-100% and compile times 400-900%. Only changed modules reload, not whole chains. WASM Workers, SRI, and dynamic import tree shaking land; upgrade to cut dev latency.
How do you ensure a complex form is fully accessible?
Pair labels to inputs, move focus to first error on submit, and link aria-invalid to aria-describedby. Mastery of semantic HTML, focus control, and ARIA for validation.
What is the Virtual DOM and why does React use it?
This tests reconciliation as declarative abstraction, not raw speed. Good answers define VDOM as in-memory UI synced to the real DOM, explain declarative state mapping, and note fibers enable incremental rendering.
Purpose of tailwind.config.js content array and JIT scanning
Tests knowledge of Tailwind's scan-to-generate pipeline. Strong answer: content defines files to scan as plain text for class tokens; JIT emits CSS only for discovered classes, keeping production CSS tiny. Red flag: calling it AST parsing or PurgeCSS config.
What limits React inline styles and when are they still appropriate?
This tests React styling trade-offs. Outline: no pseudo-classes, media queries, or keyframes; maintenance and perf costs; good for dynamic state styling, prototyping, FOUC prevention, and small components. Red flag: claiming they are always bad or free.
Describe a robust automatic token refresh strategy in a React SPA
This tests token rotation without UX interruption in SPAs. Use HttpOnly cookies for refresh tokens, in-memory access tokens, an interceptor with a promise lock, and proactive background refresh.
Explain how next/image's sizes prop works for responsive performance
This tests your knowledge of the browser responsive image algorithm. The sizes prop declares the rendered width at each breakpoint so the browser can select the smallest adequate srcset candidate.
What are the benefits of next/image over a standard img tag?
Tests knowledge of Next.js image infrastructure. Strong answers mention automatic optimization, lazy loading, blur placeholders for layout shift, and responsive srcset. Red flag: calling it a zero-impact wrapper or a styling component.
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.
What is layout.js and how does it differ from shared headers?
Layout.js persists across navigations without remounting; a shared header in each page.js remounts and loses state. App Router state preservation and nesting. calling them identical or only citing DRY.
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.
How would you unit test a React title component?
This tests React Testing Library's user-centric approach and Jest basics. A strong answer renders the component, queries the h1 by role or text, and asserts it is in the document. A red flag is using Enzyme shallow rendering or testing internal state.
How does React Testing Library's guiding principle influence query choice?
This tests whether you prioritize user-visible attributes over implementation details when selecting queries. A strong answer ranks getByRole, label, and text above testId because users interact with meaning, not data attributes.
How do Redux actions, reducers, and click-to-render data flow work?
Tests Redux unidirectional flow and immutability. Strong answer: actions are plain event objects, reducers are pure functions returning new state, and flow goes dispatch to store to UI. Red flag: actions mutating state or reducers with side effects.
How would you implement real-time client-side validation in React?
Tests state-driven UI thinking over imperative DOM updates. A strong answer uses a status enum like typing or error, derives validation from state instead of redundant booleans, and conditionally renders feedback.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.