/frontend-patterns

name: frontend-patterns
description: React, Next.js, TypeScript frontend patterns - component design, state management, performance

Frontend Patterns

Component Design

Composition over Inheritance

// DOGRU: Composition
function Card({ children, header }: { children: ReactNode; header: ReactNode }) {
  return (
    <div className="card">
      <div className="card-header">{header}</div>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Kullanim
<Card header={<h2>Title</h2>}>
  <p>Content here</p>
</Card>

Container/Presenter Pattern

// Container: Data fetching + logic
function UserListContainer() {
  const { data, isLoading } = useQuery(['users'], fetchUsers);
  if (isLoading) return <Skeleton />;
  return <UserList users={data} />;
}

// Presenter: Pure rendering
function UserList({ users }: { users: User[] }) {
  return (
    <ul>
      {users.map(u => <UserItem key={u.id} user={u} />)}
    </ul>
  );
}

State Management

| Cozum | Ne Zaman | Karmasiklik | |-------|----------|-------------| | useState | Local component state | Dusuk | | useReducer | Complex local state | Orta | | Context | Theme, auth, locale | Dusuk-Orta | | Zustand | Global client state | Orta | | React Query | Server state | Orta | | URL params | Navigation state | Dusuk |

Performance

// React.memo: Expensive render onleme
const ExpensiveList = React.memo(({ items }: { items: Item[] }) => (
  <ul>{items.map(i => <ListItem key={i.id} item={i} />)}</ul>
));

// useMemo: Expensive hesaplama cache
const filtered = useMemo(
  () => items.filter(i => i.status === status),
  [items, status]
);

// useCallback: Referans stabilitesi
const handleClick = useCallback((id: string) => {
  setSelected(id);
}, []);

Next.js Patterns

| Feature | Ne Zaman | |---------|----------| | Server Component | Data fetch, no interactivity | | Client Component | onClick, useState, useEffect | | Route Handler | API endpoint | | Middleware | Auth, redirect, rewrite | | Streaming | Buyuk data, progressive rendering |

shadcn/ui Best Practices

// Theme config: globals.css'te CSS variable kullan
// shadcn/ui dark mode: class strategy (Tailwind darkMode: 'class')

// Component override: cn() ile extend et, fork etme
import { Button } from '@/components/ui/button'
<Button variant="outline" className={cn('custom-class', className)} />

// Compose, override etme:
function SubmitButton({ children, ...props }: ButtonProps) {
  return <Button type="submit" variant="default" {...props}>{children}</Button>
}

// A11y: shadcn radix tabanli, otomatik ARIA ama kontrol et
// Dark mode: CSS variable'lar otomatik switch eder

Performance Budget

| Metrik | Esik | Olcum | |--------|------|-------| | LCP (Largest Contentful Paint) | < 2.5s | Core Web Vital | | CLS (Cumulative Layout Shift) | < 0.1 | Core Web Vital | | INP (Interaction to Next Paint) | < 200ms | Core Web Vital | | FCP (First Contentful Paint) | < 1.8s | Lighthouse | | TTI (Time to Interactive) | < 3.8s | Lighthouse | | Total JS bundle | < 200KB gzipped | Build analiz |

React Performance Top 10

1. `React.memo` sadece gercekten expensive render'larda 2. `useMemo`/`useCallback` sadece referans stability gerektiginde 3. Code splitting: `React.lazy()` + `Suspense` route bazli 4. Image optimization: `next/image`, lazy loading, WebP/AVIF 5. Virtual scroll: 100+ item listede `@tanstack/virtual` 6. Debounce: Arama input'unda 300ms debounce 7. Skeleton UI: Loading state icin layout shift onleme 8. Bundle analyze: `@next/bundle-analyzer` ile kontrol 9. Prefetch: `<Link prefetch>` kritik navigation'larda 10. Server Component: Default RSC, client sadece interactive icin

Anti-Patterns

| Anti-Pattern | Dogru Yol | |-------------|-----------| | Prop drilling (5+ level) | Context veya state library | | useEffect for derived state | useMemo kullan | | Index as key | Unique ID kullan | | Premature optimization | Profiler ile olc, sonra optimize et |