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 React from 'react'

interface SkeletonProps {
  width?: string | number
  height?: string | number
  className?: string

Skeleton screens for better perceived performance

react ux performance
by Maya Patel 3 tabs
typescript
import { createConsumer, Cable } from '@rails/actioncable'

let cable: Cable | null = null

export function getCable(): Cable {
  if (!cable) {

WebSocket integration with Action Cable

react actioncable websockets
by Maya Patel 3 tabs
typescript
import { useInfiniteQuery } from '@tanstack/react-query'
import api from '@/services/api'
import { Post, PaginatedResponse } from '@/types'

export function useInfinitePosts() {
  return useInfiniteQuery({

Infinite scroll with Intersection Observer

react infinite-scroll react-query
by Maya Patel 2 tabs
typescript
import React, { Component, ReactNode } from 'react'

interface Props {
  children: ReactNode
  fallback?: ReactNode
  onError?: (error: Error, errorInfo: React.ErrorInfo) => void

Error boundaries for graceful error handling

react error-handling typescript
by Maya Patel 2 tabs
typescript
import { useState, useEffect } from 'react'

export function useDebounce<T>(value: T, delay: number = 500): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

  useEffect(() => {

Custom hooks for reusable logic

react hooks typescript
by Maya Patel 3 tabs
typescript
import { useMutation, useQueryClient } from '@tanstack/react-query'
import api from '@/services/api'
import { Post, PostId } from '@/types'

export function useLikePost() {
  const queryClient = useQueryClient()

Optimistic updates with React Query mutations

react react-query optimistic-updates
by Maya Patel 2 tabs
typescript
import { useForm } from 'react-hook-form'
import { PostFormData } from '@/types'

interface PostFormProps {
  initialData?: Partial<PostFormData>
  onSubmit: (data: PostFormData) => Promise<void>

Form handling with React Hook Form

react forms react-hook-form
by Maya Patel 1 tab
typescript
import { Navigate, useLocation } from 'react-router-dom'
import { useAuth } from '@/contexts/AuthContext'

interface ProtectedRouteProps {
  children: React.ReactNode
}

React Router with protected routes

react react-router routing
by Maya Patel 2 tabs
typescript
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
import { User } from '@/types'
import api from '@/services/api'

interface AuthContextType {
  user: User | null

Context API for global UI state

react context hooks
by Maya Patel 1 tab
typescript
export type PostId = string & { readonly brand: unique symbol }
export type UserId = string & { readonly brand: unique symbol }

export interface User {
  id: UserId
  name: string

TypeScript types from Rails serializers

typescript types rails
by Maya Patel 1 tab
typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import App from './App'
import './index.css'

React Query for server state management

react react-query state-management
by Maya Patel 2 tabs
typescript
import axios, { AxiosError } from 'axios'
import { v4 as uuidv4 } from 'uuid'

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000/api/v1',
  timeout: 15000,

Axios API client with interceptors

react axios api
by Maya Patel 1 tab