useState Hook'u: Durum ve Yeniden Oluşturmalar
Bir bileşene yerel durum eklemek için useState çağırın, ayarlayıcı işlevle durumu güncelleyin ve React'in ne zaman ve neden yeniden oluşturduğunu öğrenin.
useState Hook'u: Durum ve Yeniden Oluşturmalar, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Durum Nedir
Durum, zaman içinde değişen ve değiştiğinde kullanıcı arayüzünün güncellenmesine neden olması gereken verilerdir. Normal değişkenlerin aksine durum değişiklikleri, React'in bileşeni yeni değerle yeniden oluşturmasını tetikler.
useState Söz Dizimi
useState(initialValue), bir demet döndürür: mevcut değer ve bir ayarlayıcı işlev. Bu değerleri hemen yapı bozma ile ayırın.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // initial value: 0
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
);
}TypeScript: useState Türlerini Belirtme
TypeScript, türü başlangıç değerinden çıkarır. Başlangıç değeri belirsiz olduğunda (null veya boş bir dizi), açık bir tür parametresi ekleyin.
const [count, setCount] = useState(0); // inferred: number
const [name, setName] = useState(''); // inferred: string
const [user, setUser] = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicitDurum Değişikliğinde Yeniden Oluşturma
Ayarlayıcı işlevi çağırmak, yeniden oluşturmayı planlar. React, yeni durum değeriyle bileşen işlevinizi yeniden çağırır. Döndürülen JSX, sanal DOM'daki önceki oluşturmanın yerini alır.
Durum Güncellemeleri Eş Zamanlı Değildir
Durum güncellemeleri toplu hâlde işlenir ve hemen değil, bir sonraki oluşturmadan önce uygulanır. Güncellenmiş durumu aynı olay işleyicisinde okumayın; yeni değer bir sonraki oluşturmaya kadar kullanılabilir değildir.
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
console.log(count); // still 0 — update hasn't applied yet
}İşlevsel Güncellemeler
Yeni durum önceki duruma bağlı olduğunda ayarlayıcının işlevsel biçimini kullanın. Bu, eski kapanımlardan kaynaklanan hataları önler.
// Risky (stale closure in async callbacks):
setCount(count + 1);
// Safe (functional update):
setCount(prev => prev + 1);
// Important for buttons that fire rapidly:
function increment() {
setCount(c => c + 1); // always uses the latest value
}Nesnelerle Durum Kullanımı
Durum bir nesne olduğunda her zaman yeni bir nesne oluşturun; mevcut nesneyi değiştirmeyin. React karşılaştırmayı başvuruya göre yapar; değişiklikler yeniden oluşturmayı tetiklemez.
const [user, setUser] = useState({ name: 'Alice', age: 30 });
// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!
// CORRECT: new object
setUser({ ...user, age: 31 });Birden Çok Durum Değişkeni
Bağımsız durum değişkenleri için useState'i birden çok kez çağırın. Değerler birlikte değişmediğinde bu yaklaşım, tek bir büyük durum nesnesi kullanmaktan daha temizdir.
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);Tembel Başlatma
Başlangıç durumu maliyetli bir hesaplama gerektiriyorsa useState'e bir işlev aktarın. Bu işlev her yeniden oluşturmada değil, yalnızca ilk oluşturmada çalışır.
// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());
// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());Durum Ne Zaman Kullanılmamalı
Her değişkenin durum olması gerekmez. Türetilmiş değerler (total = items.reduce(…)), durumda saklanmak yerine oluşturma sırasında hesaplanmalıdır. Özelliklerden türetilen durum genellikle aşırı mühendislik belirtisidir.
Durumu Üst Seviyeye Taşıma
İki kardeş bileşenin durumu paylaşması gerektiğinde durumu ortak atalarına taşıyın ve özellik olarak aşağı aktarın. Bu, bağlam veya depo kullanmadan önce başvurulan temel React durum yönetimi yaklaşımıdır.
Hızlı Kontrol
setCount(prev => prev + 1) işlevsel biçimini setCount(count + 1) yerine neden kullanmalısınız?
Özet: useState
useState, [value, setter] döndürür. Başlangıç değeri türü belirler (veya açık bir jenerik kullanın). Ayarlayıcı yeniden oluşturmayı tetikler. Yeni durum eski duruma bağlı olduğunda işlevsel güncellemeler kullanın. Nesnelerde her zaman yeni nesnelere yayma yapın, hiçbir zaman mevcut nesneyi değiştirmeyin. Maliyetli hesaplamalar için tembel başlatma kullanın. Kardeş bileşenlerin durumu paylaşması gerektiğinde durumu ortak atalara taşıyın.
Sıkça Sorulan Sorular
“useState Hook'u: Durum ve Yeniden Oluşturmalar” dersi ücretsiz mi?
Evet — “useState Hook'u: Durum ve Yeniden Oluşturmalar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“useState Hook'u: Durum ve Yeniden Oluşturmalar” dersinde ne öğreneceğim?
Bir bileşene yerel durum eklemek için useState çağırın, ayarlayıcı işlevle durumu güncelleyin ve React'in ne zaman ve neden yeniden oluşturduğunu öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“useState Hook'u: Durum ve Yeniden Oluşturmalar” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- JSX: Söz Dizimi ve Dönüştürme
- İşlevsel Bileşenler ve Props
- useState Hook'u: Durum ve Yeniden Oluşturmalar
- Listeler, Anahtarlar ve Koşullu Oluşturma