React ve Angular’da Debouncing ve Throttling: Kod Örnekleriyle

React ve Angular’da Debouncing ve Throttling: Kod Örnekleriyle

Yüksek performanslı web uygulamaları geliştirmek için performans optimizasyonu elzemdir. Kullanıcı etkileşimlerinin sıklığı, özellikle form girişleri veya arama kutuları gibi durumlarda, gereksiz işlem yüküne yol açabilir. İşte bu noktada debouncing ve throttling teknikleri devreye girer. Bu makalede, React ve Angular’da debouncing ve throttling’i nasıl uygulayacağınızı adım adım öğrenecek, gerçek dünya senaryolarıyla pekiştirecek ve performans karşılaştırmaları yapacağız. Hem yeni başlayanlar hem de deneyimli geliştiriciler için pratik kod örnekleri ve ileri düzey teknikler sunacağız.

Debouncing ve Throttling Nedir?

Debouncing ve throttling, hızlı ve tekrarlayan olayları (örneğin, bir input alanına sürekli yazı yazma) kontrol altına alarak performansı iyileştirmek için kullanılan iki farklı tekniktir. Özetle, her ikisi de olayların sıklığını azaltır, ancak farklı stratejiler kullanırlar.

Debouncing: Bir olay belirli bir süre boyunca tetiklenmediğinde yalnızca bir kez çalışır. Örneğin, bir arama kutusu düşünün. Kullanıcı sürekli yazıyorsa, debouncing her karakter girişi için arama yapmaz. Bunun yerine, kullanıcı bir süre yazmayı bıraktıktan sonra (örneğin, 500 milisaniye sonra) tek bir arama yapar. Bu sayede gereksiz arama istekleri önlenir.

Throttling: Bir olay belirli bir zaman aralığında sadece bir kez çalışır. Örneğin, bir scroll olayını ele alalım. Throttling ile, sayfa kaydırma olayı her 100 milisaniyede bir, veya başka bir zaman diliminde yalnızca bir kez işlenir. Bu, yüksek performans gerektiren uygulamalarda, özellikle sürekli scroll olaylarının yoğun olduğu durumlarda, önemli bir performans kazanımı sağlar.

React’te Debouncing Nasıl Uygulanır?

React’te debouncing’i uygulamanın en yaygın yolu, lodash kütüphanesini kullanmaktır. lodash.debounce fonksiyonu, bir fonksiyonu belirli bir süre boyunca bekleterek, sadece belirli bir zaman dilimi içinde son tetiklenmeyi çalıştırır. Aşağıda basit bir örnek verilmiştir:

import _ from 'lodash';

function MyComponent() {
  const [searchQuery, setSearchQuery] = useState('');

  const handleSearchChange = _.debounce((query) => {
    console.log('Arama yapılıyor:', query);
    // Arama API çağrısı burada yapılır
  }, 500); // 500 milisaniye bekleme süresi

  return (
    

       {
          setSearchQuery(e.target.value);
          handleSearchChange(e.target.value);
        }}
      />
    
  );
}

Bu örnekte, kullanıcı her karakter girişi için handleSearchChange fonksiyonu çalıştırılır, ancak lodash.debounce sayesinde arama sadece 500 milisaniyelik bir bekleme süresinden sonra yapılır. Bu, sürekli arama isteklerini önleyerek performansı optimize eder.

React'te Debouncing'in Alternatif Uygulamaları

Lodash'a bağımlılık olmadan, debouncing'i kendi fonksiyonlarımızı yazarak da gerçekleştirebiliriz. Bu, daha fazla kontrol imkanı sunar ve gereksiz kütüphane yükünü önler. Aşağıda, basit bir debounce fonksiyonu örneği bulunmaktadır:

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// Kullanım örneği:
const debouncedHandleSearchChange = debounce((query) => {
  console.log('Arama yapılıyor:', query);
}, 500);

Bu fonksiyon, verilen fonksiyonu (func) belirtilen bekleme süresi (wait) kadar geciktirir. Her çağrıda önceki zamanlayıcı temizlenir ve yeni bir zamanlayıcı başlatılır, böylece sadece son çağrı işlenir. Bu yöntem, daha fazla özelleştirme olanağı sağlarken, lodash'ın sağladığı ek özelliklerden yoksundur.

Angular'da Throttling Nasıl Uygulanır?

Angular'da throttling için RxJS kütüphanesini kullanabiliriz. RxJS, reaktif programlama için güçlü bir araçtır ve throttleTime operatörü ile olayları belirli bir zaman aralığında sınırlayabiliriz. Aşağıda basit bir örnek verilmiştir:

import { Component } from '@angular/core';
import { fromEvent, Subject } from 'rxjs';
import { throttleTime } from 'rxjs/operators';


@Component({
  selector: 'app-my-component',
  template: 
})
export class MyComponent {
  searchQuery$: Subject = new Subject();

  constructor() {
      fromEvent(document, 'scroll')
      .pipe(throttleTime(250))
      .subscribe(() => {
          console.log('Scroll event throttled');
          // scroll event işlenmesi
      });

      this.searchQuery$
          .pipe(throttleTime(500))
          .subscribe(query => {
              console.log('Search query:', query);
              // Arama API çağrısı
          });
  }

  onInput(event: any){
    this.searchQuery$.next(event.target.value);
  }
}

Bu örnekte, throttleTime(500) operatörü, input alanındaki değişiklikleri 500 milisaniyede bir işler. Bu, kullanıcı sürekli yazarken bile arama isteklerinin sıklığını azaltır. Ayrıca, scroll olayı da 250 milisaniyelik bir aralıkla işlenmektedir. RxJS'in sağladığı güçlü operatörler ile daha karmaşık throttling mekanizmaları da kolayca oluşturulabilir.

Angular'da Throttling'in Alternatif Uygulamaları

RxJS kullanmadan Angular'da throttling uygulamak, daha karmaşık ve performans açısından daha az verimli olabilir. Ancak, basit senaryolarda setTimeout fonksiyonunu kullanarak basit bir throttling mekanizması oluşturabiliriz. Bu yaklaşım, RxJS öğrenme eşiğini aşmak istemeyen geliştiriciler için bir alternatif olabilir, ancak RxJS'in sunduğu performans ve esneklik avantajlarından yoksundur. Karmaşık senaryolarda RxJS kullanmak tercih edilmelidir.

Gerçek Dünya Senaryoları

Debouncing ve throttling, birçok gerçek dünya senaryosunda performans optimizasyonu için kullanılabilir. İşte birkaç örnek:

• Arama kutuları: Her karakter girişi için API çağrısı yapmak yerine, debouncing kullanarak arama isteklerini geciktirebilir ve gereksiz istekleri önleyebilirsiniz. Bu, sunucu üzerindeki yükü azaltır ve kullanıcı deneyimini iyileştirir.
• Harita uygulamaları: Kullanıcının harita üzerinde hareket etmesi sırasında sürekli konum güncellemeleri yapmak yerine, throttling kullanarak güncelleme sıklığını sınırlayabilirsiniz. Bu, pil ömrünü korur ve performansı artırır.
• Form doğrulaması: Her karakter girişi için form doğrulaması yapmak yerine, debouncing kullanarak doğrulamayı belirli bir bekleme süresinden sonra gerçekleştirebilirsiniz. Bu, kullanıcı deneyimini iyileştirir ve performansı artırır.
• Olay dinleyicileri: resize, scroll gibi sıklıkla tetiklenen olaylar için throttling kullanarak olay işleme sıklığını azaltabilirsiniz.

Performans Karşılaştırması

Debouncing ve throttling'in performans etkisi, uygulamanın yapısına ve olayların sıklığına bağlıdır. Ancak genel olarak, her ikisi de gereksiz işlem yükünü azaltarak performansı iyileştirir. Özellikle yüksek frekansta tetiklenen olaylarda (örneğin, hızlı yazı yazma, sürekli scroll) etkileri daha belirgindir. Aşağıdaki tabloda, farklı yaklaşımların performans karşılaştırmasını özetlemeye çalıştık. Gerçek performans değerleri, uygulamaya ve donanıma bağlı olarak değişebilir.

İleri Düzey Teknikler

Debouncing ve throttling'in temel kullanımını anladıktan sonra, daha gelişmiş teknikleri keşfedebilirsiniz. Örneğin, farklı bekleme süreleri kullanarak veya olaylara bağlı olarak dinamik olarak bekleme süresini ayarlayarak daha ince ayarlı kontrol sağlayabilirsiniz. Ayrıca, debouncing ve throttling'i birleştirerek daha karmaşık olay yönetimi stratejileri geliştirebilirsiniz. Örneğin, bir arama kutusu için, kullanıcı yazmayı bıraktıktan sonra debouncing ile arama yapabilir, ancak arama süreci uzun sürüyorsa throttling ile arama sonuçlarının güncellenme sıklığını sınırlayabilirsiniz.

Ayrıca, performans analizi araçlarını kullanarak uygulamanızdaki performans darboğazlarını tespit edebilir ve debouncing veya throttling'in etkinliğini ölçebilirsiniz.

Sonuç

Debouncing ve throttling, yüksek performanslı React ve Angular uygulamaları geliştirmek için önemli tekniklerdir. Bu makalede, bu tekniklerin temel kavramlarını, uygulamalı örneklerini ve ileri düzey kullanımını ele aldık. Doğru şekilde kullanıldığında, debouncing ve throttling, kullanıcı deneyimini iyileştirir, kaynak tüketimini azaltır ve uygulamanızın genel performansını artırır. Daha fazla bilgi için https://fatihsoysal.com inceleyebilirsiniz.

Sıkça Sorulan Sorular

• Debouncing ve throttling arasında ne fark var? Debouncing, belirli bir süre içinde son olayı işlerken, throttling belirli bir zaman aralığında olayları düzenli olarak işler.
• Hangi tekniği ne zaman kullanmalıyım? Hızlı ve sık tekrarlayan olaylar için throttling, bir süre bekleme gerektiren olaylar için debouncing daha uygundur.
• Debouncing ve throttling performansı nasıl etkiler? Gereksiz işlem yükünü azaltarak performansı artırırlar.
• RxJS kullanmanın avantajları nelerdir? RxJS, daha temiz ve daha okunabilir kod yazılmasını sağlar ve güçlü operatörler sunarak karmaşık olay yönetimi stratejilerini kolaylaştırır.
• Kendi debounce veya throttle fonksiyonumu yazmalı mıyım? Basit senaryolar için yazabilirsiniz, ancak daha karmaşık senaryolarda lodash veya RxJS kullanmak daha verimli ve sürdürülebilirdir.

Yazar: Fatih Soysal