React &amp; Next.js

Zod: Validate Data, Infer Types

Zod acts as a bouncer for your data, validating it against a schema you define and inferring TypeScript types automatically. It's essential for validating API inputs or form submissions. The main footgun is forgetting to enable "strict": true in your tsconfig.

Handling File Uploads in React

Treat a file input like a remote control for the browser's file picker. React can't hold the file data directly in state, but it can grab a reference to the selected file and send it to a server using a FormData object.

Debouncing vs. Throttling in React

Debouncing waits for a pause in events before acting; throttling fires at a steady rate. Use debounce for search bars to avoid API calls on every keystroke, and throttle for scroll handlers to prevent lag.

useFormState (now useActionState): State for Actions

useActionState (formerly useFormState) lets you update state from an async Action. It returns the action's result, a dispatch function, and a pending status. Use it to manage form UI for loading states and validation messages from Server Actions.

React's useFormStatus: Read Form State from a Child Component

The useFormStatus hook lets a child component read its parent form's submission status without prop drilling. Use it to disable a submit button or show a loading spinner from within a reusable component.

React Refs: An Escape Hatch for DOM Manipulation

A ref is an escape hatch to directly access a DOM node, bypassing React's declarative state flow. Use it for imperative actions like focusing an input or scrolling to an element. The footgun: overusing refs can conflict with React's rendering.

React.memo: Skip Unnecessary Component Renders

React.memo tells a component to skip re-rendering if its props are the same as last time. Use it to prevent costly renders when a parent updates. The footgun is passing new objects or functions as props, which breaks the default shallow comparison.

React.lazy: Load Components On Demand

React.lazy tells your app: "Don't download this component's code until it's needed." It's a core tool for code splitting. Use it for below-the-fold content or modals to speed up initial load. The footgun: forgetting <Suspense> will crash your app.

React Suspense: Manage Loading States Declaratively

React Suspense lets you declare a loading UI instead of manually toggling isLoading state. You wrap a component that fetches data and provide a fallback, letting React handle the switch. The footgun is that re-fetching can jarringly show the fallback again.

React DevTools Profiler: Find Performance Bottlenecks

The React Profiler records how long components take to render, helping you find performance bottlenecks. Use it to diagnose slow interactions and see which components re-render too often.

List Virtualization: Render the Window, Not the World

Virtualization renders only the visible "window" of a long list, not the entire dataset. It's essential for performance in feeds or tables with thousands of rows.

Bundle Analysis: An X-Ray for Your App's Weight

Bundle analysis is an X-ray for your compiled JavaScript, showing which libraries contribute to your app's final size. Use it to diagnose slow loads by finding large or duplicated dependencies. The footgun: focus on gzipped size, not raw size.

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.

Tree Shaking: Shipping Only the Code You Use

Tree shaking is a build step that eliminates unused code from your final bundle. Bundlers like webpack use it to shrink JavaScript files by removing functions you import but never call.

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.

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.

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.

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.

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.