Frontend Engineer Technical Interview Questions & Answers (2026)

Debounce delays function execution until after a specified wait period of inactivity. Implementation: function debounce(fn, delay) { let timer; return function(...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, ...args), delay); }; }. The closure captures 'timer' so each call to the returned function can clear the previous timeout. If called again within the delay period, the previous timeout is cleared and a new one starts. 'fn.apply(this, ...args)' preserves the calling context and arguments. Real-world use: search-as-you-type (debounce the API call with 300ms delay so you don't fire on every keystroke), window resize handlers, and auto-save features. The difference from throttle: debounce waits for inactivity (fire after the last call), throttle limits frequency (fire at most once per interval). For a search box, debounce is better (wait until user stops typing). For scroll tracking, throttle is better (update position at regular intervals). I'd extend this with an 'immediate' option that fires on the leading edge: execute immediately on first call, then wait for inactivity before allowing the next execution.

When state changes via setState or a hook setter, React schedules a re-render. The process has two phases: Render phase: React calls your component function with the new state, producing a new virtual DOM tree (React elements). This phase is pure — no side effects, no DOM mutations. React can pause, abort, or restart this work (this is the fiber architecture's key benefit). Reconciliation: React diffs the new virtual DOM against the previous one using its diffing algorithm. Key optimizations: same element type at the same position is updated in place. Different types cause unmount/remount. The 'key' prop helps React identify which items in a list moved, added, or removed — without keys, React compares by position which causes unnecessary remounts. Commit phase: React applies the minimal set of DOM mutations to the real DOM. This is synchronous and can't be interrupted. useEffect callbacks run after the commit. useLayoutEffect runs synchronously after DOM mutations but before paint. Optimization points: React.memo prevents re-renders when props haven't changed (shallow comparison). useMemo and useCallback memoize values and functions. React 18's concurrent features allow React to interrupt rendering to handle higher-priority updates (like user input), preventing jank.

I'd diagnose with Lighthouse, Chrome DevTools Performance tab, and real user monitoring (Web Vitals library). For LCP (Largest Contentful Paint): identify the LCP element (usually a hero image or heading). Optimize images: use next-gen formats (WebP/AVIF), responsive srcset, lazy loading for below-fold images but eager loading for the LCP image. Preload critical resources with link rel=preload. Reduce server response time (TTFB) with CDN, edge caching, and server-side rendering for critical content. Eliminate render-blocking CSS by inlining critical CSS and deferring the rest. For INP (Interaction to Next Paint): break up long JavaScript tasks (>50ms) using requestIdleCallback or scheduler.yield(). Use web workers for heavy computation. Avoid forced synchronous layouts by batching DOM reads and writes. Virtualize long lists (react-window). For CLS (Cumulative Layout Shift): always specify width/height on images and iframes. Use aspect-ratio CSS for responsive containers. Reserve space for dynamically loaded content (ads, embeds). Use font-display: optional or preload fonts to prevent FOIT/FOUT layout shifts. Use CSS contain for elements that shouldn't affect layout of siblings. I'd prioritize based on the specific scores: fix the worst metric first since it has the most impact on the overall PageSpeed score.

I'd decompose into layers: 1) FormProvider context holding form state, validation errors, and submit handling. This enables any nested field to access form state without prop drilling. 2) Step components that render the fields for each form step, with a StepController managing navigation (next, back, jump to step). 3) Field components that are controlled and register themselves with the FormProvider on mount. Each field has a validation schema (I'd use Zod for type-safe runtime validation). 4) Validation strategy: field-level validation on blur (immediate feedback), step-level validation on 'Next' (prevent advancing with errors), and form-level validation on submit (cross-field validation). For dynamic fields (add/remove): I'd use a field array pattern where the state is an array of field configs. Each dynamic field gets a stable key (UUID on creation, not array index) to prevent React key issues. State management options: for most cases, React Hook Form or Formik handle this well. For very complex forms (50+ fields, conditional logic), I'd consider a form state machine (XState) that explicitly models the multi-step flow and transitions. Accessibility: each field needs aria-describedby linking to its error message, focus management when errors appear, and proper fieldset/legend for grouped fields.

The journey from URL to pixels: 1) DNS resolution: browser checks cache, then OS cache, then recursive DNS query to resolve the domain to an IP address. Optimization: DNS prefetch for known domains. 2) TCP connection: three-way handshake (SYN, SYN-ACK, ACK). With HTTP/2+, this connection is multiplexed. 3) TLS handshake: for HTTPS, additional round trips to negotiate encryption. TLS 1.3 reduced this to one round trip. 4) HTTP request/response: browser sends GET, server responds with HTML. 5) HTML parsing: the parser builds the DOM tree token by token. When it hits a script tag (without async/defer), parsing stops until the script downloads and executes — this is why scripts should be deferred or placed at the end of body. 6) CSS parsing: builds CSSOM. CSS is render-blocking — the browser won't paint until CSSOM is ready. Critical CSS should be inlined. 7) Render tree construction: combines DOM and CSSOM, excluding invisible elements (display:none). 8) Layout: calculates exact position and size of each element (also called reflow). 9) Paint: fills in pixels — text, colors, images, borders, shadows. This happens in layers. 10) Compositing: layers are combined and sent to the GPU for display. Key optimization: minimize critical resources (CSS, synchronous JS), reduce critical path length (fewer round trips), and minimize critical bytes (compression, minification).