React
262 bites tagged React — interview questions with model answers, and 60-second explainers.
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.
Dynamic Rendering: On-Demand Pages in Next.js
Dynamic Rendering in Next.js generates a page's HTML on the server for each user request, ensuring fresh content. It's ideal for personalized dashboards or pages with rapidly changing data.
Next.js Metadata API: Control Your Site's Preview
The Next.js Metadata API is a structured way to control your page's `<head>` for SEO and social sharing. It lets you define titles, descriptions, and Open Graph images for crawlers and link previews.
error.js: Graceful Error Boundaries in Next.js
The `error.js` file acts as a UI safety net, catching runtime errors in a Next.js route segment to prevent a full app crash. Use it to display a custom error message and a "try again" button.
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.
Server Components: Fetch Data Directly
Server Components let you fetch data directly using `async/await`, simplifying code by removing client-side `useEffect` hooks. Use this for initial page loads in Next.js to improve SEO and performance. The footgun: don't use client-side hooks or browser APIs.
next.config.js: Your Next.js App's Control Panel
Think of `next.config.js` as your app's control panel, letting you change Next.js's default behavior. Use it for redirects, environment variables, or image optimization. The biggest footgun: you must restart your dev server after making any changes.
next/link: Fast, Client-Side Navigation
next/link is an enhanced `<a>` tag for fast, client-side page transitions, preserving the SPA feel. It automatically prefetches linked pages for instant loading.
Next.js: Pages Router vs. App Router
The App Router treats UI as a tree of components, while the older Pages Router treats it as a collection of separate pages. Use App Router for new projects to leverage layouts and Server Components.
Snapshot Testing: Lock In Your UI's Rendered Output
Snapshot testing catches unintended UI changes by comparing a component's rendered output to a saved 'golden' version. Use it to ensure UIs don't break during refactors. The biggest footgun is blindly updating snapshots, which can approve bugs as correct.
Handling Asynchronous UI with Testing Library
Your test shouldn't race your UI. Use async helpers to wait for elements to appear, disappear, or change after an event. This is crucial for testing components that fetch data. The footgun is forgetting `await` on `findBy` or `waitFor` calls.
user-event vs. fireEvent: Testing Real User Interactions
user-event tests how users actually interact with your UI, not just isolated DOM events. It simulates a full action sequence, like a click firing pointerdown, mousedown, and click. Use it to test component behavior from a user's perspective.
React Testing Library Queries: Find Elements Like a User
React Testing Library queries find elements by simulating how users see your UI, not by implementation details. Prioritize user-facing attributes like `getByRole` or `getByLabelText`.
Test Like a User: The React Testing Library Philosophy
React Testing Library's philosophy is to test components the way a user interacts with them, not by their internal implementation. This ensures refactors don't break tests. The footgun is querying by implementation details instead of what a user actually sees.
RTK Query: Your Redux Data Fetching Layer
RTK Query treats server data as a cache, not global state, handling fetching and loading states for you. Use it to replace manual fetch logic and keep data fresh across components. Forgetting to call `setupListeners` disables automatic refetching.
SSR State Hydration: Syncing Server and Client State
SSR hydration syncs server and client state to prevent UI errors. The server renders the page with initial data, then sends that data to the client to "hydrate" its own state store. The footgun is using a global store on the server, which leaks data.
State Normalization: Treat Your Store Like a Database
Treat your Redux state like a database. Instead of nesting related data, flatten it into separate 'tables' keyed by ID. This simplifies updates and prevents unnecessary re-renders. The footgun is storing API data as-is, creating update bugs.
Jotai Derived Atoms: Computed State from Other Atoms
Think of a derived atom like a spreadsheet formula: its value is computed from other atoms. Use it for reactive values like a cart total from item prices. The footgun: the `get` in your read function is reactive, but the `get` in your write function.
Redux Toolkit: `createSlice` Bundles Your Redux Logic
`createSlice` bundles a piece of state, its reducers, and action creators into one unit, killing Redux boilerplate. Use it to organize your store by feature. The footgun: its "mutating" syntax only works here due to Immer, not in plain Redux.
Redux: Actions are Events, Reducers are Event Handlers
Redux Actions are events describing *what* happened (e.g., 'task added'), while Reducers are functions that specify *how* state changes in response. This pattern is central to managing global state. The biggest footgun is mutating state directly in a reducer.
Single Source of Truth: Centralized App State
A Single Source of Truth consolidates all application state into one central object, or 'store.' This makes state predictable and easier to debug, especially in libraries like Redux, by creating one place to look for data.
ISR: Static Speed with Dynamic Freshness
ISR offers the speed of a static site with the freshness of a server-rendered one. It serves a cached page, then regenerates it in the background after a set time, making it ideal for blogs or e-commerce sites.
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.
Next.js SSG: Pre-render Pages for Maximum Speed
Next.js's Static Site Generation (SSG) pre-renders pages into static HTML at build time, serving them instantly from a CDN. It's ideal for content that rarely changes, like blog posts, ensuring top performance. The main pitfall is serving stale data.
Get React bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.