Modern frontend patterns for React, Next.js, and performant user interfaces.

When to Activate

• Building React components (composition, props, rendering)
• Managing state (useState, useReducer, Zustand, Context)
• Implementing data fetching (SWR, React Query, server components)
• Optimizing performance (memoization, virtualization, code splitting)
• Working with forms (validation, controlled inputs, Zod schemas)
• Handling client-side routing and navigation
• Building accessible, responsive UI patterns

Component Patterns

Composition Over Inheritance

// ✅ GOOD: Component composition
interface CardProps {
  children: React.ReactNode
  variant?: 'default' | 'outlined'
}
export function Card({ children, variant = 'default' }: CardProps) {
  return 
card card-${variant}}>{children}
}
export function CardHeader({ children }: { children: React.ReactNode }) {
  return 
{children}
}
export function CardBody({ children }: { children: React.ReactNode }) {
  return 
{children}
}
// Usage

  Title
  Content

Compound Components

interface TabsContextValue {
  activeTab: string
  setActiveTab: (tab: string) => void
}
const TabsContext = createContext(undefined)
export function Tabs({ children, defaultTab }: {
  children: React.ReactNode
  defaultTab: string
}) {
  const [activeTab, setActiveTab] = useState(defaultTab)
  return (
    
      {children}
    
  )
}
export function TabList({ children }: { children: React.ReactNode }) {
  return 
{children}
}
export function Tab({ id, children }: { id: string, children: React.ReactNode }) {
  const context = useContext(TabsContext)
  if (!context) throw new Error('Tab must be used within Tabs')
  return (
     context.setActiveTab(id)}
    >
      {children}
    
  )
}
// Usage

  
    Overview
    Details
  

Render Props Pattern

interface DataLoaderProps {
  url: string
  children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode
}
export function DataLoader({ url, children }: DataLoaderProps) {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false))
  }, [url])
  return <>{children(data, loading, error)}
}
// Usage
 url="/api/markets">
  {(markets, loading, error) => {
    if (loading) return 
    if (error) return 
    return 
  }}

Custom Hooks Patterns

State Management Hook

export function useToggle(initialValue = false): [boolean, () => void] {
  const [value, setValue] = useState(initialValue)
  const toggle = useCallback(() => {
    setValue(v => !v)
  }, [])
  return [value, toggle]
}
// Usage
const [isOpen, toggleOpen] = useToggle()

Async Data Fetching Hook

interface UseQueryOptions {
  onSuccess?: (data: T) => void
  onError?: (error: Error) => void
  enabled?: boolean
}
export function useQuery(
  key: string,
  fetcher: () => Promise,
  options?: UseQueryOptions
) {
  const [data, setData] = useState(null)
  const [error, setError] = useState(null)
  const [loading, setLoading] = useState(false)
  const refetch = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const result = await fetcher()
      setData(result)
      options?.onSuccess?.(result)
    } catch (err) {
      const error = err as Error
      setError(error)
      options?.onError?.(error)
    } finally {
      setLoading(false)
    }
  }, [fetcher, options])
  useEffect(() => {
    if (options?.enabled !== false) {
      refetch()
    }
  }, [key, refetch, options?.enabled])
  return { data, error, loading, refetch }
}
// Usage
const { data: markets, loading, error, refetch } = useQuery(
  'markets',
  () => fetch('/api/markets').then(r => r.json()),
  {
    onSuccess: data => console.log('Fetched', data.length, 'markets'),
    onError: err => console.error('Failed:', err)
  }
)

Debounce Hook

export function useDebounce(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value)
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)
    return () => clearTimeout(handler)
  }, [value, delay])
  return debouncedValue
}
// Usage
const [searchQuery, setSearchQuery] = useState('')
const debouncedQuery = useDebounce(searchQuery, 500)
useEffect(() => {
  if (debouncedQuery) {
    performSearch(debouncedQuery)
  }
}, [debouncedQuery])

State Management Patterns

Context + Reducer Pattern

interface State {
  markets: Market[]
  selectedMarket: Market | null
  loading: boolean
}
type Action =
  | { type: 'SET_MARKETS'; payload: Market[] }
  | { type: 'SELECT_MARKET'; payload: Market }
  | { type: 'SET_LOADING'; payload: boolean }
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'SET_MARKETS':
      return { ...state, markets: action.payload }
    case 'SELECT_MARKET':
      return { ...state, selectedMarket: action.payload }
    case 'SET_LOADING':
      return { ...state, loading: action.payload }
    default:
      return state
  }
}
const MarketContext = createContext<{
  state: State
  dispatch: Dispatch
} | undefined>(undefined)
export function MarketProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(reducer, {
    markets: [],
    selectedMarket: null,
    loading: false
  })
  return (
    
      {children}
    
  )
}
export function useMarkets() {
  const context = useContext(MarketContext)
  if (!context) throw new Error('useMarkets must be used within MarketProvider')
  return context
}

Performance Optimization

Memoization

// ✅ useMemo for expensive computations
const sortedMarkets = useMemo(() => {
  return markets.sort((a, b) => b.volume - a.volume)
}, [markets])
// ✅ useCallback for functions passed to children
const handleSearch = useCallback((query: string) => {
  setSearchQuery(query)
}, [])
// ✅ React.memo for pure components
export const MarketCard = React.memo(({ market }) => {
  return (
    

      
{market.name}
      
{market.description}
    
  )
})

Code Splitting & Lazy Loading

import { lazy, Suspense } from 'react'
// ✅ Lazy load heavy components
const HeavyChart = lazy(() => import('./HeavyChart'))
const ThreeJsBackground = lazy(() => import('./ThreeJsBackground'))
export function Dashboard() {
  return (
    

      }>
        
      
      
        
      
    
  )
}

Virtualization for Long Lists

import { useVirtualizer } from '@tanstack/react-virtual'
export function VirtualMarketList({ markets }: { markets: Market[] }) {
  const parentRef = useRef(null)
  const virtualizer = useVirtualizer({
    count: markets.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 100,  // Estimated row height
    overscan: 5  // Extra items to render
  })
  return (
    

      
${virtualizer.getTotalSize()}px,
          position: 'relative'
        }}
      >
        {virtualizer.getVirtualItems().map(virtualRow => (
          
${virtualRow.size}px,
              transform: translateY(${virtualRow.start}px)
            }}
          >
            
          
        ))}
      
    
  )
}

Form Handling Patterns

Controlled Form with Validation

interface FormData {
  name: string
  description: string
  endDate: string
}
interface FormErrors {
  name?: string
  description?: string
  endDate?: string
}
export function CreateMarketForm() {
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    endDate: ''
  })
  const [errors, setErrors] = useState({})
  const validate = (): boolean => {
    const newErrors: FormErrors = {}
    if (!formData.name.trim()) {
      newErrors.name = 'Name is required'
    } else if (formData.name.length > 200) {
      newErrors.name = 'Name must be under 200 characters'
    }
    if (!formData.description.trim()) {
      newErrors.description = 'Description is required'
    }
    if (!formData.endDate) {
      newErrors.endDate = 'End date is required'
    }
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!validate()) return
    try {
      await createMarket(formData)
      // Success handling
    } catch (error) {
      // Error handling
    }
  }
  return (
    

       setFormData(prev => ({ ...prev, name: e.target.value }))}
        placeholder="Market name"
      />
      {errors.name && {errors.name}}
      {/ Other fields /}
      Create Market
    
  )
}

Error Boundary Pattern

interface ErrorBoundaryState {
  hasError: boolean
  error: Error | null
}
export class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  ErrorBoundaryState
{
  state: ErrorBoundaryState = {
    hasError: false,
    error: null
  }
  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { hasError: true, error }
  }
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('Error boundary caught:', error, errorInfo)
  }
  render() {
    if (this.state.hasError) {
      return (
        

          
Something went wrong
          
{this.state.error?.message}
           this.setState({ hasError: false })}>
            Try again
          
        
      )
    }
    return this.props.children
  }
}
// Usage

  

Animation Patterns

Framer Motion Animations

import { motion, AnimatePresence } from 'framer-motion'
// ✅ List animations
export function AnimatedMarketList({ markets }: { markets: Market[] }) {
  return (
    
      {markets.map(market => (
        
          
        
      ))}
    
  )
}
// ✅ Modal animations
export function Modal({ isOpen, onClose, children }: ModalProps) {
  return (
    
      {isOpen && (
        <>
          
          
            {children}
          
        
      )}
    
  )
}

Accessibility Patterns

Keyboard Navigation

export function Dropdown({ options, onSelect }: DropdownProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [activeIndex, setActiveIndex] = useState(0)
  const handleKeyDown = (e: React.KeyboardEvent) => {
    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault()
        setActiveIndex(i => Math.min(i + 1, options.length - 1))
        break
      case 'ArrowUp':
        e.preventDefault()
        setActiveIndex(i => Math.max(i - 1, 0))
        break
      case 'Enter':
        e.preventDefault()
        onSelect(options[activeIndex])
        setIsOpen(false)
        break
      case 'Escape':
        setIsOpen(false)
        break
    }
  }
  return (
    

      {/ Dropdown implementation /}
    
  )
}

Focus Management

export function Modal({ isOpen, onClose, children }: ModalProps) {
  const modalRef = useRef(null)
  const previousFocusRef = useRef(null)
  useEffect(() => {
    if (isOpen) {
      // Save currently focused element
      previousFocusRef.current = document.activeElement as HTMLElement
      // Focus modal
      modalRef.current?.focus()
    } else {
      // Restore focus when closing
      previousFocusRef.current?.focus()
    }
  }, [isOpen])
  return isOpen ? (
    
 e.key === 'Escape' && onClose()}
    >
      {children}
    
  ) : null
}

Remember: Modern frontend patterns enable maintainable, performant user interfaces. Choose patterns that fit your project complexity.