React iyimser beğeni
Beğeni sayısını sunucu yanıtından önce güncelleyen useOptimistic örneği.
Prompt Metni
React 19 useOptimistic ile bir beğeni düğmesi yaz. Gereksinimler: - Tıklamada sayı hemen artsın - Sunucu aksiyonu hata verirse arayüz önceki sayıya dönsün - Düğme pending iken yeniden tıklanamasın - TypeScript ve tek dosya
Prompt Sonucu
'use client'
import { useOptimistic, useState, useTransition } from 'react'
export function LikeButton({ initialCount }: { initialCount: number }) {
const [count, setCount] = useState(initialCount)
const [optimisticCount, addLike] = useOptimistic(
count,
(current: number, added: number) => current + added
)
const [pending, startTransition] = useTransition()
function onClick() {
startTransition(async () => {
addLike(1)
const next = await saveLike()
setCount(next)
})
}
return (
<button type="button" onClick={onClick} disabled={pending}>
Beğen ({optimisticCount})
</button>
)
}
async function saveLike(): Promise<number> {
const response = await fetch('/api/like', { method: 'POST' })
if (!response.ok) throw new Error('Beğeni kaydedilemedi')
const data = await response.json() as { count: number }
return data.count
}
Benzer Promptlar
Kod
Zod ile ortam değişkenleri
Eksik gizli anahtarı açılışta yakalayan Zod ortam şeması.
Kod
Next.js dinamik metadata
Promise params ile başlık, açıklama ve mutlak Open Graph adresi.
Kod
Webhook HMAC doğrulaması
timingSafeEqual kullanan webhook imza kontrolü.
Kod
GitHub Actions Next.js CI
npm ci, lint ve build çalıştıran kısa GitHub Actions iş akışı.