Home/Resources/Interview Cheat Sheet

1-Page Senior Frontend Interview Cheat Sheet

01 · React 19 & Actions Architecture

Client / Server

useActionState(fn, init): Replaces boilerplate reducer + loading state. Automatically manages pending transitions, form error returns, and optimistic state.
useOptimistic(state, updateFn): Instant UI updates with automatic rollback on network failure. Keep pure and idempotent.
use(Promise | Context): Reads promises and contexts inside conditionals and loops. Automatically unwraps Suspense boundaries.
Server Actions: RPC boundary marked by "use server". Always validate payloads with Zod; treat arguments as untrusted user input.

V8 / Event Loop

Event Loop Ordering: Synchronous call stack → All Microtasks (Promise.then, queueMicrotask, MutationObserver) → Render Pipeline (RAF / Style / Layout) → Single Macrotask (setTimeout, IO).
Closure Memory Leaks: Outer scope variables referenced by inner callbacks remain in the heap forever if the listener is never removed in cleanup.
WeakMap vs Map: Keys must be objects. Keys are weakly referenced, enabling GC to reclaim entries without manual deletion. Perfect for private state and DOM element metadata.
Prototypal Delegation: Property lookup climbs __proto__ up to Object.prototype. Never mutate prototype at runtime to prevent V8 de-optimizations.

UX Metrics

INP (Interaction to Next Paint) < 200ms: Replaced FID. Measures total interaction latency. Fix with scheduler.yield(), debounced input handlers, and web workers.
LCP (Largest Contentful Paint) < 2.5s: Identify critical hero element, preload with <link rel="preload" as="image" fetchpriority="high">, avoid client-side redirect chaining.
CLS (Cumulative Layout Shift) < 0.1: Reserve aspect ratios (aspect-ratio: 16/9) for images/ads. Never insert dynamic banners above active viewport content without animation.
Long Animation Frames (LoAF): API to inspect script evaluation bottlenecks exceeding 50ms causing dropped 60fps frames.

Architecture

Data Fetching vs Caching: Stale-While-Revalidate (SWR) for read-heavy feeds. Cache invalidation on mutation via optimistic state and targeted query key resets.
SSE vs WebSockets: Use Server-Sent Events (SSE) for one-way streaming (AI chat, live updates). HTTP/2 multiplexing removes connection limit. Use WebSockets only for true bidirectional low-latency collaboration (canvas, multi-user cursor).
List Virtualization: Render only visible window slice + 5 item buffer. Dynamically measure heights using ResizeObserver to maintain 60fps scrolling on 100,000 items.
Offline-First State: IndexedDB for persistent large entities, localStorage for tiny tokens. Sync queue with exponential backoff on reconnect.

Solve 132 interactive frontend coding challenges and practice 315 deep-dive topics with automated grading.

Loading compiler resources...