Maya Patel

Portals render components outside their parent DOM hierarchy while maintaining React's component tree for context and events. I use portals for modals, tooltips, and dropdowns that need to escape overflow: hidden containers or z-index stacking context

Migrations evolve database schema safely across environments. I follow strict conventions: one logical change per migration, descriptive names, reversible operations. Using change instead of up/down enables automatic rollback for most operations. For

React Suspense handles async operations declaratively, showing fallback UI while data loads. With frameworks like Relay or React Query's experimental Suspense mode, components throw promises when data isn't ready, triggering the nearest Suspense bound

Kredis provides typed Redis structures as Active Model attributes, simplifying common patterns like counters, flags, and lists. Instead of raw Redis commands, I define kredis accessors on models that handle serialization automatically. Counters track

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

Concerns extract shared logic from controllers into reusable modules, keeping controllers DRY. I create concerns for cross-cutting features like authentication, pagination, or error handling. The extend ActiveSupport::Concern pattern provides included

React favors composition over inheritance for code reuse. Instead of extending component classes, I compose smaller components into larger ones. Higher-order components (HOCs) wrap components to add behavior, while render props pass rendering logic as

Strong parameters prevent mass assignment vulnerabilities by explicitly permitting allowed attributes. For nested associations like a post with embedded images or comments, I use nested permit calls. Arrays of primitives use [] syntax, while hashes of

Breadcrumbs help users understand their location in deep hierarchies and provide quick navigation to parent pages. I build breadcrumbs from React Router's location state and route configuration. For nested routes, I define metadata like breadcrumb lab

Prefetching data when users hover over links makes navigation feel instant. React Query's prefetchQuery loads data into cache before users click. When they navigate, the data is already available and renders immediately. I use the onMouseEnter event o

Search inputs that fire API requests on every keystroke create poor UX and waste server resources. Debouncing delays the search until typing pauses, reducing requests dramatically. I combine a controlled input component with a custom useDebounce hook

Drag and drop UIs feel natural for reordering lists or organizing content. The dnd-kit library provides accessible, performant drag and drop with full keyboard support. I use DndContext to wrap draggable areas, useSortable for sortable list items, and