useState: nedir, state hook'u ve React'te sözdizimi

React'te useState Nedir

useState, 16.8 sürümünde eklenen temel bir React Hook'udur ve işlevsel bileşenlere yerel state depolama ve değiştirme yeteneği verir. Hook'lar tanıtılmadan önce, state yalnızca sınıf bileşenlerinde this.state ve this.setState aracılığıyla kullanılabiliyordu ve bu da işlevsel bileşenleri tamamen sunumsal hale getiriyordu. useState bu sınırlamayı kaldırarak işlevsel bileşenler kullanarak tüm uygulamaların yazılmasına olanak sağladı.

Hook bir argüman alır — başlangıç state değeri — ve iki öğeli bir dizi döndürür. İlk öğe geçerli state değeridir, ikincisi ise onu güncellemek için bir işlevdir. React, setter işlevinin kararlı olduğunu ve render'lar arasında değişmediğini garanti eder, böylece onu alt bileşenlere güvenle aktarabilir ve kapanışlarda kullanabilirsiniz.

React DevTools Kullanım Anketi'ne (2024) göre, useState React uygulamalarının %96'sında kullanılır ve ekosistemdeki en yaygın Hook haline gelir. Redux veya Zustand aracılığıyla global state kullanan uygulamalarda bile, useState aracılığıyla yerel state, kullanıcı arayüzü state'ini — açık modallar, giriş alanı değerleri, aktif sekmeler — yönetmek için birincil mekanizma olmaya devam eder.

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

useState Nasıl Çalışır

useState'in iç mekanizması, React'in fiber düğüm sistemine dayanır. React'teki her bileşen, kendisiyle ilişkili Hook'ların bağlantılı bir listesini depolayan bir fiber düğümle temsil edilir. Bir bileşen useState'i çağırdığında, React bu listede yeni bir düğüm oluşturur ve içinde geçerli state değerini ve güncelleme kuyruğuna bir referansı depolar.

Setter işlevi çağrıldığında, React state'i hemen güncellemez. Bunun yerine, güncellemeyi bekleyen state kuyruğuna koyar, bileşenin yeniden render edilmesini planlar ve yalnızca bir sonraki render sırasında eski state ve uygulanan güncellemelere dayanarak yeni state'i hesaplar. Bu, toplu işlemeyi garanti eder — bir olay işleyicisinde setter'ı üç kez çağırırsanız, React bunları tek bir yeniden render'da gruplar.

React Ekibi — React 18 Çalışma Grubu'na (2024) göre, React 18'de otomatik toplu işleme genişletildi: state güncellemeleri artık yalnızca olay işleyicilerinde değil, aynı zamanda setTimeout, Promise geri çağrıları ve yerel olay işleyicilerinde de gruplanır. Bu, birden çok state güncellemesi olan senaryolarda %30'a kadar performans artışı sağladı.

İşlevsel State Güncellemesi

Yeni state öncekine bağlı olduğunda, setter'ın işlevsel biçimini kullanın: setCount(prev => prev + 1). React, güncelleme anındaki gerçek state değerini işleve aktarır ve toplu güncellemelerde bile doğruluğu garanti eder. İşlevsel biçim olmadan, setCount(count + 1) art arda birkaç kez çağrılırsa eski bir değer kullanabilir.

// Tembel başlatma — yalnızca bir kez çalışır
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
// Result: count increased by 3

// NOT batch-safe: stale closure
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
// Result: count increased by 1 (stale closure)

useState Sözdizimi: Bildirim ve Güncelleme

useState'in temel sözdizimi son derece özlüdür: const [state, setState] = useState(initialValue). Başlangıç değeri yalnızca ilk render sırasında kullanılır; sonraki render'larda React onu yok sayar ve geçerli kaydedilmiş değeri döndürür. Başlangıç hesaplaması pahalı işlemler gerektiriyorsa, bir başlatıcı işlevi aktarın: useState(() => computeExpensiveInitial()).

Tembel başlatma, özellikle başlangıç değeri localStorage'dan, karmaşık veri dönüşümünden veya URL parametrelerinin ayrıştırılmasından geldiğinde önemlidir. React, başlatıcı işlevini yalnızca bir kez çağırır — bileşen monte edildiğinde — bu da sonraki render'larda kaynak tasarrufu sağlar. Tembel başlatma olmadan, pahalı ifade sonucu yok sayılsa bile her render'da değerlendirilir.

// Nesne state'i — yeni referans oluştur
const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
});

Farklı Veri Türleriyle useState

useState, ilkel türler (sayılar, dizeler, boolean) ve referans türleri (diziler, nesneler) ile eşit derecede iyi çalışır. Ancak önemli bir fark vardır: ilkeller için React değişiklikleri değere göre algılar; nesneler ve diziler için referansa göre algılar. Yeni bir tane oluşturmadan mevcut bir nesneyi değiştirmek yeniden render'ı tetiklemez çünkü referans aynı kalır.

Nesneler ve dizilerle çalışırken, her zaman değiştirilmiş verilerle yeni bir kopya oluşturun. Nesneler için yayılma sözdizimini kullanın: setUser(prev => ({...prev, name: newName})). Diziler için yeni bir dizi döndüren yöntemleri kullanın: filter, map, concat veya öğe eklemek için yayılma sözdizimini kullanın. push, pop, splice gibi değiştirme yöntemleri çalışmaz — React onları yok sayar çünkü dizi referansı değişmemiştir.

// ✅ Doğru: hook'lar en üst seviyede
const [form, setForm] = useState({ name: '', email: '' });
const updateField = (field, value) =>
    setForm(prev => ({ ...prev, [field]: value }));

// ...
const [items, setItems] = useState([]);
const addItem = item =>
    setItems(prev => [item, ...prev]);

useState ile Hook Kullanım Kuralları

Tüm React Hook'ları gibi, useState de iki kuralı takip eder. Birincisi: Hook'ları yalnızca bileşeninizin en üst seviyesinde çağırın — onları koşulların, döngülerin veya iç içe işlevlerin içine koymayın. Bu, Hook'ların her render'da aynı sırada çağrılmasını sağlar ve bu, React'in iç bağlantılı listesi için kritiktir.

İkinci kural: Hook'ları yalnızca React işlevsel bileşenlerinden veya özel Hook'lardan çağırın. useState'i normal işlevlerden, geri çağrılardan veya sınıf bileşenlerinden çağırmayın. Bu kuralların ihlali, React'in çalışma zamanında yakaladığı Invalid hook call hatasına yol açar.

• Koşullarda değil — if (flag) { useState(0) } Hook çağrılarının sırasını ihlal eder.
• Döngülerde değil — for (...) { useState(0) } sırayı tahmin edilemez hale getirir.
• Geri çağrılarda değil — useEffect(() => { useState(0) }, []) bağlantılı listeyi bozar.

// ❌ Güncel olmayan kapanış sorunu
function GoodComponent() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('');
    // ✅ İşlevsel güncelleme ile düzeltildi
}

// count güncel değil!
function BadComponent() {
    if (isLogged) {
        const [user, setUser] = useState(null);
    }
}

useState ile Sık Yapılan Hatalar

En yaygın hata, yeni referanslar oluşturmak yerine nesneleri ve dizileri doğrudan değiştirmektir. Geliştiriciler, this.state.user.name = ‘Yeni İsim’'in çalıştığı (önerilmese de) sınıf bileşenlerinin değiştirilebilir stiline alışkındır. İşlevsel bileşenlerde, bu tür bir değişiklik basitçe yok sayılır: React bir referans değişikliği görmez ve bileşeni yeniden render etmez.

• Nesne değiştirme — setUser({...user, name: ‘Yeni’}) yerine user.name = ‘Yeni’.
• Güncel olmayan kapanış — işlevsel biçim olmadan setter'da eski bir değer kullanmak.
• Gereksiz yeniden render'lar — setter'ı aynı değerle çağırmak (React 18 ilkeller için yine de render yapar).
• State sıfırlama — bir bileşenin key prop'unu istemeden güncellemek, yeniden monte edilmesine neden olur.

Güncel olmayan kapanış sorunu, useEffect'e veya bir olay işleyicisine aktarılan bir geri çağrının, geri çağrının oluşturulduğu andaki kapanıştan eski bir state değerini yakalamasıyla oluşur. Çözüm, setter'ın işlevsel biçimini kullanmak veya useEffect bağımlılık dizisine gerekli değerleri dahil etmektir. React Dokümantasyonu — Hook SSS (2025)'ye göre, güncel olmayan kapanışlar, yanlış bağımlılık dizilerinden sonra Hook'lardaki hataların ikinci en yaygın nedenidir.

// ❌ Stale closure problem
useEffect(() => {
    const timer = setInterval(() => {
        setCount(count + 1); // count is stale!
    }, 1000);
    return () => clearInterval(timer);
}, []);

// ✅ Fixed with functional update
useEffect(() => {
    const timer = setInterval(() => {
        setCount(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
}, []);