React Academy · Ders

Yaygın React Hatalarını Ayıklama

Eksik anahtar uyarılarını, tanımsız state hatalarını ve hydration hatalarını teşhis edin.

Yaygın React Hatalarını Ayıklama, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 4. 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste en yaygın React hatalarını teşhis edeceksiniz: eksik anahtar uyarıları, tanımsız durum hataları, çok fazla yeniden render işlemi ve hidrasyon uyuşmazlıkları.

Eksik Anahtar Uyarısı

React şu kaydı oluşturur: *Listedeki her alt öğe benzersiz bir "anahtar" özelliğine sahip olmalıdır.* Bu durum, bir dizi oluştururken `key` özelliği eklemediğinizde meydana gelir. Her liste öğesine kararlı ve benzersiz bir anahtar ekleyerek düzeltin.

// Bad
items.map(item => <li>{item.name}</li>)

// Good
items.map(item => <li key={item.id}>{item.name}</li>)

Tanımsız Özellikler Okunamıyor

Bu çökme çoğunlukla ilk render sırasında durumunuzun `undefined` olduğu anlamına gelir. Durumu her zaman güvenli bir varsayılan değerle başlatın (diziler için `[]`, nesneler için `{}`, kullanmadan önce kontrol ettiğiniz değerler için `null`).

// Bad — crashes if data is undefined
const [data, setData] = useState();
return <p>{data.name}</p>;

// Good
const [data, setData] = useState(null);
return data ? <p>{data.name}</p> : <p>Loading...</p>;

Çok Fazla Yeniden Render Hatası

React, bir bileşen sonsuz bir render döngüsüne girdiğinde *Çok fazla yeniden render işlemi* hatasını fırlatır — bunun nedeni genellikle render sırasında koşulsuz olarak `setState` çağırmanız veya her render işleminde tetiklenen bir özelliğe satır içi `() => setState(...)` işlevini doğrudan aktarmanızdır.

// Bad — setState called on every render
function Counter() {
  const [n, setN] = useState(0);
  setN(n + 1); // infinite loop!
  return <p>{n}</p>;
}

Çok Fazla Yeniden Render İşlemini Düzeltme

Durum güncellemelerini olay işleyicilerine veya useEffect içine taşıyın. Bir bileşenin gövdesinin en üst düzeyinde doğrudan setState çağrısı yapmayın.

// Good — update only on click
function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Hidrasyon Uyuşmazlığı Uyarısı

SSR uygulamalarında React şu uyarıyı verir: *Hidrasyon başarısız oldu çünkü ilk kullanıcı arayüzü sunucuda oluşturulan arayüzle eşleşmiyor.* Yaygın nedenler arasında render sırasında `Date.now()` veya `Math.random()` kullanılması ya da tarayıcı uzantılarının HTML eklemesi bulunur.

Hidrasyon Uyuşmazlıklarını Düzeltme

Dinamik değerleri (zaman damgaları ve rastgele ID'ler) `useEffect` içinde başlatılan bir `useState` içine taşıyın. Böylece sunucu her zaman statik bir değer oluşturur ve istemci, bağlamadan sonra değeri günceller.

const [ts, setTs] = useState('');
useEffect(() => {
  setTs(Date.now().toString());
}, []);
return <p>{ts}</p>;

Durum Hemen Güncellenmiyor

`setState` işleminin eşzamansız olduğunu unutmayın. Çağırdıktan hemen sonra durumu kaydetmek eski değeri gösterir. Güncellenmiş değeri görmek için, durum değişkenini bağımlılık olarak içeren bir useEffect içinde kaydedin.

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

function handleClick() {
  setCount(count + 1);
  console.log(count); // still old value!
}

useEffect(() => {
  console.log('updated:', count); // correct
}, [count]);

Özellik Değişikliğinde Bileşen Güncellenmiyor

Bir bileşen, bir özelliği değiştiğinde güncellenmiyorsa bir nesneyi veya diziyi yerinde değiştirip değiştirmediğinizi kontrol edin. React referans eşitliğini kullanır — mevcut bir nesneyi değiştirmek yeniden render işlemini tetiklemez.

// Bad — same reference, no re-render
const list = [];
list.push('item');
setList(list);

// Good — new array reference
setList([...list, 'item']);

Hata Katmanındaki Hataları Okuma

Bir React uygulaması geliştirme sırasında çöktüğünde tarayıcıda bir hata katmanı görünür. En alttaki **bileşen yığınını** okuyun — bu yığın, hataya neden olan bileşeni oluşturan tüm bileşenleri göstererek hatanın kaynağını açıkça ortaya koyar.

Hızlı Kontrol

'Çok fazla yeniden render işlemi' React hatasının en yaygın nedeni nedir?

Özet

Artık en yaygın React hatalarını düzeltebilirsiniz: listelere kararlı anahtarlar ekleyebilir, durumu güvenli şekilde başlatabilir, render sırasında setState kullanmaktan kaçınabilir, hidrasyon uyuşmazlıklarını yönetebilir ve hata katmanındaki bileşen yığınını okuyabilirsiniz.

Kurs Tamamlandı

Tebrikler! **React DevTools ve Hata Ayıklama** kursunu tamamladınız. Artık DevTools'u yükleyebilir, bileşen ağaçlarını ve durumları inceleyebilir, render işlemlerinin profilini oluşturabilir ve en sık görülen React çalışma zamanı hatalarını teşhis edebilirsiniz.

Sıkça Sorulan Sorular

“Yaygın React Hatalarını Ayıklama” dersi ücretsiz mi?

Evet — “Yaygın React Hatalarını Ayıklama” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Yaygın React Hatalarını Ayıklama” dersinde ne öğreneceğim?

Eksik anahtar uyarılarını, tanımsız state hatalarını ve hydration hatalarını teşhis edin. React 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.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React 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 4. dersidir.

“Yaygın React Hatalarını Ayıklama” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React 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

React DevTools'u Kurma ve Açma
Bileşen Ağaçlarını ve Props'ları İnceleme
Profiler Sekmesini Kullanma
Yaygın React Hatalarını Ayıklama

← React Academy Sayfasına Dön