React
262 bites tagged React — interview questions with model answers, and 60-second explainers.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Get React bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.