Performance
508 bites tagged Performance — interview questions with model answers, and 60-second explainers.
Vite's Dependency Pre-Bundling
Vite's dev server pre-bundles dependencies to accelerate local development. It converts CommonJS modules to browser-native ESM and merges packages with many files into one, preventing massive HTTP request chains.
Speed Up Builds with TypeScript Project References
Treat your codebase like a set of independent packages. Project References let you split a large project into smaller, interconnected pieces, dramatically speeding up builds by only recompiling what's changed.
Transferable Objects: Zero-Copy Data for Web Workers
Transferable Objects move resource ownership between contexts, like threads, instead of copying data. This enables fast, 'zero-copy' transfers for large memory blocks. Use it with `postMessage()` to send an `ArrayBuffer` to a Web Worker.
Web Workers: Keep Your UI Responsive During Heavy Tasks
A Web Worker is like a background helper, running heavy JavaScript tasks in a separate thread so your UI never freezes. Use it for complex calculations or data fetching. The main footgun: workers cannot directly manipulate the DOM.
IndexedDB Cursors: Iterate Large Datasets Efficiently
An IndexedDB cursor is a pointer for walking through records one by one, avoiding loading a whole dataset into memory. Use it to efficiently process large browser databases.
IndexedDB Indexes: Fast Queries in the Browser
An IndexedDB index is like a book's index, letting you quickly find records by a specific property without scanning the entire dataset. It's essential for fast queries on non-primary keys, like looking up a user by email.
Choosing the Right Client-Side Storage
Client-side storage turns the browser into a mini-database for faster loads and offline access. It's used for remembering user preferences or caching assets.
Stream a Fetch Response Chunk by Chunk
Process a fetch response as it arrives, chunk by chunk, instead of buffering the whole file in memory. This is ideal for large files like videos or giant JSON datasets.
Smooth Animations with requestAnimationFrame
Sync your code to the browser's repaint cycle for smooth, efficient animations with `requestAnimationFrame`. Use it for any visual change over time, like moving an element or running a game loop.
Memoizing Selectors: Avoid Needless Re-renders
Memoized selectors prevent needless re-renders by caching derived data. A selector for a filtered list will only re-run its logic if the original list or filter criteria change, not on every state update.
React Router Data Loaders: Fetch Before You Render
React Router loaders fetch data *before* a component renders, eliminating loading spinners inside your UI. Use them to load data for a new route in parallel with its code. The footgun: forgetting that loaders must run in both server and browser environments.
React's Internal Scheduler Package
React's scheduler is an internal traffic cop that breaks up rendering work to keep the UI from freezing. It's used to prioritize updates and yield to the browser, but its public API is unstable and not for direct use in your app.
React State Updates: The Queue and the Updater Function
React batches state updates from one event, like a waiter taking a full order before heading to the kitchen. This prevents multiple re-renders. The footgun: `setCount(count + 1)` called three times only increments once, as `count` is fixed for that render.
React's Current & Work-in-Progress Trees
React uses a double-buffering technique for non-blocking updates. The `current` tree is what's on screen; the `workInProgress` tree is built in the background on state changes. The footgun is confusing this low-level mechanism with the 'virtual DOM'.
React Render Bailouts: Skipping Unnecessary Work
React's Performance Hooks let you 'bail out' of unnecessary re-renders by caching results. React reuses the cached output unless specific dependencies change, saving computation on expensive components.
React's Concurrent Rendering: Interruptible UI Updates
Concurrent Rendering lets React pause and resume rendering, so a large update won't freeze the UI. It's like a chef pausing a big task to handle a quick order, ensuring the app stays responsive. This is key for features like Suspense.
Optimize Loading with next/script
The `next/script` component prevents third-party scripts from blocking your page's initial render. Use it for analytics, ads, or chat widgets to improve performance. The footgun is not choosing the laziest strategy possible for non-essential scripts.
next/font: Zero Layout Shift Fonts
next/font bundles fonts with your app at build time, serving them from your own domain to eliminate layout shift and extra network requests. It's the standard for any Next.js app. The footgun is using `<link>` tags, which negates all benefits.
Next.js `next/image`: Stop Shipping Giant Images
The `next/image` component is an automated image pipeline, not just an `<img>` tag. It resizes, optimizes, and serves modern formats like WebP, improving load times. The footgun is forgetting to provide `width` and `height`, causing layout shifts.
Partial Prerendering (PPR): Static Speed for Dynamic Pages
Partial Prerendering serves a static page shell instantly, then streams in dynamic parts. It's like getting a pre-built house frame immediately, with custom rooms delivered and slotted in as they're finished.
Next.js Route Segment Config
Think of Next.js Route Segment Config as per-route dials for runtime, caching, and timeouts. Use it to run a specific API route on the Edge for speed or increase the timeout for a data-heavy page. The footgun: settings don't cascade to child routes.
Next.js Caching: When and How to Revalidate Data
Next.js aggressively caches data by default. Revalidation is how you tell it the data is stale, either after a set time or on-demand after a mutation. The footgun is forgetting `fetch` is cached; use `revalidatePath` or `revalidateTag` to bust the cache.
Next.js Loading UI: Instant Shells, Streamed Content
Next.js's `loading.js` shows an instant UI shell while streaming in server-rendered content. Use it for data-heavy pages to improve perceived performance. The footgun: a loading UI only wraps its own route segment and children, not parent layouts.
Measure Component Render Costs with <Profiler>
React's `<Profiler>` is a stopwatch for your components, measuring render times programmatically. Wrap any UI tree to log detailed performance metrics on every update, helping you pinpoint slow renders. The footgun: It's disabled in production by default.
Get Performance bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.