---
title: "React Kaputun Altında Gerçekte Nasıl Çalışır (Ve Zihinsel Modeliniz Neden Yanlış Olabilir?)"
url: https://blog.edumints.com/react-kaputun-altinda-gercekte-nasil-calisir-ve-zihinsel-modeliniz
category: "Web"
date: 2026-10-08T15:22:19.405Z
publisher: Edumints Blog
lang: tr-TR
source_name: "dev.to"
source_url: https://dev.to/smtahosin/how-react-actually-works-under-the-hood-and-why-your-mental-model-might-be-wrong-12b8
---

# React Kaputun Altında Gerçekte Nasıl Çalışır (Ve Zihinsel Modeliniz Neden Yanlış Olabilir?)

Hiç bir satır React kodu yazıp tarayıcıdaki sonuca bakarak "Bir dakika... bunu neden yaptı?" diye düşündünüz mü? Neredeyse her React geliştiricisinin en az bir kez yazdığı klasik kod parçası şudur:

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

  function handleClick() {
    setCount(count + 1);
    console.log(count);
  }

  return <button onClick={handleClick}>Count: {count}</button>;
}
```

Butona tıklarsınız; ekrandaki metin 0'dan 1'e güncellenir. Ancak tarayıcı konsolunda 1 değil, **0** yazar. Tekrar tıklarsınız; ekrandaki değer 2 olurken konsolda 1 yazar. Çıktı daima bir adım geridedir.

Buna genellikle "setState asenkron çalışır" cevabı verilir. Ancak state'i yalnızca "asenkron güncellenen bir değişken" olarak düşünmek, üretim ortamlarında yüzlerce hataya yol açan yanlış bir zihinsel modeldir. React'in gerçek veri yapılarını, Fiber ağacını ve kodunuzu ekrandaki piksellere nasıl dönüştürdüğünü anlamak gerekir.

## Zihinsel Model Tuzağı: Yeni Başlayanların Algısı vs. Gerçeklik

React öğrenirken zihnimiz genellikle şu basit modelle düşünür:
- `setCount(1)` çağrılır.
- React doğrudan HTML'e gider.
- `<button>Count: 0</button>` ifadesini `<button>Count: 1</button>` olarak değiştirir.
- Bitti.

React gerçekten böyle çalışsaydı son derece verimsiz olurdu. Her state güncellemesinde DOM'u doğrudan aramak ve değiştirmek yavaş ve maliyetlidir; çünkü tarayıcı stilleri yeniden hesaplamak, yerleşimi (reflow) tazelemek ve pikselleri yeniden boyamak (repaint) zorunda kalır.

Bunun yerine React, `setState` çağrıldığında DOM'u anında değiştirmek yerine gelecekte çalıştırılacak bir hesaplama planlar (**schedule**).

## Üç Aşama: Tetikleme, Render, Commit

React'in çalışma döngüsü lüks bir restoran mutfağına benzer:
- **Tetikleme Aşaması (Trigger Phase):** Müşteri siparişi verir.
- **Render Aşaması (Render Phase):** Şef yemeği mutfakta (arka planda, müşteriden gizli) pişirir ve tabağa hazırlar.
- **Commit Aşaması (Commit Phase):** Garson tabağı alır ve müşterinin masasına koyar.

Müşteri hazırlık aşamasında fikrini değiştirirse şef yarım kalan tabağı çöpe atabilir. Ancak tabak masaya ulaştığı an işlem kesinleşmiştir (**commit**).

Bu akış React mimarisinde şu adımlarla yürütülür:
- **1. Tetikleme Aşaması:** `dispatchSetState` bir güncelleme isteğini kuyruğa ekler.
- **2. Render Aşaması:** Saf JavaScript hesaplamaları yapılır; bileşen çağrılır ve Fiber ağacı karşılaştırılır (diffing).
- **3. Commit Aşaması:** Senkron DOM mutasyonları uygulanır (`document.createElement`, `appendChild`).
- **4. Tarayıcı Çizimi (Browser Paint):** Tarayıcı ekran piksellerini yeniden çizer.

## 1. Tetikleme Aşaması (The Trigger Phase)

`setCount(count + 1)` çağrıldığında bileşen fonksiyonunuz anında yeniden çalıştırılmaz. React, bir **Update Object** (Güncelleme Nesnesi) oluşturur ve bunu bileşenin dahili temsiline bağlı güncelleme kuyruğuna (update queue) ekler.

## Geliştirici Çıkarımları ve Öğrenme Notu

- **Snapshot Mantığı:** `console.log(count)` ifadesinin eski değeri vermesi, o fonksiyon kapsamının (closure) mevcut render döngüsündeki state anlık görüntüsüne bağlı olmasından kaynaklanır.
- **Hesaplama Odaklı Mimari:** State'i doğrudan mutasyona uğrayan bir değişken yerine planlanmış bir istek olarak ele almak, öngörülebilir ve hatasız React uygulamaları geliştirmenin temel anahtarıdır.

---

**Kaynak:** dev.to (https://dev.to/smtahosin/how-react-actually-works-under-the-hood-and-why-your-mental-model-might-be-wrong-12b8)
**Yayıncı:** [Edumints Blog](https://blog.edumints.com) · Alıntılarken bu URL'ye bağlantı verin: https://blog.edumints.com/react-kaputun-altinda-gercekte-nasil-calisir-ve-zihinsel-modeliniz