{"id":29153,"date":"2025-09-08T12:30:32","date_gmt":"2025-09-08T09:30:32","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-ve-angularda-debouncing-ve-throttling-kod-ornekleriyle\/"},"modified":"2025-09-08T12:30:32","modified_gmt":"2025-09-08T09:30:32","slug":"react-ve-angularda-debouncing-ve-throttling-kod-ornekleriyle","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-ve-angularda-debouncing-ve-throttling-kod-ornekleriyle\/","title":{"rendered":"React ve Angular’da Debouncing ve Throttling: Kod \u00d6rnekleriyle"},"content":{"rendered":"

React ve Angular’da Debouncing ve Throttling: Kod \u00d6rnekleriyle<\/p>\n

Y\u00fcksek performansl\u0131 web uygulamalar\u0131 geli\u015ftirmek i\u00e7in performans optimizasyonu elzemdir. Kullan\u0131c\u0131 etkile\u015fimlerinin s\u0131kl\u0131\u011f\u0131, \u00f6zellikle form giri\u015fleri veya arama kutular\u0131 gibi durumlarda, gereksiz i\u015flem y\u00fck\u00fcne yol a\u00e7abilir. \u0130\u015fte bu noktada debouncing ve throttling teknikleri devreye girer. Bu makalede, React ve Angular’da debouncing ve throttling’i nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011frenecek, ger\u00e7ek d\u00fcnya senaryolar\u0131yla peki\u015ftirecek ve performans kar\u015f\u0131la\u015ft\u0131rmalar\u0131 yapaca\u011f\u0131z. Hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in pratik kod \u00f6rnekleri ve ileri d\u00fczey teknikler sunaca\u011f\u0131z.<\/p>\n

Debouncing ve Throttling Nedir?<\/h2>\n

Debouncing ve throttling, h\u0131zl\u0131 ve tekrarlayan olaylar\u0131 (\u00f6rne\u011fin, bir input alan\u0131na s\u00fcrekli yaz\u0131 yazma) kontrol alt\u0131na alarak performans\u0131 iyile\u015ftirmek i\u00e7in kullan\u0131lan iki farkl\u0131 tekniktir. \u00d6zetle, her ikisi de olaylar\u0131n s\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131r, ancak farkl\u0131 stratejiler kullan\u0131rlar. <\/p>\n

Debouncing:<\/strong> Bir olay belirli bir s\u00fcre boyunca tetiklenmedi\u011finde yaln\u0131zca bir kez \u00e7al\u0131\u015f\u0131r. \u00d6rne\u011fin, bir arama kutusu d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131 s\u00fcrekli yaz\u0131yorsa, debouncing her karakter giri\u015fi i\u00e7in arama yapmaz. Bunun yerine, kullan\u0131c\u0131 bir s\u00fcre yazmay\u0131 b\u0131rakt\u0131ktan sonra (\u00f6rne\u011fin, 500 milisaniye sonra) tek bir arama yapar. Bu sayede gereksiz arama istekleri \u00f6nlenir. <\/p>\n

Throttling:<\/strong> Bir olay belirli bir zaman aral\u0131\u011f\u0131nda sadece bir kez \u00e7al\u0131\u015f\u0131r. \u00d6rne\u011fin, bir scroll olay\u0131n\u0131 ele alal\u0131m. Throttling ile, sayfa kayd\u0131rma olay\u0131 her 100 milisaniyede bir, veya ba\u015fka bir zaman diliminde yaln\u0131zca bir kez i\u015flenir. Bu, y\u00fcksek performans gerektiren uygulamalarda, \u00f6zellikle s\u00fcrekli scroll olaylar\u0131n\u0131n yo\u011fun oldu\u011fu durumlarda, \u00f6nemli bir performans kazan\u0131m\u0131 sa\u011flar. <\/p>\n

React’te Debouncing Nas\u0131l Uygulan\u0131r?<\/h2>\n

React’te debouncing’i uygulaman\u0131n en yayg\u0131n yolu, lodash<\/code> k\u00fct\u00fcphanesini kullanmakt\u0131r. lodash.debounce<\/code> fonksiyonu, bir fonksiyonu belirli bir s\u00fcre boyunca bekleterek, sadece belirli bir zaman dilimi i\u00e7inde son tetiklenmeyi \u00e7al\u0131\u015ft\u0131r\u0131r. A\u015fa\u011f\u0131da basit bir \u00f6rnek verilmi\u015ftir:<\/p>\n

import _ from 'lodash';\n\nfunction MyComponent() {\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const handleSearchChange = _.debounce((query) => {\n    console.log('Arama yap\u0131l\u0131yor:', query);\n    \/\/ Arama API \u00e7a\u011fr\u0131s\u0131 burada yap\u0131l\u0131r\n  }, 500); \/\/ 500 milisaniye bekleme s\u00fcresi\n\n  return (\n    
\n       {\n          setSearchQuery(e.target.value);\n          handleSearchChange(e.target.value);\n        }}\n      \/>\n    <\/div>\n  );\n}<\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekte, kullan\u0131c\u0131 her karakter giri\u015fi i\u00e7in handleSearchChange<\/code> fonksiyonu \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r, ancak lodash.debounce<\/code> sayesinde arama sadece 500 milisaniyelik bir bekleme s\u00fcresinden sonra yap\u0131l\u0131r.  Bu, s\u00fcrekli arama isteklerini \u00f6nleyerek performans\u0131 optimize eder.<\/p>\n
React'te Debouncing'in Alternatif Uygulamalar\u0131<\/h3>\n
Lodash'a ba\u011f\u0131ml\u0131l\u0131k olmadan, debouncing'i kendi fonksiyonlar\u0131m\u0131z\u0131 yazarak da ger\u00e7ekle\u015ftirebiliriz.  Bu, daha fazla kontrol imkan\u0131 sunar ve gereksiz k\u00fct\u00fcphane y\u00fck\u00fcn\u00fc \u00f6nler.  A\u015fa\u011f\u0131da, basit bir debounce fonksiyonu \u00f6rne\u011fi bulunmaktad\u0131r:<\/p>\n
function debounce(func, wait) {\n  let timeout;\n  return function executedFunction(...args) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n\n\/\/ Kullan\u0131m \u00f6rne\u011fi:\nconst debouncedHandleSearchChange = debounce((query) => {\n  console.log('Arama yap\u0131l\u0131yor:', query);\n}, 500);<\/pre>\n
<\/code><\/p>\n
Bu fonksiyon, verilen fonksiyonu (func<\/code>) belirtilen bekleme s\u00fcresi (wait<\/code>) kadar geciktirir.  Her \u00e7a\u011fr\u0131da \u00f6nceki zamanlay\u0131c\u0131 temizlenir ve yeni bir zamanlay\u0131c\u0131 ba\u015flat\u0131l\u0131r, b\u00f6ylece sadece son \u00e7a\u011fr\u0131 i\u015flenir. Bu y\u00f6ntem, daha fazla \u00f6zelle\u015ftirme olana\u011f\u0131 sa\u011flarken, lodash'\u0131n sa\u011flad\u0131\u011f\u0131 ek \u00f6zelliklerden yoksundur.<\/p>\n
Angular'da Throttling Nas\u0131l Uygulan\u0131r?<\/h2>\n
Angular'da throttling i\u00e7in RxJS k\u00fct\u00fcphanesini kullanabiliriz. RxJS, reaktif programlama i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r ve throttleTime<\/code> operat\u00f6r\u00fc ile olaylar\u0131 belirli bir zaman aral\u0131\u011f\u0131nda s\u0131n\u0131rlayabiliriz.  A\u015fa\u011f\u0131da basit bir \u00f6rnek verilmi\u015ftir:<\/p>\n
import { Component } from '@angular\/core';\nimport { fromEvent, Subject } from 'rxjs';\nimport { throttleTime } from 'rxjs\/operators';\n\n\n@Component({\n  selector: 'app-my-component',\n  template: <\/code>\n})\nexport class MyComponent {\n  searchQuery$: Subject = new Subject();\n\n  constructor() {\n      fromEvent(document, 'scroll')\n      .pipe(throttleTime(250))\n      .subscribe(() => {\n          console.log('Scroll event throttled');\n          \/\/ scroll event i\u015flenmesi\n      });\n\n      this.searchQuery$\n          .pipe(throttleTime(500))\n          .subscribe(query => {\n              console.log('Search query:', query);\n              \/\/ Arama API \u00e7a\u011fr\u0131s\u0131\n          });\n  }\n\n  onInput(event: any){\n    this.searchQuery$.next(event.target.value);\n  }\n}<\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekte, throttleTime(500)<\/code> operat\u00f6r\u00fc, input alan\u0131ndaki de\u011fi\u015fiklikleri 500 milisaniyede bir i\u015fler.  Bu, kullan\u0131c\u0131 s\u00fcrekli yazarken bile arama isteklerinin s\u0131kl\u0131\u011f\u0131n\u0131 azalt\u0131r.  Ayr\u0131ca, scroll olay\u0131 da 250 milisaniyelik bir aral\u0131kla i\u015flenmektedir.  RxJS'in sa\u011flad\u0131\u011f\u0131 g\u00fc\u00e7l\u00fc operat\u00f6rler ile daha karma\u015f\u0131k throttling mekanizmalar\u0131 da kolayca olu\u015fturulabilir.<\/p>\n
Angular'da Throttling'in Alternatif Uygulamalar\u0131<\/h3>\n
RxJS kullanmadan Angular'da throttling uygulamak, daha karma\u015f\u0131k ve performans a\u00e7\u0131s\u0131ndan daha az verimli olabilir. Ancak, basit senaryolarda setTimeout<\/code> fonksiyonunu kullanarak basit bir throttling mekanizmas\u0131 olu\u015fturabiliriz.  Bu yakla\u015f\u0131m, RxJS \u00f6\u011frenme e\u015fi\u011fini a\u015fmak istemeyen geli\u015ftiriciler i\u00e7in bir alternatif olabilir, ancak RxJS'in sundu\u011fu performans ve esneklik avantajlar\u0131ndan yoksundur.  Karma\u015f\u0131k senaryolarda RxJS kullanmak tercih edilmelidir.<\/p>\n
Ger\u00e7ek D\u00fcnya Senaryolar\u0131<\/h2>\n
Debouncing ve throttling, bir\u00e7ok ger\u00e7ek d\u00fcnya senaryosunda performans optimizasyonu i\u00e7in kullan\u0131labilir.  \u0130\u015fte birka\u00e7 \u00f6rnek:<\/p>\n