frontend-patterns

name	frontend-patterns
description	React, Next.js, state yönetimi, performans optimizasyonu ve UI en iyi uygulamaları için frontend geliştirme kalıpları.
origin	ECC

Frontend Geliştirme Kalıpları

React, Next.js ve performanslı kullanıcı arayüzleri için modern frontend kalıpları.

Ne Zaman Aktifleştirmelisiniz

• React bileşenleri oluştururken (composition, props, rendering)
• State yönetirken (useState, useReducer, Zustand, Context)
• Veri çekme implementasyonu (SWR, React Query, server components)
• Performans optimize ederken (memoization, virtualization, code splitting)
• Formlarla çalışırken (validation, controlled inputs, Zod schemas)
• Client-side routing ve navigasyon işlerken
• Erişilebilir, responsive UI kalıpları oluştururken

Bileşen Kalıpları

Kalıtım Yerine Composition

// PASS: İYİ: Bileşen composition
interface CardProps {
  children: React.ReactNode
  variant?: 'default' | 'outlined'
}

export function Card({ children, variant = 'default' }: CardProps) {
  return <div className={`card card-${variant}`}>{children}</div>
}

export function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="card-header">{children}</div>
}

export function CardBody({ children }: { children: React.ReactNode }) {
  return <div className="card-body">{children}</div>
}

// Kullanım
<Card>
  <CardHeader>Başlık</CardHeader>
  <CardBody>İçerik</CardBody>
</Card>

Compound Components

interface TabsContextValue {
  activeTab: string
  setActiveTab: (tab: string) => void
}

const TabsContext = createContext<TabsContextValue | undefined>(undefined)

export function Tabs({ children, defaultTab }: {
  children: React.ReactNode
  defaultTab: string
}) {
  const [activeTab, setActiveTab] = useState(defaultTab)

  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabsContext.Provider>
  )
}

export function TabList({ children }: { children: React.ReactNode }) {
  return <div className="tab-list">{children}</div>
}

export function Tab({ id, children }: { id: string, children: React.ReactNode }) {
  const context = useContext(TabsContext)
  if (!context)   ()

   (
    
  )
}


< defaultTab=>
  
</>

Render Props Kalıbı

interface DataLoaderProps<T> {
  url: string
  children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode
}

export function DataLoader<T>({ url, children }: DataLoaderProps<T>) {
  const [data, setData] = useState<T | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false))
  }, [url])

  return <>{children(data, loading, error)}</>
}

// Kullanım
<DataLoader<Market[]> url="/api/markets">
  {() => {
     (loading)  
     (error)  
     
  }}
</>

Özel Hook Kalıpları

State Yönetimi Hook'u

export function useToggle(initialValue = false): [boolean, () => void] {
  const [value, setValue] = useState(initialValue)

  const toggle = useCallback(() => {
    setValue(v => !v)
  }, [])

  return [value, toggle]
}

// Kullanım
const [isOpen, toggleOpen] = useToggle()

Async Veri Çekme Hook'u

interface UseQueryOptions<T> {
  onSuccess?: (data: T) => void
  onError?: (error: Error) => void
  enabled?: boolean
}

export function useQuery<T>(
  key: string,
  fetcher: () => Promise<T>,
  options?: UseQueryOptions<T>
) {
  const [data, setData] = useState<T | null>(null)
  const [error, setError] = useState<Error | null>(null)
  const [loading, setLoading] = useState(false)

  // Çağıranlar satır içi fonksiyonlar ve nesne literalleri geçirse bile
  // refetch'in referans olarak kararlı kalması için en güncel fetcher/options
  // değerlerini ref'lerde tutun. Bu olmadan her render yeni bir refetch
  // oluşturur ve aşağıdaki effect her state güncellemesinden sonra yeniden
  // çalışır - sonsuz bir fetch döngüsü.
  const fetcherRef = useRef(fetcher)
  const optionsRef = useRef(options)
  useEffect(() => {
    fetcherRef.current = fetcher
    optionsRef.current = options
  })

   refetch = ( () => {
    ()
    ()

     {
       result =  fetcherRef.()
      (result)
      optionsRef.?.?.(result)
    }  (err) {
       error = err  
      (error)
      optionsRef.?.?.(error)
    }  {
      ()
    }
  }, [])

   enabled = options?. !== 

  ( {
     (enabled) {
      ()
    }
  }, [key, enabled, refetch])

   { data, error, loading, refetch }
}


 { : markets, loading, error, refetch } = (
  ,
   ().( r.()),
  {
    :  .(, data., ),
    :  .(, err)
  }
)

Debounce Hook'u

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

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => clearTimeout(handler)
  }, [value, delay])

  return debouncedValue
}

// Kullanım
const [searchQuery, setSearchQuery] = useState('')
const debouncedQuery = useDebounce(searchQuery, 500)

useEffect(() => {
  if (debouncedQuery) {
    performSearch(debouncedQuery)
  }
}, [debouncedQuery])

State Yönetimi Kalıpları

Context + Reducer Kalıbı

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] = (reducer, {
    : [],
    : ,
    : 
  })

   (
    
  )
}

  () {
   context = ()
   (!context)   ()
   context
}

Performans Optimizasyonu

Memoization

// PASS: Pahalı hesaplamalar için useMemo
// Sıralamadan önce kopyalayın - Array.prototype.sort yerinde değiştirir
const sortedMarkets = useMemo(() => {
  return [...markets].sort((a, b) => b.volume - a.volume)
}, [markets])

// PASS: Alt bileşenlere geçirilen fonksiyonlar için useCallback
const handleSearch = useCallback((query: string) => {
  setSearchQuery(query)
}, [])

// PASS: Pure bileşenler için React.memo
export const MarketCard = React.memo<MarketCardProps>(({ market }) => {
  return (
    <div className="market-card">
      <h3>{market.name}</h3>
      <p>{market.description}</p>
    </div>
  )
})

Code Splitting ve Lazy Loading

import { lazy, Suspense } from 'react'

// PASS: Ağır bileşenleri lazy yükle
const HeavyChart = lazy(() => import('./HeavyChart'))
const ThreeJsBackground = lazy(() => import('./ThreeJsBackground'))

export function Dashboard() {
  return (
    <div>
      <Suspense fallback={<ChartSkeleton />}>
        <HeavyChart data={data} />
      </Suspense>

      <Suspense fallback={null}>
        <ThreeJsBackground />
      </Suspense>
    </div>
  )
}

Uzun Listeler için Virtualization

import { useVirtualizer } from '@tanstack/react-virtual'

export function VirtualMarketList({ markets }: { markets: Market[] }) {
  const parentRef = useRef<HTMLDivElement>(null)

  const virtualizer = useVirtualizer({
    count: markets.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 100,  // Tahmini satır yüksekliği
    overscan: 5  // Ekstra render edilecek öğeler
  })

  return (
    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
      <div
        style={{
          height: `${virtualizer.getTotalSize()}px`,
          position: 'relative'
        }}
      >
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.index}
            style={{
              position: 'absolute',
               ,
               ,
               '%',
               `${}`,
               `(${})`
            }}
          >
            
          
        ))}
      
    
  )
}

Form İşleme Kalıpları

Doğrulamalı Controlled Form

interface FormData {
  name: string
  description: string
  endDate: string
}

interface FormErrors {
  name?: string
  description?: string
  endDate?: string
}

export function CreateMarketForm() {
  const [formData, setFormData] = useState<FormData>({
    name: '',
    description: '',
    endDate: ''
  })

  const [errors, setErrors] = useState<FormErrors>({})

  const validate = (): boolean => {
    const newErrors: FormErrors = {}

    if (!formData.name.trim()) {
      newErrors.name = 'İsim gereklidir'
    } else if (formData.name.length > 200) {
      newErrors.name = 'İsim 200 karakterden az olmalıdır'
    }

    if (!formData.description.trim()) {
      newErrors. = 
    }

     (!formData.) {
      newErrors. = 
    }

    (newErrors)
     .(newErrors). === 
  }

    =  () => {
    e.()

     (!()) 

     {
       (formData)
      
    }  (error) {
      
    }
  }

   (
    
  )
}

Error Boundary Kalıbı

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 (
        <div className="error-fallback">
          Bir şeyler yanlış gitti
          {this.state.error?.message}
           this.setState({ hasError: false })}>
            Tekrar dene
          
        
      )
    }

     ..
  }
}


<>
  
</>

Animasyon Kalıpları

Framer Motion Animasyonları

import { motion, AnimatePresence } from 'framer-motion'

// PASS: Liste animasyonları
export function AnimatedMarketList({ markets }: { markets: Market[] }) {
  return (
    <AnimatePresence>
      {markets.map(market => (
        <motion.div
          key={market.id}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{ duration: 0.3 }}
        >
          <MarketCard market={market} />
        </motion.div>
      ))}
    </AnimatePresence>
  )
}

// PASS: Modal animasyonları
export function Modal({ isOpen, onClose, children }: ModalProps) {
  return (
    
      {isOpen && (
        
          
          
            {children}
          
        
      )}
    </>
  )
}

Erişilebilirlik Kalıpları

Klavye Navigasyonu

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':
        ()
        
    }
  }

   (
    
  )
}

Focus Yönetimi

export function Modal({ isOpen, onClose, children }: ModalProps) {
  const modalRef = useRef<HTMLDivElement>(null)
  const previousFocusRef = useRef<HTMLElement | null>(null)

  useEffect(() => {
    if (isOpen) {
      // Şu anki focus'lanmış elementi kaydet
      previousFocusRef.current = document.activeElement as HTMLElement

      // Modal'a focus yap
      modalRef.current?.focus()
    } else {
      // Kapatırken focus'u geri yükle
      previousFocusRef.current?.focus()
    }
  }, [isOpen])

  return isOpen ? (
    <div
      ref={modalRef}
      role="dialog"
      aria-modal="true"
      tabIndex={-1}
      onKeyDown={e => e.key === 'Escape' && onClose()}
    >
      {children}
    </div>
  ) : null
}

Unutmayın: Modern frontend kalıpları sürdürülebilir, performanslı kullanıcı arayüzleri sağlar. Proje karmaşıklığınıza uyan kalıpları seçin.