Giriş: React 19 ile Form Yönetimi Devrimi

React 19 öncesinde form gönderimi sırasında loading state'ini manuel olarak yönetmek karmaşık bir işti. useFormStatus hook'u ile bu işlem artık framework seviyesinde destekleniyor ve uygulamanız otomatik olarak pending durumunu takip edebiliyor.

Bu rehberde, e-commerce platformunda ürün güncelleme formunun optimistik UI ile nasıl yazılacağını göreceğiz.

1. Temel useFormStatus Hook Örneği

Önemli Kural: useFormStatus kancası, formun durumunu okuyabilmek için mutlaka <form> elementinin içinde render edilen bir alt bileşende çağrılmalıdır.

import { useFormStatus } from 'react-dom';
import { updateProductAction } from '@/app/actions/products';

// 1. Submit butonu alt bileşen olarak tanımlanır
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending} className="btn-primary">
      {pending ? 'Güncelleniyor...' : 'Ürünü Güncelle'}
    </button>
  );
}

// 2. Ana Form Bileşeni
export function ProductUpdateForm({ 
  productId, 
  initialName, 
  initialPrice 
}: {
  productId: string;
  initialName: string;
  initialPrice: number;
}) {
  return (
    <form action={updateProductAction} className="space-y-4">
      <input type="hidden" name="productId" value={productId} />
      <div className="form-group">
        <label htmlFor="name">Ürün Adı</label>
        <input
          id="name"
          type="text"
          name="name"
          defaultValue={initialName}
        />
      </div>
      <div className="form-group">
        <label htmlFor="price">Fiyat (TL)</label>
        <input
          id="price"
          type="number"
          name="price"
          defaultValue={initialPrice}
        />
      </div>
      <SubmitButton />
    </form>
  );
}

2. Optimistik UI ile Anlık Geri Bildirim

useOptimistic hook'u ile, form gönderilir gönderilmez UI'ı anında güncelle, sonra sunucudan cevap bekle. Hata durumunda React otomatik olarak önceki duruma geri döner.

import { useOptimistic } from 'react';
import { updateProductAction } from '@/app/actions/products';

interface Product {
  id: string;
  name: string;
  price: number;
}

export function ProductUpdateWithOptimism({ product }: { product: Product }) {
  // ✅ DÜZELTME: Update fonksiyonu FormData'dan değer almak için doğru tanımlandı
  const [optimisticProduct, setOptimisticProduct] = useOptimistic(
    product,
    (state: Product, formData: FormData) => ({
      ...state,
      name: String(formData.get('name') || state.name),
      price: parseFloat(String(formData.get('price') || state.price))
    })
  );

  async function handleUpdate(formData: FormData) {
    // UI'ı hemen güncelle (optimistik)
    setOptimisticProduct(formData);
    
    const result = await updateProductAction(formData);
    
    // Hata durumunda useOptimistic otomatik eski state'e döner
    if (!result.success) {
      alert(`Hata: ${result.error}`);
    }
  }

  return (
    <form action={handleUpdate}>
      <input type="text" name="name" defaultValue={optimisticProduct.name} />
      <input type="number" name="price" defaultValue={optimisticProduct.price} />
      <button type="submit">Kaydet</button>
    </form>
  );
}

3. Server Action ile Zod Validasyonu

'use server';

import { z } from 'zod';
import { revalidatePath } from 'next/cache';

const productUpdateSchema = z.object({
  productId: z.string().uuid(),
  name: z.string().min(3, 'Ürün adı en az 3 karakter olmalıdır'),
  price: z.coerce.number().positive('Fiyat pozitif olmalıdır'),
});

export async function updateProductAction(formData: FormData) {
  try {
    const rawData = Object.fromEntries(formData);
    const validatedData = productUpdateSchema.parse(rawData);
    
    await db.products.update({
      where: { id: validatedData.productId },
      data: validatedData,
    });

    revalidatePath('/products');
    return { success: true };
  } catch (error) {
    if (error instanceof z.ZodError) {
      return { success: false, error: error.errors[0]?.message };
    }
    return { success: false, error: 'Sunucu hatası' };
  }
}

4. Best Practices

useFormStatus konumu: Kanca mutlaka <form> elementinin altındaki bir child component içinde olmalıdır.
useOptimistic parametresi: Update fonksiyonunun ikinci parametresi formData'dan doğru değerleri extract etmelidir.
Server validasyon: İstemci doğrulaması yalnızca UX içindir; güvenlik daima server action'da Zod ile sağlanmalıdır.

Özet

React 19 ile form yönetimi modernleşti. useFormStatus ile harici state açmadan loading yönetimi, useOptimistic ile gecikmesiz arayüzler sağlanır.