Search
Search topics, concepts, and tags.
Closures
A closure is a function bundled together with the lexical scope it was created in, so it keeps access to those outer variables even after the outer function has returned.
Event Loop & Asynchronous JavaScript
The Event Loop is the single-threaded coordinator that constantly monitors the Call Stack and transfers pending callbacks from the Microtask Queue and Task Queue once the stack is empty.
Promises, Async/Await & Race Conditions
A Promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value, preventing callback hell via chainable state transitions (pending -> fulfilled/rejected).
Debounce & Throttle Internals
Debounce delays execution until a burst of events pauses for N milliseconds; Throttle guarantees execution at most once every N milliseconds during continuous event streams.
Object Mutation & Deep Clone Internals
Deep Cloning creates an exact, independent copy of an object and all its nested references, avoiding shared object mutations while handling complex types like Date, RegExp, Map, Set, and circular references.
JavaScript & React Memory Leaks
A memory leak occurs when memory allocated by an application is no longer needed by the program logic but is retained by unintended references, preventing Garbage Collection (GC) from reclaiming it.
Scope, Hoisting & Temporal Dead Zone
Hoisting is JavaScript's compilation phase behavior where variable and function declarations are registered into memory within their lexical scope before any line of code executes.
this, Execution Context, call, apply, and bind
In JavaScript, 'this' refers to the object that is executing the current function. Its value is determined at runtime based on invocation context, unless explicitly bound or within an arrow function.
Prototypes, Prototype Chain, and Class Inheritance
JavaScript uses prototypal inheritance where objects hold an internal [[Prototype]] reference to another object. Property lookups traverse up this prototype chain until found or null is reached.
Event Bubbling, Capturing, and Event Delegation
Event Delegation is a pattern where a single event listener is attached to a parent element to handle events on its current and future children, leveraging DOM event propagation (bubbling).
Building React-like Class Components from Scratch (ES5 Prototypes & Mounting)
Building React-like components in ES5 involves creating a base `Component` constructor function with `setState` and `render` on `Component.prototype`, implementing prototype inheritance via `Object.create`, and wiring a micro-reconciler to mount and re-render the DOM tree.
React Fiber
Fiber is React's internal reconciliation architecture: a unit of work per component that lets rendering be split into chunks, paused, resumed, and prioritized instead of running as one uninterruptible pass.
Reconciliation, Diffing Algorithm & Keys
Reconciliation is React's recursive algorithm that compares two Virtual DOM trees to compute the minimum set of DOM mutations needed to bring the UI up to date using O(N) heuristic assumptions.
useMemo, useCallback & React.memo Internals
`useMemo` caches the result of an expensive calculation; `useCallback` caches a function definition between renders to preserve referential equality when passed to memoized children.
Concurrent React, Transitions & Suspense
Concurrent React is an interruptible rendering engine that prioritizes urgent user inputs (typing, clicking) over non-urgent background transitions (filtering, data fetching) without blocking the main thread.
React Hooks Internals, Lifecycle, and Dependency Traps
React Hooks store stateful logic and side-effects on Fiber nodes as a singly-linked list of hook objects. Their execution order must remain strictly identical on every render.
State Management Architecture: Client vs Server State
Modern frontend state architecture separates Client State (ephemeral UI state like modals and forms) from Server State (asynchronous remote data requiring caching, deduplication, and invalidation).
React Performance Optimization & Profiling Lab
React performance optimization focuses on eliminating unnecessary re-renders, breaking long JavaScript execution tasks into concurrent slices (startTransition), and reducing commit work via component composition.
Component Architecture: Reusable Button with Variants & Collapsible Accordion List
Production component design uses the Compound Component pattern, Class Variance Authority (CVA) for variants/sizes, forwardRef for DOM access, polymorphic `as` props, and strict WCAG ARIA keyboard accessibility.
React Class Component Lifecycle vs Hooks Execution Mapping
React class components manage lifecycle through instance methods (`componentDidMount`, `componentDidUpdate`, `shouldComponentUpdate`), while functional components synchronize state with side-effects using the declarative hook pipeline (`useEffect`, `useLayoutEffect`, `useMemo`, `useRef`).
SSR, SSG, ISR & CSR Rendering Architectures
Next.js rendering strategies define where and when HTML and data are generated: CSR (Browser on demand), SSR (Server on every request), SSG (Build time at edge), and ISR (Static with background regeneration).
React Server Components (RSC) vs Client Components
React Server Components (RSC) execute exclusively on the server, outputting a lightweight JSON stream without adding any JavaScript to the client bundle. Client Components (`'use client'`) add interactivity and state.
Next.js Caching Architecture & Revalidation Strategies
Next.js App Router implements a 4-layer caching system: Request Memoization (per-render deduplication), Data Cache (cross-request server data), Full Route Cache (static HTML/RSC at build/revalidation), and Client Router Cache (in-browser navigation cache).
Route Handlers, Edge Middleware, and Streaming Responses
Next.js Route Handlers provide custom HTTP endpoints using Web Request/Response APIs, while Edge Middleware intercepts incoming requests before cache or rendering to handle authentication, redirects, and header rewriting.
Browser Rendering Pipeline & Critical Rendering Path
The Critical Rendering Path (CRP) is the sequence of steps the browser executes to convert HTML, CSS, and JavaScript into actual visual pixels on the screen: DOM + CSSOM -> Render Tree -> Layout (Reflow) -> Paint -> Composite.
Browser Storage: localStorage, Cookies, IndexedDB & Cache API
Browser storage mechanisms provide client-side persistence with distinct capacity, lifecycle, accessibility, and security characteristics: Cookies (server-sync auth), localStorage (sync key-value), IndexedDB (async structured database), and Cache API (network requests for PWAs).
Web Workers vs Service Workers vs Worklets
Web Workers offload CPU-intensive calculations to background threads; Service Workers act as programmable network proxies for offline caching, background sync, and push notifications.
Network Protocols & Resource Hints (HTTP/2, HTTP/3, Caching, Preload)
Network protocols (HTTP/1.1, HTTP/2 multiplexing, HTTP/3 QUIC) and browser resource hints (preload, prefetch, preconnect) dictate how fast assets are fetched, compressed, and negotiated across the network.
Core Web Vitals: LCP, INP & CLS Optimization
Core Web Vitals are Google's three standardized user experience metrics measuring visual loading speed (LCP < 2.5s), interactive responsiveness (INP < 200ms), and visual stability (CLS < 0.1).
Bundle Optimization: Tree Shaking & Code Splitting
Bundle optimization minimizes JavaScript payload sizes through dead code elimination (Tree Shaking), dynamic route/component chunking (Code Splitting), and ES module analysis.
List Virtualization & Windowing Internals
List Virtualization (Windowing) renders only the small subset of DOM nodes currently visible in the scroll viewport (plus a tiny overscan buffer), recycling DOM elements as the user scrolls through datasets of 100,000+ items.
Performance Debugging Lab (DevTools, Profiler & Flame Charts)
Performance debugging is the structured methodology of measuring bottlenecks via Chrome DevTools (Performance, Memory, Network) and React Profiler before writing any optimization code.
Browser Rendering Internals: Reflow, Repaint & GPU Compositing
The browser rendering pipeline turns HTML/CSS into pixels through DOM/CSSOM creation, Layout (Reflow), Paint (rasterization), and Compositing (GPU layers). Optimizing animations requires targeting the Composite-only stage using `transform` and `opacity` to avoid blocking the main JavaScript thread.
Frontend Security: XSS, CSRF & Content Security Policy (CSP)
Core web security triad: XSS (executing unauthorized malicious scripts in user's browser), CSRF (tricking an authenticated user into sending forged requests), and CSP (HTTP headers defining trusted script/style/connect origins).
CORS Internals & Same-Origin Policy
CORS (Cross-Origin Resource Sharing) is a browser-enforced security protocol that restricts web applications from requesting resources from a different origin (Protocol + Domain + Port) unless the destination server explicitly permits it via HTTP headers.
Frontend Authentication Architecture: JWT vs HttpOnly Session Cookies
Secure frontend authentication stores sensitive session/refresh tokens in HttpOnly, Secure, SameSite=Strict cookies to protect against JavaScript-based token theft (XSS), while using short-lived in-memory access tokens for API authorization.
Accessibility (a11y): WCAG 2.1 AA, Focus Management & ARIA
Web Accessibility (a11y) ensures that digital products are fully usable by people with visual, motor, auditory, and cognitive disabilities, adhering to the 4 WCAG principles: Perceivable, Operable, Understandable, and Robust (POUR).
Building Accessible UI Primitives (Focus Trapping, Combobox, ARIA Live)
Accessible UI primitives strictly adhere to WAI-ARIA Authoring Practices: managing keyboard focus trapping (Tab/Shift+Tab), restoring trigger focus on close (Escape), associating labels via aria-labelledby/describedby, and announcing dynamic updates via aria-live.
System Design: Real-Time Analytics & Live Dashboard
System design architecture for high-frequency live dashboards (e.g. Robinhood trading, Datadog metrics, Uber driver tracker) handling 1,000+ updates/sec without frame drops, state bloat, or memory leaks.
System Design: AI Chat & LLM Token Streaming UI
System design architecture for modern AI interfaces (ChatGPT, Claude, Cursor) handling Server-Sent Events (SSE) token streaming, markdown parsing without layout jumps, optimistic message dispatch, cancel generation (AbortController), and tool call invocation UI.
System Design: Scalable Large Data Table (100k+ Rows)
System design architecture for enterprise data grids (e.g. Airtable, Excel web, Walmart Inventory) with 100,000+ rows, 50+ columns, cell editing, multi-column sorting, filtering, and export.
Micro-Frontends Architecture & Module Federation
Micro-frontends is an architectural style where independently deliverable frontend applications are composed into a unified user interface, primarily solving organizational scaling and team-boundary autonomy.
Design Systems & Dynamic Theming at Enterprise Scale
An enterprise Design System abstracts visual primitives into tiered Design Tokens (Global -> Semantic -> Component) and implements dynamic theming via CSS Custom Properties (CSS variables) to eliminate re-render penalties and dark-mode flashes.
Frontend Testing Strategy (Unit, Integration, E2E, MSW, a11y)
A resilient frontend testing strategy balances fast unit tests (Vitest/Jest) for pure utility logic, component integration tests (React Testing Library + MSW) testing user behavior from the user's perspective, automated accessibility checks (axe-core), and focused end-to-end smoke flows (Playwright).
Frontend Observability, Real User Monitoring (RUM) & Telemetry
Frontend Observability is the practice of capturing Real User Monitoring (RUM) metrics—including Core Web Vitals (LCP, INP, CLS), unhandled exceptions, network error rates, user interaction breadcrumbs, and session traces—to diagnose production regressions.
Design a Pinterest-like Masonry Grid UI System
A Pinterest-like Masonry Grid is an asynchronous, multi-column layout engine that places dynamic-height cards into the shortest available column, paired with infinite scrolling, 2D virtualization, aspect-ratio skeletons, and client memory management.
Frontend System Design (HLD) Framework for Production Projects
A standardized 7-step architectural blueprint to systematically structure, articulate, and defend any complex frontend production system in Senior/Lead/Staff technical interviews.
State Management Patterns
Modern frontend state management separates concerns into local component state, server cache (TanStack Query), URL state (search params), and lightweight client stores (Zustand) — each optimized for different access patterns.
TanStack Query & Server State Management
TanStack Query (React Query) is a dedicated server-state management library providing declarative data fetching, automatic caching, deduplication, background revalidation (SWR), and garbage collection.
Optimistic UI Updates & Rollback Strategies
Optimistic UI is an interaction design and architectural pattern where the client updates local state immediately assuming a server mutation will succeed, and cleanly rolls back state with user feedback if the mutation fails.
Retry, Exponential Backoff & Request Resilience
Retry with exponential backoff and jitter is the standard pattern for handling transient network failures. Combined with AbortController cancellation and idempotency, it creates resilient API layers.
API Request Patterns: Cancellation, Deduplication & Race Conditions
Advanced API client patterns solve race conditions, redundant bandwidth consumption, and stale responses using AbortController, promise memoization/deduplication, request pooling, and sequence tokenization.
Async Task Scheduler with Max Concurrency & Rate Limiting
An Async Task Scheduler throttles and queues asynchronous operations (Promises) to run at most `N` parallel tasks at any given moment, preventing network socket exhaustion, backend rate-limit bans (429), and CPU saturation.
Frontend Testing Strategies: Trophy, RTL, MSW & Playwright
A modern frontend testing strategy follows the Testing Trophy (static analysis, unit tests, integration tests via RTL + MSW, and E2E smoke tests via Playwright) to maximize confidence while minimizing maintenance overhead.