frontend-patterns

# Frontend Patterns ## Component Design ### Composition over Inheritance ```tsx // 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 ```tsx // 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 ```tsx // 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 ```typescript // 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 |