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 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.
cy.intercept: Control Network Traffic in Cypress Tests
cy.intercept acts like a programmable proxy in your Cypress tests, letting you watch, modify, or fake network requests. Use it to test loading states or error handling without a live backend. Footgun: intercepts are cleared before each test, not just once.
MSW: Mock APIs at the Network Layer
Mock Service Worker intercepts API calls at the network level using a Service Worker, so your app makes real requests. Use it for consistent mocking in development, testing, and Storybook.
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.
Jest Mocks: Spies for Your Functions
A Jest mock is a spy that watches a function, recording calls without running the original logic. This lets you isolate code under test, verify interactions like callbacks, and control return values. The footgun is assuming mocks run real logic—they don't.
Jest Matchers: Asserting Values in Your Tests
Jest matchers are assertion functions that check if a value meets a condition. You use them with `expect()` to verify function outputs, object properties, or promise states.
Jest: The 'Batteries-Included' JavaScript Test Runner
Jest is a "batteries-included" JavaScript testing framework, bundling a runner, assertions, and mocking tools. It's a default for React apps but works for any JS project. The footgun is thinking it's only for React; it's a general-purpose tool.
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.
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.
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.
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.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.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 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'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.
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.
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.
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.