Frontend Developer Interview Prep Guide

This is one of the most common frontend coding challenges at Meta and Google. Structure your solution: create a controlled input with onChange handler, implement debounce (300ms) using useRef for the timer, manage suggestion state with useState, handle keyboard events (ArrowUp, ArrowDown, Enter, Escape), add ARIA roles (combobox, listbox, option) and aria-activedescendant for screen readers. Handle race conditions where a newer request should cancel a stale response. Show loading and empty states.

Explain that re-renders trigger from setState, context changes, or parent re-renders. Describe the diffing algorithm: same component type means update, different type means unmount/remount, keys help identify list items. React Fiber introduced an interruptible rendering model with time-slicing, enabling concurrent features like useTransition and Suspense. Discuss practical implications: why useMemo and useCallback exist, when they actually help versus hurt performance, and how React compiler (React Forget) aims to make manual memoization unnecessary.

This is a frontend system design question tested at Meta and Airbnb. Cover: component hierarchy (FeedContainer, FeedItem, IntersectionObserver for infinite scroll), data layer (normalized cache with TanStack Query or Apollo), real-time updates (WebSocket connection with reconnection logic), optimistic mutations (update UI immediately, rollback on failure), virtualized list rendering for performance (only render visible items), and service worker for offline caching. Discuss pagination strategy: cursor-based vs offset-based and why cursor-based is better for feeds with new content.

Walk through: DNS resolution, TCP handshake, TLS negotiation, HTTP request/response, HTML parsing (byte stream to tokens to DOM), CSS parsing to CSSOM, render tree construction, layout (reflow), paint, and compositing. Then connect each step to optimization: DNS prefetch, HTTP/2 multiplexing, critical CSS inlining, async/defer for scripts, font-display swap, lazy loading images below the fold. Relate to Core Web Vitals: LCP is affected by render-blocking resources, FID/INP by long tasks, CLS by unset dimensions.

Demonstrate real-world performance debugging: use Chrome DevTools Performance tab to record an interaction, look for long tasks blocking the main thread, check for forced synchronous layouts (reading offsetHeight after writing style), examine the flame chart for expensive React re-renders. Solutions include: breaking long tasks with scheduler.yield() or setTimeout, moving computations to a Web Worker, debouncing input handlers, using CSS containment, or virtualizing large lists. Mention that INP replaced FID as a Core Web Vital in March 2024.

Show clean hook design: accept a value and delay parameter, use useEffect with setTimeout, return cleanup function that clears the timeout, store the debounced value in state. Then extend it: discuss how this differs from debouncing the callback (useRef approach), when to use each, and how to add a leading edge option. Test it mentally with rapid state changes and component unmount scenarios.

Go beyond generic answers. Discuss specific techniques: semantic HTML (nav, main, article, button instead of div), ARIA attributes only when native HTML is insufficient, keyboard navigation (tabindex, focus management for modals and dropdowns), color contrast ratios (4.5:1 for normal text, 3:1 for large text per WCAG AA), focus visible indicators, screen reader testing with VoiceOver/NVDA, automated a11y testing with axe-core in CI, and how React specific patterns like portals and focus traps work in modal dialogs.

Be specific with numbers. For example: "I reduced our LCP from 4.2s to 1.8s by implementing code splitting with React.lazy, converting images to WebP with responsive srcset, and adding a service worker for caching static assets. This improved our Lighthouse score from 52 to 89 and our bounce rate dropped by 18% over the next month." The interviewers at Airbnb and Netflix specifically look for candidates who tie frontend improvements to business metrics.