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 21
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 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'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'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 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 Internal Scheduler Package
React's scheduler is an internal traffic cop that breaks up rendering work to keep the UI from freezing. It's used to prioritize updates and yield to the browser, but its public API is unstable and not for direct use in your app.
The <Route> Component: Mapping URLs to UI
The <Route> component is like a switch statement for your UI, telling your app 'when the URL is X, render component Y'. It's used to define pages like /dashboard or /users/:id. The footgun is forgetting it must live inside a <Routes> component.
useParams: Accessing Dynamic URL Segments
The useParams hook lets client components read dynamic URL segments. On a route like /posts/[slug], it returns an object like { slug: 'my-post' }. Remember, it's for client components only and won't see query strings.
useNavigate: Programmatic Navigation in React
The useNavigate hook gives you a function to change routes from your component's logic, like after a form submission. Use it for event-driven navigation, such as sending a user to their dashboard after login.
The useSearchParams Hook for URL Queries
The useSearchParams hook gives your client component read-only access to the URL's query string. Use it to build UIs that react to URL changes, like filtering a list or displaying search results.
React Router Data Loaders: Fetch Before You Render
React Router loaders fetch data *before* a component renders, eliminating loading spinners inside your UI. Use them to load data for a new route in parallel with its code. The footgun: forgetting that loaders must run in both server and browser environments.
Yup: Schema Builder for Runtime Validation
Yup is a validation pipeline: schemas parse, coerce, and assert untrusted data in one pass. Use it for API payloads or forms while TypeScript infers types automatically.
Memoizing Selectors: Avoid Needless Re-renders
Memoized selectors prevent needless re-renders by caching derived data. A selector for a filtered list will only re-run its logic if the original list or filter criteria change, not on every state update.
Zustand's `create`: A Factory for Global State Hooks
Zustand's create function is a factory for your global state. You define your state and actions, and it returns a custom hook to access them anywhere in your app, avoiding prop drilling. The footgun: set shallow-merges state by default.
React Reconciliation: The Virtual DOM Diff
React diffs a lightweight in-memory tree against the next render to apply only surgical changes to the real DOM. It fires on every state or prop change. Missing keys in lists force React to rebuild more nodes than needed, destroying performance.
Rules of Hooks: Call Order Is Sacred
Hook calls must keep the same order every render because React maps them to state by array index. Only call hooks at the top level of React functions. Break the order and React desyncs, producing stale state or crashes.
Server vs. Client Components in Next.js
Next.js forces a render boundary. Server Components generate HTML without sending JavaScript, while Client Components ship JS for interactivity. The footgun is importing a heavy library into a Server Component via a child, bloating the client bundle.
BEM: Self-Documenting CSS Class Names
BEM turns classes into a mini filesystem: Block__Element--Modifier. It prevents CSS collisions in large React codebases where many teams share a global stylesheet. The footgun is turning every nested tag into an element and creating comically long names.
BrowserRouter: Real URLs in React SPAs
BrowserRouter turns the address bar into a client-side navigation system, using real URLs without reloads. It is the default choice for SPAs that need shareable links.
HashRouter: routing without server configuration
HashRouter traps routes after a # the server never sees, letting SPAs run on static hosts like GitHub Pages without rewrite rules. The tradeoff is ugly URLs and SEO blind spots since search engines may ignore whatever follows the hash.