Web
React / Next
Sık kullandığım React 19 / Next.js bileşen ve hook kalıpları.
Debounce hook
import { useEffect, useState } from 'react';
export function useDebounce<T>(value: T, delay = 300): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const id = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(id);
}, [value, delay]);
return debounced;
}Sunucu bileşeni + veri çekme
App Router'da veriyi sunucuda çek; useEffect kullanma.
import { db } from '@/lib/db';
export default async function ProductsPage() {
const products = await db.product.findMany({ take: 20 });
return (
<ul className="grid gap-2">
{products.map((p) => (
<li key={p.id} className="rounded-lg border p-3">
{p.name}
</li>
))}
</ul>
);
}Server Action ile mutasyon
'use server';
import { revalidatePath } from 'next/cache';
import { db } from '@/lib/db';
export async function createProduct(formData: FormData) {
const name = String(formData.get('name'));
await db.product.create({ data: { name } });
revalidatePath('/products');
}cn() yardımcısı
Sınıfları birleştirmek için tailwind-merge + clsx. Bu projede @/lib/cn
zaten hazır.