react

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

Scroll listeners are easy to get wrong and they can cause performance issues on long lists. IntersectionObserver lets the browser do the hard work: I put a sentinel div at the bottom of the list and trigger fetchNextPage when it becomes visible. I als

Brittle test suites often come from mocking fetch at every call site. MSW lets me mock at the network layer: components make real HTTP calls, but the test environment intercepts them and returns deterministic responses. That keeps tests closer to real

While React Query handles server state, I use Context API for client-side UI state like theme, sidebar visibility, or current user. Each context lives in its own file with a custom hook for consuming it. The context provider wraps the app at a high le

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

Combining React Hook Form with Zod provides type-safe form validation with a schema-first approach. Zod schemas define the shape and rules for form data, and the zodResolver bridges them to React Hook Form. TypeScript infers form types from schemas au

Optimistic updates make UIs feel instant by immediately showing the expected result before the server confirms. When a user likes a post, I update the local cache immediately, submit the request in background, and rollback if it fails. React Query's m

Modals are accessibility traps—literally. Without focus management, keyboard users can tab into the page behind the modal and get lost. I trap focus within the dialog while it’s open, restore focus to the trigger on close, and support Escape to dismis

Custom hooks extract component logic into reusable functions that can share stateful behavior across components. I prefix hook names with use and compose them from built-in hooks like useState, useEffect, and useCallback. Hooks encapsulate concerns li

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

Unnecessary re-renders hurt performance, especially with expensive computations or callbacks passed to child components. useMemo memoizes computed values, recalculating only when dependencies change. useCallback memoizes function instances, preventing

The Intersection Observer API efficiently detects when elements enter/exit the viewport, enabling lazy loading, infinite scroll, and analytics without expensive scroll listeners. I create observers with thresholds defining when callbacks trigger—0.0 m