Ne Aramıştınız?
Makaleler, projeler ve kaynaklar arasında arama yaparak size özel fikirler, bilgiler ve ilham kaynakları keşfedin.
Takip et
Ne Aramıştınız?
Makaleler, projeler ve kaynaklar arasında arama yaparak size özel fikirler, bilgiler ve ilham kaynakları keşfedin.
Takip et
Kategoriler
Son Yazılar

React Ekosistemindeki Son Gelişmeler: TanStack, Vercel v0 ve Bun

Modern web geliştirme dünyası hızla evriliyor ve her hafta karşımıza çıkan yenilikler, geliştiricilerin gündemini meşgul ediyor. Bu makalede, React ekosisteminin en güncel ve heyecan verici gelişmeleri olan TanStack, React Actions, Immer, RTK gibi veri yönetimi çözümlerinden, Vercel v0’ın yapay zeka destekli arayüz oluşturma vizyonuna, Worklets ve Skia’nın performans iyileştirmelerine, TC39’un standartlaşma çabalarına, Playwright’ın test yeteneklerine ve Bun’ın radikal performans artışlarına kadar geniş bir yelpazeyi ele alacağız. Amacımız, bu teknolojilerin sunduğu fırsatları ve potansiyel zorlukları anlamanıza yardımcı olmak ve kendi projelerinizde nasıl fayda sağlayabileceğinizi göstermektir.

React uygulamalarında veri yönetimi, karmaşıklığı en çok artıran alanlardan biridir. Ancak son yıllarda ortaya çıkan araçlar, bu zorluğu önemli ölçüde azaltmış durumda. Özellikle TanStack Query (eski adıyla React Query), Immer ve Redux Toolkit (RTK) bu alanda bir devrim niteliğinde yenilikler sunuyor. Bu araçlar sayesinde, uygulamanızın performansını ve geliştirme verimliliğini artırabilirsiniz. Zira, doğru veri yönetimi stratejisi, büyük ölçekli uygulamalar için kritik bir başarı faktörüdür.

TanStack Query ile Veri Çekme ve Önbellekleme Nasıl Kolaylaşır?

TanStack Query, sunucu tarafındaki verileri yönetmek için mükemmel bir kütüphanedir. Veri çekme, önbellekleme, senkronizasyon ve arka plan güncellemeleri gibi işlemleri basitleştirir. Böylece, geliştiricilerin veri yönetimi yerine uygulamanın temel iş mantığına odaklanmasını sağlar. Örneğin, bir e-ticaret uygulamasında ürün listelerini veya kullanıcı sepetini güncel tutmak, TanStack Query ile çok daha zahmetsiz hale gelir.

Bir vaka analizi olarak, dinamik bir e-ticaret sitesini ele alalım. Kullanıcılar ürünleri sepete ekler, miktarları değiştirir veya sepetten çıkarır. Geleneksel yaklaşımlarla bu tür durumları yönetmek, sık sık sunucu istekleri göndermek, isLoading durumlarını izlemek ve hataları yönetmekle ilgili karmaşık kodlara yol açabilir. TanStack Query sayesinde ise, veri güncellemeleri anlık olarak yansıtılırken, optimistik güncellemelerle kullanıcı deneyimi kesintisiz hale gelir. Örneğin, bir ürün sepete eklenir eklenmez, sunucudan onay gelmese bile arayüzde eklenmiş gibi gösterilir. Sunucudan hata gelirse geri alınır, başarılı olursa kalıcı hale gelir. Bu durum, kullanıcının uygulama ile etkileşimini daha akıcı kılar.


    import { useQuery, useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';

    const queryClient = new QueryClient();

    function Products() {
      const { data: products, isLoading, error } = useQuery({
        queryKey: ['products'],
        queryFn: async () => {
          const res = await fetch('/api/products');
          if (!res.ok) throw new Error('Ürünler yüklenemedi');
          return res.json();
        },
      });

      const addProductToCart = useMutation({
        mutationFn: async (productId) => {
          const res = await fetch('/api/cart/add', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ productId }),
          });
          if (!res.ok) throw new Error('Ürün sepete eklenemedi');
          return res.json();
        },
        onSuccess: () => {
          // Sepet verilerini geçersiz kıl ve yeniden çek
          queryClient.invalidateQueries({ queryKey: ['cart'] });
        },
      });

      if (isLoading) return 
Ürünler yükleniyor...
;
      if (error) return 
Hata: {error.message}
;

      return (
        

          
Ürünlerimiz

          
    
            {products.map((product) => (
              
  • 
                {product.name} - {product.price} TL
                
                {addProductToCart.isError && Hata: {addProductToCart.error.message}}
              
    • 
            ))}
          

        

      );
    }

    function App() {
      return (
        
          
        
      );
    }

Yukarıdaki örnekte, useQuery ile ürün listesi çekiliyor ve useMutation ile sepete ürün ekleniyor. Sepete ürün ekleme başarılı olduğunda, queryClient.invalidateQueries ile sepet verileri otomatik olarak güncelleniyor. Bu yaklaşım, veri tutarlılığını sağlamanın yanı sıra, geliştiricinin manuel durum yönetimiyle uğraşmasını engeller.

Immer ve RTK: Değişmez Veri Yapılarını Yönetmenin Yeni Yolları

React'ta ve Redux gibi durumlarda değişmez (immutable) veri yapılarıyla çalışmak önemlidir, çünkü bu, performans optimizasyonlarını ve durum yönetiminin tahmin edilebilirliğini artırır. Ancak değişmez verilerle doğrudan çalışmak, bazen hantal kodlara yol açabilir. İşte burada Immer devreye girer. Immer, size sanki doğrudan değiştirilebilir (mutable) bir nesneyle çalışıyormuş gibi bir API sunar, ancak arka planda tüm değişmez güncellemeleri sizin için halleder. Bu, özellikle karmaşık iç içe geçmiş nesneleri güncellerken kodunuzu çok daha okunabilir ve yönetilebilir hale getirir.


    import produce from 'immer';

    const baseState = [
      {
        todo: 'Birinci görev',
        done: false,
      },
      {
        todo: 'İkinci görev',
        done: true,
      },
    ];

    const nextState = produce(baseState, (draft) => {
      draft[0].done = true;
      draft.push({ todo: 'Üçüncü görev', done: false });
    });

    console.log(baseState === nextState); // false (yeni bir referans)
    console.log(baseState[0] === nextState[0]); // false (içerik değiştiği için yeni referans)
    console.log(baseState[1] === nextState[1]); // true (değişmediği için aynı referans)

Redux Toolkit (RTK), Redux'ı daha kolay ve verimli kullanmak için geliştirilmiş resmi bir kütüphanedir. RTK, Immer'ı varsayılan olarak entegre ederek, Redux state'ini daha kolay bir şekilde güncellemenizi sağlar. Ayrıca, boilerplate kodu azaltan createSlice gibi yardımcı fonksiyonlar sunar. RTK, hem yeni başlayanlar hem de deneyimli Redux kullanıcıları için en iyi uygulamaları teşvik eder. TanStack Query ile RTK'yı birleştirmek, hem sunucu tarafı verilerini hem de istemci tarafı verilerini şık ve performanslı bir şekilde yönetmenizi sağlar.

Uzman İpucu: TanStack Query'yi uygulama genelinde veri çekme ve önbellekleme için kullanırken, Immer destekli Redux Toolkit'i daha karmaşık global durum yönetimi veya kullanıcı arayüzü odaklı durumlar için bir arada kullanmak, çoğu modern React uygulaması için güçlü ve ölçeklenebilir bir mimari sunar.

React Sunucu Eylemleri (Actions) ile Geliştirme Deneyimi Nasıl Dönüşüyor?

React Server Components ve Sunucu Eylemleri (Server Actions), React ekosistemindeki en heyecan verici ve potansiyel olarak oyun değiştirici yeniliklerden biridir. Bu özellikler, React'ın sadece istemci tarafında değil, sunucu tarafında da güçlü bir oyuncu olmasının yolunu açıyor. Sunucu Eylemleri, özellikle form gönderimi ve veri mutasyonu gibi işlemleri doğrudan React bileşenlerinizden, güvenli ve performanslı bir şekilde yapmanızı sağlar. Neticede, bu yaklaşım, uygulamanızın hem backend hem de frontend kısımlarını daha entegre bir şekilde yönetmenize olanak tanır.

Sunucu Eylemleri ile Form Gönderimleri Nasıl Basitleşiyor?

Geleneksel olarak, React'ta bir form gönderdiğinizde, genellikle bir API uç noktasına HTTP POST isteği gönderir, ardından yükleme durumlarını, hataları ve başarılı yanıtları manuel olarak yönetirdiniz. Sunucu Eylemleri bu süreci radikal bir şekilde basitleştiriyor. Artık, sunucuda çalışacak bir fonksiyonu doğrudan bir React bileşeninizde tanımlayabilir ve bir formun action prop'una veya bir düğmenin formAction prop'una atayabilirsiniz.

Örnek olarak, bir blog uygulamasında yorum gönderme formunu ele alalım. Kullanıcı yorumunu yazdığında, bu yorumun doğrudan veritabanına kaydedilmesi gerekir. Sunucu Eylemleri ile bu işlem, hem geliştirme sürecini hızlandırır hem de son kullanıcı deneyimini iyileştirir.


    // app/comments.js (Sunucu bileşeni veya 'use client' ile client bileşeninde çağrılabilir)
    'use server'; // Bu dosyadaki fonksiyonların sunucuda çalışacağını belirtir

    import { revalidatePath } from 'next/cache'; // Next.js örneği için

    export async function addComment(formData) {
      const commentText = formData.get('comment');
      const postId = formData.get('postId');

      if (!commentText || !postId) {
        return { success: false, message: 'Yorum metni veya gönderi kimliği eksik.' };
      }

      try {
        // Burada veritabanı işlemi yapılır
        await saveCommentToDatabase({ postId, text: commentText });

        // Veri önbelleğini yeniden doğrula, Next.js veya benzeri frameworkler için
        revalidatePath(/posts/${postId});
        return { success: true, message: 'Yorum başarıyla eklendi!' };
      } catch (error) {
        console.error('Yorum eklenirken hata oluştu:', error);
        return { success: false, message: 'Yorum eklenirken bir hata oluştu.' };
      }
    }
    


    // app/PostPage.js (Client bileşeni)
    'use client';

    import { addComment } from './comments'; // Sunucu eylemini içe aktar
    import { useFormStatus, useFormState } from 'react-dom'; // React'tan gelen hook'lar

    function CommentForm({ postId }) {
      const [state, formAction] = useFormState(addComment, { success: null, message: null });

      return (

Aşağıdaki içerikler de ilgilinizi çekebilir:

E-posta Bülteni
Yazılım Topluluğuna Katılın
En son güncellemeleri, yaratıcı ipuçlarını ve özel kaynakları doğrudan e-posta kutunuza alın. Tasarım ve inovasyonun geleceğini birlikte keşfedelim.