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 16
useDeferredValue: Keep UI Responsive During Renders
useDeferredValue keeps your UI responsive by showing a stale value while a new, expensive-to-render value is prepared in the background. Use it for search inputs filtering large lists.
useSyncExternalStore: Safely Read from External State
useSyncExternalStore lets your React components safely subscribe to data outside of React's state. Use it to connect to state libraries like Zustand or browser APIs. The main footgun: your getSnapshot function must return an immutable, cached value.
useDebugValue: Label Your Custom Hooks in DevTools
useDebugValue attaches a readable label to your custom hooks in React DevTools. Instead of just seeing raw state, you can display a meaningful string like "Online". The footgun is overusing it; reserve it for complex, shared library hooks.
Typing React Component Props with TypeScript
Use TypeScript to define a 'contract' for your component's props with an interface or type. This catches bugs by ensuring data passed to a component has the correct shape. The footgun: files with JSX must use the .tsx extension.
Global vs. Component CSS in React/Next.js
Treat CSS like any other module. Import global styles (like resets or Tailwind) once in your app's entry point. For component-specific styles, import a CSS Module file directly into your component to keep styles scoped and prevent conflicts.
Integrating Sass/SCSS in Next.js
Next.js has built-in Sass support, letting you use variables, mixins, and nesting. Import .scss files for component-scoped styles or global stylesheets. The main footgun: you must install the sass package yourself; it's not included by default.
Emotion: Component-Scoped Styles in JavaScript
Emotion lets you write CSS directly in your JavaScript, keeping styles and logic colocated. It's ideal for dynamic, component-scoped styles in React that avoid global conflicts.
React Theming: Context API and CSS-in-JS
Use React's Context API to inject a theme object (colors, spacing) into your component tree for your CSS-in-JS styles. It's ideal for light/dark modes or brand skins. The footgun: this pattern fails in React Server Components, which lack context.
SSR for Styles: Avoiding the 'Flash'
Server-side rendering for styles sends a fully styled page on the first load, preventing the dreaded "flash of unstyled content" (FOUC). This is crucial for CSS-in-JS libraries. The footgun is assuming it works automatically without proper setup.
Nested Routes: Composing UI with <Outlet>
Nested routes build layouts with shared UI, like a sidebar. The <Outlet> component is a placeholder for changing content, perfect for dashboards. The footgun is forgetting the <Outlet> in the parent route; child routes will match the URL but won't render.
Next.js Dynamic Routes: Pages on Demand
Think of dynamic routes as a page template. You create one file like [slug].js to generate unlimited unique pages for things like blog posts or products. The footgun is forgetting to handle non-existent slugs, which can crash your app.
useRouter: Programmatic Navigation in Next.js
The useRouter hook gives you a router object to programmatically control navigation. Use it for event-driven redirects, like sending a user to their dashboard after a successful login.
Protected Routes: Server Gates, Not Hidden Links
A protected route is a server-enforced gate, not a hidden link. In Next.js, middleware or server components validate sessions before HTML ships, which matters for dashboards and billing.
FormData: Package Form Data for HTTP Requests
The FormData API is a digital shipping container for your form's data, packaging input into a format HTTP requests understand. Use it to send forms, including files, with fetch() without manually setting headers.
React Hook Form: Faster Forms with Less Code
React Hook Form builds performant forms by using uncontrolled inputs, avoiding re-renders on every keystroke. It's ideal for complex forms where managing state with useState becomes slow. The main footgun: overuse of watch() can negate performance gains.
Formik: Taming React Form State
Formik is a state machine for your React forms, managing values, errors, and visited fields without providing UI. Use it to avoid boilerplate for validation and submission. The footgun is fighting its design by trying to integrate it with global state stores.
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.