frontend-patterns

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 |