Maya Patel

50 code snips · on codesnips 5 months

Rails + React specialist building modern SPAs with Rails APIs. Expert in React hooks, state management, TypeScript, and seamless Rails integration. 9+ years creating performant,...

typescript
import { ReactNode, useEffect, useState } from 'react'
import { createPortal } from 'react-dom'

interface PortalProps {
  children: ReactNode
  container?: Element

React portals for rendering outside component tree

react portals dom
by Maya Patel 2 tabs
ruby
class AddStatusToPosts < ActiveRecord::Migration[6.1]
  # Use change for automatic rollback
  def change
    # Add column without default to avoid table lock
    add_column :posts, :status, :string

Rails database migrations best practices

rails migrations database
by Maya Patel 3 tabs
typescript
import { Suspense } from 'react'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useParams } from 'react-router-dom'
import api from '@/services/api'
import { Post } from '@/types'
import { ErrorBoundary } from '@/components/ErrorBoundary'

React Suspense for data fetching

react suspense async-loading
by Maya Patel 1 tab
ruby
class Post < ApplicationRecord
  # View counter - increments without hitting the database
  kredis_counter :view_count, expires_in: 1.day

  # Recent viewers list - stores last 10 viewer IDs
  kredis_unique_list :recent_viewers, limit: 10

Rails Kredis for higher-level Redis operations

rails redis kredis
by Maya Patel 2 tabs
typescript
import { useState, useMemo, useCallback } from 'react'
import { Post } from '@/types'
import { PostCard } from './PostCard'

interface FilteredPostsProps {
  posts: Post[]

Memoization in React with useMemo and useCallback

react performance memoization
by Maya Patel 1 tab
ruby
module Paginatable
  extend ActiveSupport::Concern

  included do
    before_action :set_pagination_params, only: [:index]
  end

Rails concerns for shared controller behavior

rails concerns controllers
by Maya Patel 2 tabs
typescript
import { ReactNode } from 'react'

interface CardProps {
  children: ReactNode
  className?: string
}

React component composition over inheritance

react patterns composition
by Maya Patel 2 tabs
ruby
module Api
  module V1
    class PostsController < ApplicationController
      def create
        post = current_user.posts.build(post_params)

Rails strong parameters for nested attributes

rails security strong-parameters
by Maya Patel 1 tab
typescript
import { Link, useLocation, useMatches } from 'react-router-dom'

interface BreadcrumbMatch {
  pathname: string
  handle?: {
    crumb?: (data?: any) => string

Breadcrumb navigation from React Router

react react-router navigation
by Maya Patel 2 tabs
typescript
import { Link } from 'react-router-dom'
import { useQueryClient } from '@tanstack/react-query'
import api from '@/services/api'
import { PostId } from '@/types'

interface PostLinkProps {

Prefetching data on hover for instant navigation

react performance prefetching
by Maya Patel 1 tab
typescript
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { useDebounce } from '@/hooks/useDebounce'
import api from '@/services/api'

export function SearchInput() {

Debounced search with controlled inputs

react search debounce
by Maya Patel 1 tab
typescript
import { useState } from 'react'
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,

Drag and drop with dnd-kit

react drag-drop dnd-kit
by Maya Patel 1 tab