React experimental_useFormState: Gelişmiş Form Yönetimi İçin Kapsamlı Bir Kılavuz

React'in sürekli gelişen ekosistemi, geliştirici deneyimini ve uygulama performansını iyileştirmek için sürekli olarak yenilikçi araçlar sunmaktadır. Bu tür bir gelişme, experimental_useFormState Hook'udur. Şu anda deneysel aşamada olan bu kanca, özellikle React Sunucu Bileşenleri ve Eylemleri ile birlikte kullanıldığında form durumunu yönetmek ve zaman uyumsuz eylemleri gerçekleştirmek için güçlü ve kolaylaştırılmış bir yaklaşım sağlar. Bu kılavuz, experimental_useFormState'in karmaşıklıklarını inceleyerek faydalarını, kullanım durumlarını ve uygulama stratejilerini inceleyecektir.

experimental_useFormState Nedir?

experimental_useFormState Hook'u, React uygulamaları içindeki form yönetimini basitleştirmek için tasarlanmıştır. Form durumu, hataları ve zaman uyumsuz gönderimleri işlemek için açıklayıcı bir yol sunar. Genellikle manuel durum güncellemeleri ve karmaşık olay işleme içeren geleneksel yöntemlerin aksine, experimental_useFormState, tüm form yaşam döngüsünü yönetmek için tek bir kanca sağlayarak bu süreci kolaylaştırır.

Temelinde, experimental_useFormState, bir durum değerini, form gönderme mantığını gerçekleştiren bir işlevle ilişkilendirmenize olanak tanır. Genellikle React Sunucu Bileşenleri bağlamında bir sunucu eylemi olan bu işlev, verileri doğrulamaktan ve gerekli değişiklikleri yapmaktan sorumludur. Kanca daha sonra bu işlevin yürütülme durumunu yöneterek formun durumu hakkında kullanıcıya geri bildirim sağlar (örneğin, yükleme, başarı, hata).

experimental_useFormState Kullanmanın Faydaları

• Basitleştirilmiş Form Mantığı: Tek bir kancada form durumu yönetimini merkezileştirerek basitleştirilmiş kod.
• Geliştirilmiş Performans: Gereksiz güncellemeleri en aza indirerek ve sunucu tarafı veri değişikliklerinden yararlanarak oluşturmayı optimize eder.
• Açıklayıcı Yaklaşım: Açıklayıcı bir programlama stili aracılığıyla daha okunabilir ve bakımı yapılabilir bir kod tabanını teşvik eder.
• Sunucu Eylemleriyle Sorunsuz Entegrasyon: Verimli veri getirme ve değişiklikleri etkinleştiren React Sunucu Bileşenleri ve Eylemleri ile sorunsuz çalışacak şekilde tasarlanmıştır.
• Geliştirilmiş Kullanıcı Deneyimi: Kullanıcıya formun durumu hakkında açık ve öz geri bildirim sağlayarak genel kullanıcı deneyimini iyileştirir.

experimental_useFormState için Kullanım Durumları

experimental_useFormState Hook'u, sunucu tarafı doğrulama ve veri değişiklikleri gerektiren karmaşık formlar içeren senaryolar için özellikle uygundur. İşte bazı yaygın kullanım durumları:

• Kimlik Doğrulama Formları: Kullanıcı kaydı, oturum açma ve parola sıfırlama formlarını işleme.
• E-ticaret Formları: Ödeme formlarını işleme, kullanıcı profillerini güncelleme ve ürün listelerini yönetme.
• İçerik Yönetim Sistemleri (CMS): Makaleler oluşturma ve düzenleme, kullanıcı rollerini yönetme ve web sitesi ayarlarını yapılandırma.
• Sosyal Medya Platformları: Güncellemeler yayınlama, yorum gönderme ve kullanıcı profillerini yönetme.
• Veri Giriş Formları: Anketler, geri bildirim formları ve müşteri bilgileri gibi çeşitli kaynaklardan veri yakalama ve doğrulama.

Uygulama Örneği: Basit Bir İletişim Formu

experimental_useFormState kullanımını pratik bir örnekle gösterelim: basit bir iletişim formu. Bu form, kullanıcının adını, e-postasını ve mesajını toplayacak, ardından verileri işlenmek üzere bir sunucu eylemine gönderecektir.

1. Sunucu Eylemini Tanımlayın

İlk olarak, form gönderimini işleyen bir sunucu eylemi tanımlamamız gerekir. Bu eylem verileri doğrulayacak ve bir e-posta bildirimi gönderecektir.

```javascript // app/actions.js 'use server'; import { revalidatePath } from 'next/cache'; import { sendEmail } from './utils/email'; // Örnek e-posta gönderme işlevi export async function submitContactForm(prevState, formData) { const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); // Temel doğrulama if (!name || !email || !message) { return 'Lütfen tüm alanları doldurun.'; } try { await sendEmail({ to: 'admin@example.com', // Yönetici e-postanızla değiştirin subject: 'Yeni İletişim Formu Gönderimi', text: `Ad: ${name}\nE-posta: ${email}\nMesaj: ${message}`, }); revalidatePath('/'); // Ana sayfayı veya ilgili yolu yeniden doğrulayın return 'Mesajınız için teşekkür ederiz!'; } catch (error) { console.error('E-posta gönderilirken hata:', error); return 'Bir hata oluştu. Lütfen daha sonra tekrar deneyin.'; } } ```

Açıklama:

• 'use server' yönergesi, bu işlevin sunucuda yürütülmesi gerektiğini belirtir.
• İşlev, önceki durumu (prevState) ve form verilerini (formData) argüman olarak alır.
• Form verilerinden adı, e-postayı ve mesajı ayıklar.
• Gerekli tüm alanların doldurulmasını sağlamak için temel doğrulama gerçekleştirir.
• E-posta bildirimini göndermek için zaman uyumsuz bir işlev olan sendEmail'i (ayrıca uygulamanız gerekir) kullanır. Bu, SendGrid, Mailgun veya AWS SES gibi bir hizmet kullanabilir.
• revalidatePath('/'), Next.js'yi ana sayfanın verilerini yeniden getirmeye zorlayarak ilgili değişikliklerin hemen yansıtılmasını sağlar.
• Form durumunu güncellemek için bir başarı veya hata mesajı döndürür.

2. React Bileşenini Uygulayın

Şimdi, form durumunu yönetmek ve gönderimi işlemek için experimental_useFormState kullanan React bileşenini oluşturalım.

```javascript 'use client'; import { experimental_useFormState as useFormState } from 'react'; import { submitContactForm } from './actions'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); return (

Ad:

E-posta:

Mesaj: </div> <button type="submit">Gönder</button> {state && <p>{state}</p>} </form> ); } export default ContactForm; ``` <p><b>Açıklama:</b></p> <ul> <li><code>'use client'</code> yönergesi, bu bileşenin bir istemci bileşeni olduğunu belirtir.</li> <li>Kısa olması için <code>experimental_useFormState</code>'i <code>useFormState</code> olarak ve <code>submitContactForm</code> eylemini içe aktarıyoruz.</li> <li><code>submitContactForm</code> eylemini ve <code>null</code> başlangıç durumunu ileterek <code>useFormState</code>'i çağırıyoruz.</li> <li>Kanca, mevcut durumu (<code>state</code>) ve form gönderimini tetikleyen bir işlevi (<code>formAction</code>) döndürür.</li> <li><code>formAction</code> işlevini <code>form</code> öğesinin <code>action</code> özelliğine ekliyoruz. Bu, React'in form gönderimini doğru şekilde işlemesi için çok önemlidir.</li> <li>Form, ad, e-posta ve mesaj için giriş alanlarının yanı sıra bir gönder düğmesi içerir.</li> <li><code>{state && <p>{state}</p>}</code> satırı, mevcut durumu (başarı veya hata mesajı) kullanıcıya görüntüler.</li> </ul> <h3>3. E-posta Gönderme Hizmetinizi Kurma (sendEmail örneği)</h3> <p><code>sendEmail</code> işlevini uygulamanız gerekir. İşte Gmail hesabıyla Nodemailer kullanarak bir örnek (Not: Üretimde doğrudan Gmail kullanmak genellikle tavsiye edilmez. Üretim ortamları için SendGrid, Mailgun veya AWS SES gibi özel bir e-posta hizmeti kullanın.):</p> ```javascript // app/utils/email.js import nodemailer from 'nodemailer'; export async function sendEmail({ to, subject, text }) { // Gmail SMTP kullanarak bir taşıyıcı nesnesi oluşturun const transporter = nodemailer.createTransport({ service: 'gmail', auth: { user: 'your_gmail_address@gmail.com', // Gmail adresinizle değiştirin pass: 'your_gmail_password', // Gmail şifreniz veya Uygulama Şifrenizle değiştirin }, }); // E-posta seçeneklerini tanımlayın const mailOptions = { from: 'your_gmail_address@gmail.com', to: to, subject: subject, text: text, }; // E-postayı gönder try { await transporter.sendMail(mailOptions); console.log('E-posta başarıyla gönderildi'); } catch (error) { console.error('E-posta gönderilirken hata:', error); throw error; // Hata, sunucu eyleminde yakalanmak üzere tekrar gönderilir } } ``` <p><b>Önemli Güvenlik Notu:</b> Asla gerçek Gmail şifrenizi doğrudan kod tabanınıza eklemeyin! Hassas bilgileri saklamak için ortam değişkenlerini kullanın. Üretim kullanımı için, Nodemailer için özel olarak bir Uygulama Şifresi oluşturun ve ana Gmail şifrenizi kullanmaktan kaçının. Özel e-posta gönderme hizmetleri, doğrudan Gmail kullanmaya kıyasla daha iyi teslim edilebilirlik ve güvenlik sunar.</p> <h3>4. Örneği Çalıştırma</h3> <p>Gerekli bağımlılıkların yüklü olduğundan emin olun:</p> ```bash npm install nodemailer ``` <p>veya</p> ```bash yarn add nodemailer ``` <p>Ardından, Next.js geliştirme sunucunuzu çalıştırın:</p> ```bash npm run dev ``` <p>veya</p> ```bash yarn dev ``` <p>Tarayıcınızı açın ve <code>ContactForm</code> bileşenini içeren sayfaya gidin. Formu doldurun ve gönderin. Formun altında başarı mesajını veya bir hata mesajını görmelisiniz. E-postanın başarıyla gönderildiğini doğrulamak için e-posta gelen kutunuzu kontrol edin.</p> <h2>Gelişmiş Kullanım ve Hususlar</h2> <h3>1. Yükleme Durumlarını İşleme</h3> <p>Daha iyi bir kullanıcı deneyimi sağlamak için, formun gönderildiği zamanı belirtmek önemlidir. <code>experimental_useFormState</code> doğrudan bir yükleme durumu sunmasa da, React'in <code>useTransition</code> kancasını <code>formAction</code> ile birlikte kullanarak bunu manuel olarak yönetebilirsiniz.</p> ```javascript 'use client'; import { experimental_useFormState as useFormState, useTransition } from 'react'; import { submitContactForm } from './actions'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); const [isPending, startTransition] = useTransition(); const handleSubmit = async (formData) => { startTransition(() => { formAction(formData); }); }; return ( <form action={handleSubmit}> <div> <label htmlFor="name">Ad:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">E-posta:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">Mesaj:</label> <textarea id="message" name="message" rows="4" required /> </div> <button type="submit" disabled={isPending}> {isPending ? 'Gönderiliyor...' : 'Gönder'} </button> {state && <p>{state}</p>} </form> ); } export default ContactForm; ``` <p>Bu örnekte:</p> <ul> <li>'react'den <code>useTransition</code> içe aktarıyoruz.</li> <li><code>isPending</code> durumunu ve <code>startTransition</code> işlevini almak için <code>useTransition</code>'ı çağırıyoruz.</li> <li><code>formAction</code>'a yapılan çağrıyı <code>startTransition</code> içine sarıyoruz. Bu, React'e form gönderimini bir geçiş olarak işlemesini, gerekirse kesilmesini sağlar.</li> <li><code>isPending</code> true olduğunda gönder düğmesini devre dışı bırakıyoruz ve düğme metnini "Gönderiliyor..." olarak değiştiriyoruz.</li> </ul> <h3>2. Hata İşleme ve Doğrulama</h3> <p>Sağlam hata işleme, iyi bir kullanıcı deneyimi sağlamak için çok önemlidir. Sunucu eylemi kapsamlı doğrulama yapmalı ve istemciye bilgilendirici hata mesajları döndürmelidir. İstemci bileşeni daha sonra bu mesajları kullanıcıya görüntüleyebilir.</p> <p><b>Sunucu Tarafı Doğrulama:</b> Kötü amaçlı girdileri önlemek ve veri bütünlüğünü sağlamak için verileri her zaman sunucuda doğrulayın. Şema doğrulama için Zod veya Yup gibi kitaplıkları kullanın.</p> <p><b>İstemci Tarafı Doğrulama (İsteğe bağlı):</b> Sunucu tarafı doğrulama esastır, ancak istemci tarafı doğrulama kullanıcıya anında geri bildirim sağlayabilir ve kullanıcı deneyimini iyileştirebilir. Ancak, istemci tarafı doğrulamaya tek gerçeklik kaynağı olarak asla güvenilmemelidir.</p> <h3>3. İyimser Güncellemeler</h3> <p>İyimser güncellemeler, form gönderiminin başarılı olduğu gibi, sunucu onaylamadan önce bile, kullanıcı arabirimini hemen güncelleyerek uygulamanızın daha duyarlı hissetmesini sağlayabilir. Ancak, hataları işlemek ve gönderim başarısız olursa değişiklikleri geri almak için hazırlıklı olun.</p> <p><code>experimental_useFormState</code> ile, <code>formAction</code>'ı çağırmadan önce form verilerine göre yerel durumu güncelleyerek iyimser güncellemeler uygulayabilirsiniz. Sunucu eylemi başarısız olursa, kancanın döndürdüğü hata mesajına göre değişiklikleri geri alabilirsiniz.</p> <h3>4. Yeniden Doğrulama ve Önbelleğe Alma</h3> <p>React Sunucu Bileşenleri ve Eylemleri, performansı iyileştirmek için önbelleğe almadan yararlanır. Bir form gönderimi verileri değiştirdiğinde, kullanıcı arabiriminin en son değişiklikleri yansıtmasını sağlamak için önbelleği yeniden doğrulamak önemlidir.</p> <p><code>next/cache</code>'den <code>revalidatePath</code> ve <code>revalidateTag</code> işlevleri, önbelleğin belirli bölümlerini geçersiz kılmak için kullanılabilir. <code>submitContactForm</code> örneğinde, başarılı bir form gönderiminden sonra ana sayfayı yeniden doğrulamak için <code>revalidatePath('/')</code> kullanılır.</p> <h3>5. Uluslararasılaştırma (i18n)</h3> <p>Küresel bir kitle için uygulamalar oluştururken, uluslararasılaştırma (i18n) çok önemlidir. Bu, uygulamanızı farklı dillere, bölgelere ve kültürel tercihlere uyarlamayı içerir.</p> <p>Formlar için bu, yerelleştirilmiş etiketler, hata mesajları ve doğrulama kuralları sağlamak anlamına gelir. Çevirileri yönetmek ve verileri kullanıcının yerel ayarına göre biçimlendirmek için <code>next-intl</code> veya <code>react-i18next</code> gibi i18n kitaplıklarını kullanın.</p> <p><code>next-intl</code> kullanarak örnek:</p> ```javascript // i18n.js (örnek) import { createTranslator } from 'next-intl'; const messages = { en: { ContactForm: { NameLabel: 'Name', EmailLabel: 'Email', MessageLabel: 'Message', SubmitButton: 'Submit', SuccessMessage: 'Thank you for your message!', ErrorMessage: 'An error occurred. Please try again later.', NameRequired: 'Name is required', EmailRequired: 'Email is required', MessageRequired: 'Message is required', }, }, es: { ContactForm: { NameLabel: 'Nombre', EmailLabel: 'Correo electrónico', MessageLabel: 'Mensaje', SubmitButton: 'Enviar', SuccessMessage: '¡Gracias por tu mensaje!', ErrorMessage: 'Ocurrió un error. Inténtalo de nuevo más tarde.', NameRequired: 'El nombre es obligatorio', EmailRequired: 'El correo electrónico es obligatorio', MessageRequired: 'El mensaje es obligatorio', }, }, // Gerektiğinde daha fazla dil ekleyin }; export async function getTranslations(locale) { return createTranslator({ locale, messages }); } ``` ```javascript // ContactForm.js 'use client'; import { experimental_useFormState as useFormState, useTransition } from 'react'; import { submitContactForm } from './actions'; import { useLocale, useTranslations } from 'next-intl'; function ContactForm() { const [state, formAction] = useFormState(submitContactForm, null); const [isPending, startTransition] = useTransition(); const t = useTranslations('ContactForm'); const handleSubmit = async (formData) => { startTransition(() => { formAction(formData); }); }; return ( <form action={handleSubmit}> <div> <label htmlFor="name">{t('NameLabel')}:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">{t('EmailLabel')}:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">{t('MessageLabel')}:</label> <textarea id="message" name="message" rows="4" required /> </div> <button type="submit" disabled={isPending}> {isPending ? 'Gönderiliyor...' : t('SubmitButton')} </button> {state && <p>{state === 'Thank you for your message!' ? t('SuccessMessage') : t('ErrorMessage')}</p>} </form> ); } export default ContactForm; ``` <h3>6. Erişilebilirlik (a11y)</h3> <p>Uygulamanızın engelli bireyler de dahil olmak üzere herkes tarafından kullanılabilir olmasını sağlamak için erişilebilirlik çok önemlidir. Formlar oluştururken aşağıdaki erişilebilirlik yönergelerini göz önünde bulundurun:</p> <ul> <li><b>Anlamsal HTML kullanın:</b> Formunuza yapı ve anlam sağlamak için <code><label></code>, <code><input></code> ve <code><textarea></code> gibi uygun HTML öğelerini kullanın.</li> <li><b>Tüm form alanları için etiketler sağlayın:</b> <code><label></code> öğesindeki <code>for</code> özniteliğini ve form alanındaki <code>id</code> özniteliğini kullanarak etiketleri form alanlarıyla ilişkilendirin.</li> <li><b>ARIA özniteliklerini kullanın:</b> Formun yapısı ve davranışı hakkında yardımcı teknolojilere ek bilgi sağlamak için ARIA özniteliklerini kullanın.</li> <li><b>Yeterli renk kontrastı sağlayın:</b> Görme engelli kişiler için okunabilirliği sağlamak için metin ve arka plan renkleri arasında yeterli renk kontrastı kullanın.</li> <li><b>Klavye navigasyonu sağlayın:</b> Kullanıcıların yalnızca klavyeyi kullanarak formda gezinebilmesini sağlayın.</li> <li><b>Yardımcı teknolojilerle test edin:</b> Formunuzu, engelli kişiler için erişilebilir olmasını sağlamak için ekran okuyucular gibi yardımcı teknolojilerle test edin.</li> </ul> <h2>Genel Hususlar ve En İyi Uygulamalar</h2> <h3>1. Zaman Dilimleri</h3> <p>Formlarda tarih ve saatlerle uğraşırken, zaman dilimlerini dikkate almak önemlidir. Sunucuda tarihleri ve saatleri UTC formatında saklayın ve istemcide kullanıcının yerel saat dilimine dönüştürün.</p> <h3>2. Para Birimleri</h3> <p>Formlarda parasal değerlerle uğraşırken, para birimlerini doğru şekilde işlemek önemlidir. Değerleri kullanıcının yerel ayarına göre biçimlendirmek ve uygun para birimi sembolünü görüntülemek için bir para birimi biçimlendirme kitaplığı kullanın.</p> <h3>3. Adresler</h3> <p>Adres biçimleri farklı ülkelerde önemli ölçüde farklılık gösterir. Kullanıcıların adreslerini doğru girmesini sağlamak için uluslararası adres biçimlerini destekleyen bir kitaplık kullanın.</p> <h3>4. Telefon Numaraları</h3> <p>Telefon numarası biçimleri de farklı ülkelerde farklılık gösterir. Telefon numaralarını kullanıcının yerel ayarına göre biçimlendirmek ve geçerli telefon numaraları olduklarını doğrulamak için bir telefon numarası biçimlendirme kitaplığı kullanın.</p> <h3>5. Veri Gizliliği ve Uyumluluk</h3> <p>Form verilerini toplarken ve işlerken, GDPR ve CCPA gibi veri gizliliği düzenlemelerine dikkat edin. Kullanıcılarından verilerini toplamadan önce onay alın ve onlara verilerine erişme, değiştirme ve silme olanağı sağlayın.</p> <h2>Sonuç</h2> <p><code>experimental_useFormState</code> Hook'u, React uygulamalarında form yönetimini basitleştirmek için umut verici bir yaklaşım sunar. Sunucu eylemlerinden yararlanarak ve açıklayıcı bir stil benimseyerek, geliştiriciler daha verimli, bakımı yapılabilir ve kullanıcı dostu formlar oluşturabilirler. Hala deneysel bir aşamada olmasına rağmen, <code>experimental_useFormState</code>, form iş akışlarını kolaylaştırmak ve genel React geliştirme deneyimini geliştirmek için önemli bir potansiyele sahiptir. Bu kılavuzda özetlenen en iyi uygulamaları izleyerek, uygulamalarınız için sağlam ve ölçeklenebilir form çözümleri oluşturmak için <code>experimental_useFormState</code>'in gücünden etkili bir şekilde yararlanabilirsiniz.</p> <p>API deneyselden kararlıya evrimleşirken, her zaman en son React belgeleri ve topluluk tartışmalarıyla güncel kalmayı unutmayın.</p> </div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormState</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">form yönetimi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">form durumu</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">deneysel API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React formları</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">sunucu eylemleri</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Hook</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">form optimizasyonu</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">zaman uyumsuz formlar</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">veri mutasyonları</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI güncellemeleri</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0}; $RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>