Rendering thousands of list items kills performance. Virtual scrolling renders only visible items plus a buffer, dramatically reducing DOM nodes. The react-window library provides FixedSizeList and VariableSizeList components that handle viewport calc

Rich text content from Rails often comes as Markdown. The react-markdown library renders Markdown to React components with customizable styling and sanitization. I configure it to use syntax highlighting via react-syntax-highlighter for code blocks, c

Testing Library encourages testing components from the user's perspective rather than implementation details. I query elements by accessible labels, text content, or roles—not by CSS classes or test IDs. User interactions use userEvent to simulate rea

Zustand provides a minimalist alternative to Redux with less boilerplate and better TypeScript support. I create stores with create that hold state and actions. Unlike Context, Zustand doesn't cause unnecessary re-renders—components only update when t

Code splitting routes reduces initial bundle size and improves load times. React's lazy function dynamically imports components when routes are accessed. Wrapped in Suspense, lazy components show fallback UI while loading. I group related routes into

Compound components create flexible, composable APIs by sharing state between parent and child components via context. Instead of passing dozens of props, child components access shared state through context. A Select component might have Select.Trigg

Direct uploads to cloud storage bypass the Rails server, improving performance and reducing server load. I use ActiveStorage's Direct Upload feature to get presigned URLs from Rails, then upload files directly to S3 from the browser. The React compone

Toast notifications provide non-intrusive feedback for user actions. I create a toast context that manages a queue of notifications, auto-dismisses them after a timeout, and supports different types (success, error, info). The context exposes methods

Accessible modals require focus management, keyboard navigation, and ARIA attributes. I build a reusable Modal component that traps focus inside when open, moves focus to the first interactive element, and returns it to the trigger on close. The Escap

Skeleton screens show content placeholders while data loads, making apps feel faster than spinners. I create skeleton components that match the layout of actual content with subtle pulsing animations. React Query's isLoading flag determines whether to

Real-time features like live notifications or collaborative editing require WebSockets. Rails Action Cable provides a WebSocket server, and the @rails/actioncable client connects from React. I create a singleton cable instance and export subscription

Infinite scroll loads more content as users reach the bottom of a list, improving perceived performance over pagination. I use the Intersection Observer API to detect when a sentinel element becomes visible, then trigger the next page fetch. React Que