All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4247 bites
Page 17
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.
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.
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.
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.
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.
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.