Boru Hattını Idare Etmek: React'te Gerçek Zamanlı Veri Akışları

Boru Hattını Idare Etmek: React'te Gerçek Zamanlı Veri Akışları

Bana bir anlatayım, bir zamanlar gerçek zamanlı bir kripto ticaret panosu yapmaya çalıştım. Spoiler: felaket oldu. "Hey, React state'i harika yönetiyor ya?" diye düşündüm. Yanılmışım. Binlerce veri noktasını saniyede React'in reconciliation sürecinden geçirmek, bir şamandıradan kaynak su içmeye çalışmak gibiydi ama pipetle.

React yüksek frekanslı gerçek zamanlı veri için tasarlanmamış. Kullanıcı etkileşimleri, UI güncellemeleri, akıcı deneyimler için tasarlanmış. Ama işin aslı şu — gerçek zamanlı veri her yerde. Hisse senedi ticker'ları, IoT sensörleri, canlı analitik, oyun telemetrisi... Dashboard ya da monitoring aracı yapıyorsanız, bu sorunla yüz yüze geliyorsunuz demektir.

Öğrendiklerimi paylaşayım: React'i kullanıcının CPU'sunu eritmeden saniyede binlerce güncellemeyi nasıl idare edebiliriz.

Ring Buffer Yaklaşımı: İlk Savunma Hattı

React'e dokunmadan önce veri yönetimi hakkında düşünmemiz gerekiyor. Saniyede 5.000 websocket mesajı geliyorsa, hepsini saklamak istemezsiniz. İşte ring buffer devreye giriyor.

Ring buffer, dolduğunda en eski verinin üzerine yazan sabit boyutlu bir veri yapısı. Basit bir implementasyon:

```javascript
class RingBuffer {
constructor(size) {
this.size = size;
this.buffer = new Array(size);
this.head = 0;
this.count = 0;
}

push(item) {
this.buffer[this.head] = item;
this.head = (this.head + 1) % this.size;
this.count = Math.min(this.count + 1, this.size);
}

getItems() {
const result = [];
const start = (this.head - this.count + this.size) % this.size;
for (let i = 0; i < this.count; i++) {
result.push(this.buffer[(start + i) % this.size]);
}
return result;
}
}
```

Bu yaklaşım memory leak olmadan her zaman en güncel veriyle çalışmanızı sağlar. Ama burada çoğu geliştirici ilk hatasını yapıyor: her veri noktasında React state'ini doğrudan güncellemeye çalışıyorlar.

Güncellemeleri Toplu İşlemek: React Spam Sevmez

Acı bir gerçek: React'in reconciliation süreci saniyede 60 karelik sürekli güncellemeler için tasarlanmamış. Her state değişikliği bir re-render döngüsü tetikler. Binlerce güncelleme geldiğinde React, ne değiştiğini hesaplamakla geçiriyor zamanını, DOM'u güncellemek yerine.

Çözüm? Güncellemeleri agresifce batch'lemek.

```javascript
useEffect(() => {
const interval = setInterval(() => {
// Sadece 16ms'de bir (60fps) React'i güncelle
const latestData = ringBuffer.getItems();
setData(latestData);
}, 16);

return () => clearInterval(interval);
}, []);
```

Ama daha iyisi var. Tarayıcının yenileme hızıyla senkronize olmak için `requestAnimationFrame` kullanın:

```javascript
useEffect(() => {
const updateFrame = () => {
const latestData = ringBuffer.getItems();
setData(latestData);
animationFrameId = requestAnimationFrame(updateFrame);
};

let animationFrameId = requestAnimationFrame(updateFrame);
return () => cancelAnimationFrame(animationFrameId);
}, []);
```

Sadece bu yaklaşım render döngülerini %90 azaltıyor, görsel akıcılığı korurken.

OffscreenCanvas: Render'ı React'in Ellerinden Almak

İşler burda renkleniyor. Gerçekten yüksek frekanslı görselleştirme için (particle sistemler, gerçek zamanlı grafikler, dalga formu gösterimleri) React'i tamamen render döngüsünden çıkarmak istiyorsunuz.

OffscreenCanvas, web worker'larda render yapmanıza izin veriyor, React'in ana thread'inden tamamen ayrı. Saniyede 10.000 veri noktasını idare eden gerçek zamanlı bir grafik şöyle implement ettim:

```javascript
// worker.js
self.onmessage = function(e) {
const { canvas, data } = e.data;
const ctx = canvas.getContext('2d');

// React'i bloklamadan temizle ve yeniden çiz
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawChart(ctx, data);
};

// Ana component
const HighFrequencyChart = () => {
const canvasRef = useRef();

useEffect(() => {
const worker = new Worker('worker.js');
const canvas = canvasRef.current;

// Canvas'ı worker'a transfer et
worker.postMessage({ canvas, data: [] }, [canvas]);

const interval = setInterval(() => {
worker.postMessage({ data: ringBuffer.getItems() });
}, 16);

return () => {
clearInterval(interval);
worker.terminate();
};
}, []);

return ;
};
```

Bu yaklaşım tüm ağır render işini ana thread'ten alıyor. React uygulamanız devasa veri yükü altındayken bile responsive kalıyor.

Gerçek Dünya Kullanım Senaryoları

Finansal Ticaret Panelleri

Son zamanlarda 50+ varlığın fiyat hareketlerini aynı anda göstermesi gereken bir hisse senedi ticaret platformu üzerinde çalıştım. Ring buffer'lar veri depolama için, OffscreenCanvas render için kombine edince, UI tereyağında kayar gibi dururken 1ms'lik güncelleme süreleri elde ettik.

Önemli ipucu: Veri işlemeyi render'dan ayırın. Gelen veriyi Web Worker'da işleyin, sadece nihai render edilmiş frameleri React'e gönderin.

IoT Sensör İzleme

Bir akıllı şehir projesi için yüzlerce çevresel sensörden veri görselleştirmemiz gerekiyordu. Her sensör sıcaklık, nem ve hava kalitesi verilerini her birkaç milisaniyede bir gönderiyordu.

Hibrit bir yaklaşım kullandık: Veri toplama için ring buffer'lar, React güncellemeleri için requestAnimationFrame, ve gerçek görselleştirme katmanı için OffscreenCanvas üzerinden WebGL. Sonuç? Algılanabilir gecikme sıfır, saniyede 50.000+ veri noktası.

Canlı Oyun Analitiği

Başka bir projede mobil bir oyun için gerçek zamanlı analitik panosu yaptık. Oyuncu eylemleri, monetizasyon event'leri, oturum metrikleri — hepsini aynı anda takip etmemiz gerekiyordu.

Güncellemeleri batch'leyen özel bir event sistemi ve stratejik useMemo hook'ları ile ortalama render süremizi 45ms'den 8ms'ye indirdik, sürekli veri akışına rağmen.

Performans Optimizasyon İpuçları

1. **Her Şeyi Virtualize Edin**: Göstermediğiniz veri için DOM elementi render etmeyin. react-window gibi kütüphaneler liste virtualization'da yardımcı oluyor.

2. **Web Worker Kullanın**: Veri işlemeyi ana thread'ten alın. Basit işlemler bile — büyük JSON payload'larını parse etmek gibi — render'ı bloklayabiliyor.

3. **Re-render'ları Optimize Edin**: React.memo, useMemo, useCallback agresifce kullanın. React DevTools ile component'leri profile edin, gereksiz re-render'ları tespit edin.

4. **Alternatifleri Değerlendirin**: Aşırı yüksek frekanslı senaryolarda, farklı rendering modellere sahip Svelte veya Solid.js gibi framework'leri düşünün.

Özetle

React'te yüksek frekanslı gerçek zamanlı veri imkansız değil — sadece güncellemeleri nasıl ele alacağınız hakkında farklı düşünmeniz gerekiyor. Unutmayın: React UI içindir, veri pipeline'ı için değil. Sağlam veri katmanları kurun, agresifce batch'leyin, ve render işini ana thread'ten çıkarmaktan çekinmeyin.

Boru hattı hâlâ orada. Ama artık nasıl düzgün bir nozul yapacağınızı biliyorsunuz.

SSS

**S: React gerçekte saniyede kaç veri noktasını idare edebilir?**
C: Doğru batching ve optimizasyonla, basit UI değişiklikleri için React rahatlıkla saniyede 1.000-5.000 güncellemeyi idare edebilir. Karmaşık görselleştirme için render'ı OffscreenCanvas veya WebGL'ye devredin.

**S: Her zaman gerçek zamanlı veri için OffscreenCanvas mı kullanmalıyım?**
C: Her zaman değil. Pixel-perfect render kontrolüne ihtiyacınız olduğunda veya grafik, chart, particle sistemi gibi görselleştirme ağırlıklı uygulamalarda kullanın.

**S: React'te gerçek zamanlı veri için hangi kütüphaneleri önerirsiniz?**
C: Reaktif programlama pattern'leri için rxjs.org, ölçeklenebilir state management için recoiljs.org, ve gerçek zamanlı kullanıma optimize edilmiş hazır chart component'leri için recharts.org adreslerine göz atın.

**S: Yüksek frekanslı güncellemelerdeki performans sorunlarını nasıl debug ederim?**
C: Chrome DevTools Performance sekmesi ile bottleneck'ları bulun, React DevTools Profiler ile component render sürelerini takip edin, ve memory usage'ı izleyerek leak'leri erken yakalayın.