React Developer Tools ile React Bileşenlerinde Hata Ayıklama (Debugging)

React projeleri büyüdükçe, bileşenlerin karmaşıklığı da artar.
Küçük bir state değişimi bile beklenmedik hatalara veya performans düşüşlerine yol açabilir.
İşte burada React Developer Tools devreye girer.

Bu eklenti, React bileşen ağacını keşfetmenizi, props ve state değerlerini canlı olarak izlemenizi ve render performansını analiz etmenizi sağlar.

---

🎯 Bu Rehberde Ne Öğreneceksiniz?

• React Developer Tools eklentisini (Chrome / Firefox) kurmak
• Bileşenlerin props, state ve context değerlerini gerçek zamanlı izlemek
• Profiler sekmesi ile render sürelerini ölçmek
• memo kullanarak yavaş bileşenleri optimize etmek

---

⚙️ Aşama 1 – React Developer Tools Kurulumu

Bu adımda tarayıcınıza React Developer Tools eklentisini yükleyerek geliştirici araçlarını genişleteceksiniz.

🔧 Eklentiyi Tarayıcıya Ekleyin

1. Chrome Web Mağazası veya Firefox Eklentileri sayfasından React Developer Tools uzantısını kurun.
2. Eklenti, geliştirici konsoluna iki yeni sekme ekler:
   • Components (Bileşenler)
   • Profiler (Performans Analizi)

🎨 Eklenti Simge Renkleri

Renk	Anlam
⚪ Gri	Sayfada React uygulaması yok
🟢 Mavi / Yeşil	Production modda React çalışıyor
🔴 Kırmızı / Beyaz	Development modda React aktif (bizim test modumuz)

Tarayıcıda http://localhost:3000 üzerinde çalışan projenizi açın.
Sağ tıklayıp “İncele” (F12) dediğinizde Components ve Profiler sekmelerini göreceksiniz.

---

🧠 Aşama 2 – Metin Analizörü Uygulaması Oluşturma

React Developer Tools’un işlevlerini test etmek için bir metin analizörü uygulaması yazalım.

🧩 1. Context ve State Oluşturma

// src/App.js
import React, { createContext, useState } from 'react';
import './App.css';

export const MetinContext = createContext();
MetinContext.displayName = 'MetinContext';

function App() {
  const [metin, setMetin] = useState('');

  return (
    <MetinContext.Provider value={metin}>
      <div className="wrapper">
        <label htmlFor="metin">
          Metninizi Buraya Yazın:
          <br />
          <textarea
            id="metin"
            rows="10"
            cols="100"
            onChange={(e) => setMetin(e.target.value)}
          ></textarea>
        </label>
      </div>
    </MetinContext.Provider>
  );
}

export default App;

Bu kod, girilen metni useState ile saklar ve MetinContext aracılığıyla alt bileşenlere aktarır. React Developer Tools’ta artık MetinContext.Provider bileşeni ve içindeki değer görülebilir.

---

🧮 Aşama 3 – Bilgi Bileşenleriyle Props ve Context İzleme

📊 Karakter Sayacı Bileşeni

// src/components/KarakterSayaci/KarakterSayaci.js
import React, { useContext } from 'react';
import { MetinContext } from '../App/App';

export default function KarakterSayaci({ goster }) {
  const metin = useContext(MetinContext);
  if (!goster) return null;

  return <div>Karakter Sayısı: {metin.length}</div>;
}

useContext, MetinContext’ten gelen değeri alır. React Developer Tools ile bu bileşenin props ve context değerlerini canlı görebilirsiniz.

---

🔍 Aşama 4 – Profiler Sekmesiyle Performans Analizi

⚡ Yeniden Oluşturma Vurgusunu Açın

React Developer Tools > ⚙️ Ayarlar > General > "Highlight updates when components render" seçeneğini aktif edin.

Metin girişi yaptığınızda, yeniden render olan bileşenlerin çerçevesi renkle vurgulanacaktır. Bu sayede hangi bileşenlerin gereksiz yeniden çizildiğini (re-render) kolayca fark edebilirsiniz.

📈 Profiler ile Render Süresi Ölçümü

1. Profiler sekmesini açın.

2. Sol üstteki mavi daireye tıklayıp kaydı başlatın.

3. Uygulamada birkaç işlem yapın (örneğin uzun bir metin yapıştırın).

4. Kaydı durdurun.

React Developer Tools, bileşenlerin render sürelerini gösteren bir flamegraph (alev grafiği) oluşturacaktır.

💡 Örneğin KarakterHaritasi bileşeni çok karmaşık bir hesaplama yapıyorsa, diğer bileşenlere göre daha uzun render süresi gösterebilir.

🧠 Gereksiz Yeniden Render’ları Önleme (Memoization)

Performans sorunu yaratan bileşenleri optimize etmek için React.memo kullanın.

// src/components/KarakterHaritasi/KarakterHaritasi.js
import React, { memo, useContext } from 'react';
import { MetinContext } from '../App/App';

function KarakterHaritasi({ goster }) {
  const metin = useContext(MetinContext);
  if (!goster) return null;

  const itemize = (text) =>
    Object.entries(
      text.split('').reduce((acc, ch) => {
        const c = ch.toLowerCase();
        acc[c] = (acc[c] || 0) + 1;
        return acc;
      }, {})
    ).sort((a, b) => b[1] - a[1]);

  return (
    <div>
      Karakter Haritası:
      {itemize(metin).map(([harf, adet]) => (
        <div key={harf}>
          {harf}: {adet}
        </div>
      ))}
    </div>
  );
}

export default memo(KarakterHaritasi);

React.memo, bileşenin props veya context değişmediği sürece yeniden oluşturulmasını engeller. Profiler’da bu bileşen artık gri olarak görünür — yani re-render edilmemiştir.

---

🙋‍♀️ Sıkça Sorulan Sorular (SSS)

1. React Developer Tools'u sadece yerelde mi kullanabilirim?

Hayır. Herhangi bir sitede çalışır, ancak production modda kod sıkıştırıldığı için bileşen isimleri gizlenir.

2. Profiler'da “The parent component rendered” uyarısı ne anlama gelir?

Bu, bileşenin kendi verisi değişmemesine rağmen, üst bileşenin yeniden render olduğu için onun da yeniden oluşturulduğunu belirtir. Çözüm: React.memo, useCallback veya useMemo kullanarak yeniden oluşturmayı önleyin.

3. useState Hook’unun adını değiştirebilir miyim?

Hayır, ancak özel Hook’lar tanımlayıp useDebugValue ile anlamlı etiketler ekleyebilirsiniz.

4. console.log ile React Developer Tools arasında fark nedir?

console.log sadece anlık değerleri gösterir. React Developer Tools ise bileşen ağacını, state/props değişimlerini ve performans metriklerini etkileşimli olarak sunar.

5. memo kullanmak her zaman iyi mi?

Hayır. Küçük bileşenlerde gereksiz memo kullanımı, kontrol yükü oluşturabilir. Sadece açık performans problemi varsa tercih edilmelidir.

---

🚀 Sonuç

React Developer Tools, React bileşenlerini analiz etmek ve optimize etmek için vazgeçilmezdir. Bu araç sayesinde: ✅ Hataları hızlıca bulabilir, ✅ State/Props değişimlerini gerçek zamanlı izleyebilir, ✅ Performans darboğazlarını tespit edip memo ile optimize edebilirsiniz.

💡 Projelerinizi Rabisu Bulut platformunda barındırarak performans testlerinizi profesyonel ortamda yapabilirsiniz.