React
262 bites tagged React — interview questions with model answers, and 60-second explainers.
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's Two-Step Update: Render and Commit
React updates the screen in two phases. The "render" phase is React calling your components to calculate the UI. The "commit" phase is when it actually updates the DOM. The footgun is thinking rendering always changes the screen; it's just the prep work.
React Fiber: Making UI Rendering Interruptible
React Fiber treats rendering like a cooperative scheduler. It breaks UI updates into small, pausable chunks, preventing long, blocking tasks. This lets high-priority work like user input interrupt heavy rendering, keeping animations and gestures smooth.
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.
React Error Boundaries: Containing UI Crashes
An Error Boundary is like a try...catch block for React components, preventing a single UI crash from breaking your whole app. Use it to wrap components that might fail, showing a fallback UI instead of a white screen.
React's SyntheticEvent: One Wrapper for All Browsers
React's SyntheticEvent is a browser-agnostic wrapper around native events, ensuring your `onClick` handlers behave identically everywhere. The main footgun: event objects are pooled for performance, so you can't access their properties in an async callback.
React Hydration: Bringing Server HTML to Life
Hydration turns static, server-rendered HTML into a fully interactive React app. It's the core of Server-Side Rendering (SSR), where the client "wakes up" the initial HTML by attaching event listeners.
Next.js Instrumentation: Code That Runs on Server Startup
Next.js's `instrumentation.ts` file runs code once when your server process starts, before any requests. It's ideal for setting up global logging, monitoring like OpenTelemetry, or database connections.
MDX in Next.js: Markdown with Superpowers
MDX lets you write in Markdown and embed interactive React components directly inside your content. Use it for blogs or docs that need more than static text, like interactive charts or code demos.
Next.js Router Cache: Instant Client-Side Navigation
The Next.js Router Cache is a client-side, in-memory cache that makes navigation feel instant by storing the rendered UI of visited routes. It's why navigating with `<Link>` is fast. The footgun: it caches UI, not data, so stale content can appear.
Next.js i18n Routing: URLs for a Global Audience
Next.js i18n routing maps locales to URLs, like `/en/about` or `/es/acerca-de`. It's not just text translation; it's building a site structure for each language. This improves SEO and user experience.
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.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.
Next.js Draft Mode: Previewing Static Content
Next.js Draft Mode bypasses static pages to preview unpublished content from a headless CMS. It's for content editors who need to see changes live before publishing. The footgun is security: a leaked secret token exposes all draft content.
Next.js: Dynamic API Segments for Flexible Endpoints
Think of dynamic API segments as URL templates. A single file like `app/api/users/[id]/route.ts` can handle requests for any user ID, from `/api/users/1` to `/api/users/99`. The footgun is forgetting to parse the ID, which is always a string.
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.
Dynamic Functions in Next.js
Using functions like `cookies()` or `headers()` forces a Next.js page to be rendered dynamically for each request. This is key for personalized content or pages depending on search params.
generateStaticParams: Pre-building Dynamic Pages in Next.js
Think of `generateStaticParams` as a build-time guest list for your dynamic routes. It tells Next.js all possible parameters (like post slugs) upfront to pre-render static pages. The footgun: it only provides params, not the page data itself.
Next.js Extends `fetch` for Server-Side Caching
Next.js extends the standard `fetch` API to control server-side caching and revalidation. In Server Components, pass options like `next: { revalidate: 3600 }` or `tags` to manage how data is cached. This extension is server-only and ignored in browsers.
'use client': The Boundary Between Server and Client
'use client' marks where server-only rendering ends and browser interactivity begins. Use it for components with state (`useState`), effects (`useEffect`), or event listeners (`onClick`), enabling them to run in the browser.
Next.js Intercepting Routes: Modals on Rails
Intercepting routes let you show one route's content inside another's layout, like a photo modal over a gallery feed. It's ideal for shareable modal URLs. The footgun: a page refresh or direct navigation bypasses the interception, rendering the full page.
Next.js Parallel Routes: Multiple Pages in One View
Parallel Routes render multiple independent pages within a single layout, like a split-screen dashboard. This is ideal for complex UIs where different sections need to load and be managed separately.
Get React bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.