React'in ekosistemi sürekli gelişiyor ve state yönetimi en çok tartışılan konulardan biri olmaya devam ediyor. 2025'te, yerleşik hook'lardan güçlü harici kütüphanelere kadar her zamankinden daha fazla seçeneğimiz var. Bu kapsamlı rehber, bu yıl React uygulamalarında state yönetimi hakkında bilmeniz gereken her şeyi adım adım anlatacak. Redux ve Context API gibi klasikleri ele alacağız, ancak en son trendlere de dalacağız: sinyaller, Jotai ve Recoil gibi atomik state yöneticileri ve yeni 'use' hook'u. İster küçük bir yan proje ister büyük ölçekli bir kurumsal uygulama geliştiriyor olun, hangi aracın ihtiyaçlarınıza uygun olduğuna dair net bir anlayışla ayrılacaksınız. React'in kendi state yönetimi yeteneklerinin nasıl geliştiğine bakarak başlayalım. React 16.8'de hook'ların tanıtılmasıyla, yerel bileşen state'ini zarif bir şekilde yöneten useState ve useReducer'ı elde ettik. Ancak uygulamalar büyüdükçe, state'i yukarı taşımak ve prop'ları birçok katmandan geçirmek zahmetli hale gelir. Context API, temalar veya kullanıcı kimlik doğrulaması gibi global state için prop drilling'den kaçınmanın bir yolunu sağladı, ancak dikkatli kullanılmazsa performans sorunlarına yol açabilir. İşte bu noktada harici kütüphaneler öne çıkıyor.
Bu yazıda, popüler state yönetimi çözümlerini birden çok kritere göre karşılaştıracağız: paket boyutu, öğrenme eğrisi, sık güncellemelerde performans ve geliştirici deneyimi. Ayrıca, kalıpları eylem halinde görebilmeniz için etkileşimli kod örnekleri de ekleyeceğiz. Sonunda, bir sonraki React projeniz için doğru aracı seçmek üzere sağlam bir çerçeveye sahip olacaksınız. Hadi başlayalım!
React State'in Evrimi: setState'ten Sinyallere
React'in state yönetimi yolculuğu, sınıf bileşeni setState ile başladı. Bu basitti ancak yüksek dereceli bileşenler ve render prop'ları gibi karmaşık kalıplara yol açtı. 2019'da hook'lara geçiş devrim niteliğindeydi. useState ve useReducer, fonksiyonel bileşenleri sınıflar olmadan state'li hale getirdi ve çoğu state mantığının temeli olmaya devam ediyor.
Ancak, yukarıdaki grafiğin gösterdiği gibi, büyük uygulamalarda yerleşik çözümlerden geliştirici memnuniyeti önemli ölçüde düşüyor. Bu boşluk, harici kütüphanelerde yeniliği tetikledi. En heyecan verici gelişmelerden biri, sinyaller kavramıdır. Başlangıçta SolidJS tarafından popülerleştirilen sinyaller, artık Preact Signals ve @preact/signals-react gibi kütüphaneler aracılığıyla React'i etkiliyor. Sinyaller, Sanal DOM farkını alma yükü olmadan ince taneli reaktivite sunar. React'te bir sinyal, güncellendiğinde yalnızca onu doğrudan tüketen bileşenleri yeniden render eden değiştirilebilir bir referanstır. Bu, tipik yukarıdan aşağıya yeniden render modelinden bir sapmadır.
Son derece etkileşimli bir gösterge paneli veya gerçek zamanlı bir veri görselleştirmesi oluşturuyorsanız sinyalleri deneyin. Render'ları en aza indirir ve uygulamanızın daha hızlı hissetmesini sağlayabilir.
Atomik State'in Yükselişi: Jotai ve Recoil
Jotai ve Recoil gibi atomik state yöneticileri farklı bir yaklaşım benimser. Tek bir global depo (Redux gibi) yerine, atom adı verilen küçük, bağımsız state birimleri oluşturmanıza izin verirler. Bileşenler, tam olarak ihtiyaç duydukları atomlara abone olabilir ve gereksiz yeniden render'lardan kaçınabilir. Bu model inanılmaz derecede sezgiseldir ve iyi ölçeklenir.
Farklı araçlarda basit bir sayaç uygulamasını karşılaştıralım:
Gördüğünüz gibi, Jotai ve Zustand, hedeflenmiş yeniden render'larla minimum kod kalabalığı sunar. Recoil, Jotai'ye benzer ancak farklı bir API kullanır ve deneysel durumdadır. Birçok ekip, basitliği ve güçlü React entegrasyonu nedeniyle Jotai'yi benimsiyor.
Redux Neden 2025'te Hala Geçerli?
Daha yeni seçeneklere rağmen Redux, özellikle büyük ölçekli uygulamalarda yaygın olarak kullanılmaya devam ediyor. Redux Toolkit (RTK), kod kalabalığını azaltarak ve veri getirme için createAsyncThunk gibi yardımcı programlar ekleyerek geliştirici deneyimini önemli ölçüde iyileştirdi. Artık RTK'nın bir parçası olan RTK Query, API çağrıları ve önbellekleme için manuel olarak efekt yazma ihtiyacını ortadan kaldırır.
Redux, tek bir doğruluk kaynağına, tahmin edilebilir state güncellemelerine ve zaman yolculuğu hata ayıklama için mükemmel geliştirici araçlarına ihtiyacınız olduğunda parlar. Ancak, daha basit uygulamalar için gereksiz olabilir. İşte bir kural:
"Uygulamanız, birden çok ilgisiz bileşenin sık sık güncellemesi ve okuması gereken karmaşık bir global state'e sahip olduğunda Redux kullanın. Diğer her şey için React Context veya Zustand gibi hafif bir kütüphane ile başlayın."
Pratik Karşılaştırma: Tema Değiştirici için Context API ve Zustand
Basit bir tema değiştiriciyi önce Context API ile oluşturalım, ardından farklılıkları vurgulamak için Zustand'a yeniden düzenleyelim.
Context API Uygulaması
import React, { createContext, useState, useContext } from 'react';
const ThemeContext = createContext();
export function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
const toggleTheme = () => setTheme(prev => prev === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
export const useTheme = () => useContext(ThemeContext);
Ardından bir bileşende:
function Header() {
const { theme, toggleTheme } = useTheme();
return (
<header style={{ background: theme === 'light' ? '#fff' : '#333' }}>
<button onClick={toggleTheme}>Toggle</button>
</header>
);
}
Bu çalışır, ancak iki ana sorunu vardır:
themedeğiştiğinde, bağlamın tüm tüketicileri yeniden render edilir, yalnızcatoggleThemekullansalar bile.- Birden çok özelliğiniz (kimlik doğrulama, bildirimler vb.) varsa, bir bağlam cehennemi oluşturmak kolaydır.
Zustand Uygulaması
import { create } from 'zustand';
const useThemeStore = create((set) => ({
theme: 'light',
toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
}));
function Header() {
const theme = useThemeStore((s) => s.theme);
const toggleTheme = useThemeStore((s) => s.toggleTheme);
return (
<header style={{ background: theme === 'light' ? '#fff' : '#333' }}>
<button onClick={toggleTheme}>Toggle</button>
</header>
);
}
Zustand ile sağlayıcı sarmalayıcısından kaçınırız ve bileşenler yalnızca seçtikleri dilim değişirse yeniden render edilir. Bu, performans için büyük bir kazançtır.
Yukarıdaki grafik, temayı değiştirirken orta ölçekli bir uygulamada (20 bileşen) yeniden render sayılarını karşılaştırır. Zustand yalnızca 2 yeniden render'a (okuyan bileşenler) neden olurken, Context API 20'ye neden olur.
State için Yeni React Özellikleri: use Hook'u
React 19, veri getirme için oyunun kurallarını değiştiren use hook'unu tanıttı. Render işlevinde doğrudan promise'leri açabilir ve Suspense ile entegre olabilir. Tam bir state yöneticisi olmasa da, bileşen state'ini asenkron verilere bağlamayı basitleştirir.
import { use } from 'react';
async function fetchUser(id) {
const res = await fetch(`/api/users/${id}`);
return res.json();
}
function UserProfile({ id }) {
const user = use(fetchUser(id));
return <div>{user.name}</div>;
}
Bu kalıp, veri getirme için useEffect + useState ihtiyacını önemli ölçüde azaltır. Bir sunucu bileşen mimarisi (Next.js App Router) ile birleştirildiğinde, state'i neredeyse bildirimsel hissettirir.
Projeniz İçin Doğru Aracı Seçme
İşte seçim yapmanıza yardımcı olacak bir karar çerçevesi:
- Küçük uygulama, minimum global state: React Context +
useState. Performans sorunları yaşarsanız, Zustand'a geçin. - Orta ölçekli uygulama, birden çok global state (kimlik doğrulama, tema, sepet): Zustand veya Jotai. Her ikisi de mükemmel geliştirici deneyimi ve ağaç sallama sunar.
- Karmaşık asenkron akışları ve önbelleklemesi olan büyük uygulama: Redux Toolkit + RTK Query. Yerleşik geliştirici araçları ve ara yazılımlar paha biçilmezdir.
- Gerçek zamanlı, yüksek frekanslı güncellemeler (grafikler, ticaret vb.): Sinyaller (Preact Signals aracılığıyla) veya türetilmiş atomlarla Jotai.
Redux'tan Zustand'a Geçiş: Adım Adım Plan
Bir geçiş düşünüyorsanız, işte güvenli bir yaklaşım:
- Zustand'ı Redux'un yanına ekleyin. Kritik olmayan bir özellik için yeni bir depo oluşturun.
- Dilim geçişi: Her seferinde bir Redux dilimini, aynı eylem adlarını koruyarak bir Zustand dilimine taşıyın.
- Zustand'da
persistara yazılımınıkullanarak Redux-persist işlevselliğini eşleştirin. 4.Her iki depoyu aynı anda çalıştırınve herhangi bir gerileme olmadığını doğrulayana kadar. 5.Redux dilimini kaldırınyeni depo kararlı hale geldiğinde. 6.Azaltılmış kod kalabalığını kutlayın.
Bir üretim uygulamasında büyük patlama geçişi denemeyin. Özellik bayrakları ve kademeli geçiş kullanın.
React'te State Yönetiminin Geleceği
Sunucunun daha fazla state'e sahip olduğu ve istemcinin önbelleğe alıp iyimser bir şekilde güncellediği bir dünyaya doğru ilerliyoruz. React Server Components ve use hook'u, veri getirmeyi daha erken bir aşamaya taşıyarak türetilmiş veriler için istemci tarafı state yöneticilerine olan ihtiyacı azaltır. Ancak, istemci tarafı etkileşim her zaman state gerektirecektir. Trend, React'in kendisinin bir uzantısı gibi hissettiren ultra minimal, reaktif kütüphanelere doğru. Sinyallerin React'in eşzamanlı moduna daha sıkı entegre edildiğini ve daha fazla kütüphanenin ödün vermeden ince taneli reaktivite sunduğunu göreceğiz.
En iyi durum yöneticisi, ihtiyacınız olmayandır. Bir kütüphane eklemeden önce, durumu bir sunucu bileşenine taşıyıp taşıyamayacağınızı veya onu prop'lardan türetip türetemeyeceğinizi değerlendirin.
Sonuç
React durum yönetimi 2025'te zengin ve çeşitlidir. useState'nin basitliğinden Jotai'nin atomik hassasiyetine ve Redux'un savaşta test edilmiş güvenilirliğine kadar her ihtiyaç için bir araç vardır. Anahtar, uygulamanızın gereksinimlerini anlamak ve aşırı mühendislik yapmamaktır. Basit başlayın, performansı ölçün ve gerektiğinde çözümünüzü ölçeklendirin. Sinyaller ve use kancası gibi yeni gelişmelerden haberdar olarak React uygulamalarınızı verimli ve keyifli bir şekilde oluşturmaya devam edeceksiniz.
Bu kılavuzun manzarayı netleştirdiğini umuyoruz. Daha derinlemesine incelemeler için React performans optimizasyonu ve TypeScript entegrasyonu hakkındaki diğer makalelerimize göz atın.
