Modern web uygulamalar\u0131nda, \u00f6zellikle React tabanl\u0131 arama i\u015flevlerinde, kullan\u0131c\u0131lar\u0131n her tu\u015f vuru\u015funda sunucuya yeni bir API \u00e7a\u011fr\u0131s\u0131 yap\u0131lmas\u0131 yayg\u0131n bir performans sorununa yol a\u00e7abilir. Bu durum, hem sunucu \u00fczerinde gereksiz y\u00fck olu\u015fturur hem de kullan\u0131c\u0131 deneyimini olumsuz etkileyen gecikmelere neden olabilir. Debouncing, bu t\u00fcr a\u015f\u0131r\u0131 API \u00e7a\u011fr\u0131lar\u0131n\u0131 etkili bir \u015fekilde y\u00f6netmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir tekniktir. Bu makalede, React arama fonksiyonlar\u0131nda debouncing’in ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve nas\u0131l uygulanaca\u011f\u0131n\u0131 detayl\u0131 kod \u00f6rnekleriyle inceleyerek, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini nas\u0131l iyile\u015ftirebilece\u011finizi g\u00f6sterece\u011fiz.<\/p>\n
Bir\u00e7ok web uygulamas\u0131nda, kullan\u0131c\u0131 bir arama kutusuna yaz\u0131 yazmaya ba\u015flad\u0131\u011f\u0131nda, her karakter giri\u015fiyle birlikte an\u0131nda sonu\u00e7lar\u0131 g\u00fcncellemek istenir. Bu, genellikle kullan\u0131c\u0131n\u0131n girdi\u011fi metni bir API’ye g\u00f6ndererek ilgili verileri \u00e7ekmek anlam\u0131na gelir. Ancak, kullan\u0131c\u0131 h\u0131zl\u0131 yazd\u0131\u011f\u0131nda veya klavyede tak\u0131l\u0131 kald\u0131\u011f\u0131nda, saniyeler i\u00e7inde onlarca API \u00e7a\u011fr\u0131s\u0131 yap\u0131labilir. Bu durum, ciddi performans ve maliyet sorunlar\u0131na yol a\u00e7ar.<\/p>\n
Kullan\u0131c\u0131n\u0131n her tu\u015f vuru\u015funda yap\u0131lan API \u00e7a\u011fr\u0131lar\u0131, a\u011f gecikmeleri nedeniyle arama sonu\u00e7lar\u0131n\u0131n yava\u015f y\u00fcklenmesine veya anlams\u0131z ara sonu\u00e7lar\u0131n g\u00f6sterilmesine neden olabilir. Bu durum, uygulaman\u0131n “tak\u0131l\u0131yormu\u015f” hissi vermesine ve genel kullan\u0131c\u0131 memnuniyetini d\u00fc\u015f\u00fcrmesine yol a\u00e7ar. Kullan\u0131c\u0131lar, h\u0131zl\u0131 ve ak\u0131c\u0131 bir arama deneyimi beklerler.<\/p>\n
Her tu\u015f vuru\u015funda sunucuya yap\u0131lan \u00e7a\u011fr\u0131lar, sunucunun gereksiz yere me\u015fgul olmas\u0131na neden olur. Bu, sunucu kaynaklar\u0131n\u0131n (CPU, bellek, bant geni\u015fli\u011fi) israf edilmesine ve yo\u011fun trafik alt\u0131nda sunucunun yava\u015flamas\u0131na veya \u00e7\u00f6kmesine bile yol a\u00e7abilir. \u00d6zellikle bulut tabanl\u0131 hizmetlerde, API \u00e7a\u011fr\u0131s\u0131 say\u0131s\u0131 do\u011frudan maliyetlere yans\u0131yabilir, bu da i\u015fletmeler i\u00e7in beklenmedik harcamalar anlam\u0131na gelir.<\/p>\n
Taray\u0131c\u0131 taraf\u0131nda, a\u015f\u0131r\u0131 API \u00e7a\u011fr\u0131lar\u0131 ve bu \u00e7a\u011fr\u0131lar\u0131n sonu\u00e7lar\u0131n\u0131 i\u015fleme, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) me\u015fgul edebilir. Bu da UI’\u0131n donmas\u0131na, animasyonlar\u0131n tak\u0131lmas\u0131na ve genel uygulama performans\u0131n\u0131n d\u00fc\u015fmesine neden olur. \u00d6zellikle d\u00fc\u015f\u00fck performansl\u0131 cihazlarda bu etkiler daha belirgin hale gelir.<\/p>\n
React’te bir arama bile\u015feni genellikle bir input eleman\u0131 ve bu input’un de\u011ferini y\u00f6neten bir state i\u00e7erir. Kullan\u0131c\u0131 input’a her karakter girdi\u011finde, Debouncing, belirli bir olay\u0131n (\u00f6rne\u011fin, klavye giri\u015fi, pencere boyutland\u0131rma) \u00e7ok s\u0131k tetiklenmesini engellemek i\u00e7in kullan\u0131lan bir teknik veya tasar\u0131m desenidir. Temel amac\u0131, bir fonksiyonun yaln\u0131zca belirli bir s\u00fcre boyunca ba\u015fka bir tetikleme olmad\u0131\u011f\u0131nda \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamakt\u0131r. Yani, olaylar aras\u0131ndaki duraklamalar\u0131 alg\u0131lar ve sadece bu duraklama ger\u00e7ekle\u015fti\u011finde fonksiyonu \u00e7a\u011f\u0131r\u0131r.<\/p>\n Debouncing ve throttling s\u0131k\u00e7a kar\u0131\u015ft\u0131r\u0131lan iki benzer tekniktir, ancak farkl\u0131 senaryolar i\u00e7in optimize edilmi\u015flerdir:<\/p>\n K\u0131sacas\u0131, debouncing “en son ne zaman?” sorusuna odaklan\u0131rken, throttling “ne s\u0131kl\u0131kla?” sorusuna odaklan\u0131r.<\/p>\n Debouncing’in temel mant\u0131\u011f\u0131, bir zamanlay\u0131c\u0131 (timer) kullanmakt\u0131r. Bir olay tetiklendi\u011finde, fonksiyonu hemen \u00e7al\u0131\u015ft\u0131rmak yerine bir zamanlay\u0131c\u0131 ba\u015flat\u0131l\u0131r. E\u011fer bu zamanlay\u0131c\u0131 s\u00fcresi dolmadan ayn\u0131 olay tekrar tetiklenirse, mevcut zamanlay\u0131c\u0131 iptal edilir ve yeni bir zamanlay\u0131c\u0131 ba\u015flat\u0131l\u0131r. Fonksiyon, ancak zamanlay\u0131c\u0131n\u0131n s\u00fcresi doldu\u011funda ve bu s\u00fcre i\u00e7inde ba\u015fka bir tetikleme olmad\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r.<\/p>\n Bir debounce fonksiyonu genellikle y\u00fcksek dereceli bir fonksiyondur (higher-order function). Yani, bir fonksiyonu arg\u00fcman olarak al\u0131r ve debounced edilmi\u015f yeni bir fonksiyon d\u00f6nd\u00fcr\u00fcr. Bu, orijinal fonksiyonun davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirmeden ona debouncing yetene\u011fi kazand\u0131r\u0131r.<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, React uygulamalar\u0131nda debouncing uygulamak i\u00e7in genellikle \u00d6ncelikle, debouncing uygulamadan \u00f6nce basit bir arama bile\u015feni olu\u015ftural\u0131m. Bu bile\u015fen, kullan\u0131c\u0131n\u0131n girdi\u011fi metni tutacak bir state'e ve bu metin de\u011fi\u015fti\u011finde tetiklenecek bir API \u00e7a\u011fr\u0131s\u0131 sim\u00fclasyonuna sahip olacak.<\/p>\n Arama Terimi: {searchTerm}<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, her Debouncing'i React'te uygulaman\u0131n en yayg\u0131n yolu, iki ayr\u0131 state kullanmakt\u0131r: biri input'un anl\u0131k de\u011ferini tutarken, di\u011feri debounced edilmi\u015f de\u011feri tutar. Debouncing mant\u0131\u011f\u0131n\u0131 tekrar kullan\u0131labilir bir hook i\u00e7ine sarmak, kodunuzu daha temiz ve mod\u00fcler hale getirir. \u0130\u015fte basit bir <\/code><\/p>\n \u015eimdi bu Anl\u0131k Arama Terimi: {searchTerm}<\/p>\n Debounce Edilmi\u015f Arama Terimi: {debouncedSearchTerm}<\/p>\n <\/code><\/p>\n Bu yap\u0131da, Debouncing uygularken dikkate alman\u0131z gereken baz\u0131 \u00f6nemli noktalar ve en iyi uygulamalar bulunmaktad\u0131r.<\/p>\n Debouncing, istemci taraf\u0131nda a\u015f\u0131r\u0131 y\u00fck\u00fc azalt\u0131rken, sunucu taraf\u0131nda da benzer optimizasyonlar yap\u0131labilir. \u00d6rne\u011fin, sunucu taraf\u0131nda da belirli bir kullan\u0131c\u0131dan gelen \u00e7ok s\u0131k istekleri k\u0131s\u0131tlamak (rate limiting) iyi bir g\u00fcvenlik ve performans uygulamas\u0131d\u0131r. Ayr\u0131ca, veritaban\u0131 sorgular\u0131n\u0131n indekslenmesi ve optimize edilmesi de genel performans\u0131 art\u0131r\u0131r.<\/p>\n Debounced API \u00e7a\u011fr\u0131s\u0131 s\u0131ras\u0131nda kullan\u0131c\u0131ya g\u00f6rsel geri bildirim sa\u011flamak \u00f6nemlidir. Arama sonu\u00e7lar\u0131 y\u00fcklenirken bir \"loading\" g\u00f6stergesi veya spinner kullanmak, kullan\u0131c\u0131n\u0131n uygulaman\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamas\u0131na yard\u0131mc\u0131 olur ve bekleme s\u00fcresini daha az rahats\u0131z edici hale getirir. Bu, Y\u00fckleniyor...<\/p>}\n \/\/ ...\n);\n<\/pre>\n <\/code><\/p>\n Debouncing tek \u00e7\u00f6z\u00fcm de\u011fildir ve baz\u0131 durumlarda farkl\u0131 stratejiler veya ek optimizasyonlar gerekebilir.<\/p>\n Throttling, bir fonksiyonun belirli bir zaman aral\u0131\u011f\u0131nda en fazla bir kez \u00e7al\u0131\u015fmas\u0131n\u0131 istedi\u011finiz durumlarda tercih edilir. \u00d6rne\u011fin:<\/p>\n Bu senaryolarda, her olay\u0131n tetiklenmesi \u00f6nemlidir ancak \u00e7ok s\u0131k tetiklenmesi performans\u0131 d\u00fc\u015f\u00fcrebilir. Throttling, bu olaylar\u0131n d\u00fczenli aral\u0131klarla i\u015flenmesini sa\u011flar.<\/p>\n E\u011fer arama yap\u0131lacak veri seti k\u00fc\u00e7\u00fckse (\u00f6rne\u011fin, birka\u00e7 y\u00fcz veya bin kay\u0131t), t\u00fcm veriyi ba\u015flang\u0131\u00e7ta \u00e7ekip istemci taraf\u0131nda filtrelemek daha performansl\u0131 olabilir. Bu durumda, API \u00e7a\u011fr\u0131s\u0131na hi\u00e7 gerek kalmaz ve debouncing sadece UI'\u0131 g\u00fcncelleme s\u0131kl\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in kullan\u0131labilir.<\/p>\n S\u0131k\u00e7a aranan terimler veya son arama sonu\u00e7lar\u0131 i\u00e7in \u00f6n bellekleme (caching) stratejileri uygulayabilirsiniz. \u00d6rne\u011fin, ayn\u0131 arama terimi i\u00e7in tekrar API \u00e7a\u011fr\u0131s\u0131 yapmadan \u00f6nce \u00f6n bellekteki sonu\u00e7lar\u0131 kontrol edebilirsiniz. Bu, API \u00e7a\u011fr\u0131s\u0131n\u0131 yaln\u0131zca kullan\u0131c\u0131 belirli bir minimum karakter say\u0131s\u0131n\u0131 (\u00f6rne\u011fin, 3 karakter) girdi\u011finde ba\u015flatmak, gereksiz API \u00e7a\u011fr\u0131lar\u0131n\u0131n \u00f6n\u00fcne ge\u00e7ebilir. Bu, yukar\u0131daki kod \u00f6rneklerimizde React arama fonksiyonlar\u0131nda a\u015f\u0131r\u0131 API \u00e7a\u011fr\u0131lar\u0131n\u0131 \u00f6nlemek, uygulaman\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kritik bir ad\u0131md\u0131r. Debouncing, bu sorunu \u00e7\u00f6zmek i\u00e7in zarif ve etkili bir y\u00f6ntem sunar. Hay\u0131r, her zaman gerekli de\u011fildir. Debouncing, \u00f6zellikle kullan\u0131c\u0131 etkile\u015fimlerinin \u00e7ok s\u0131k oldu\u011fu ve her etkile\u015fimin pahal\u0131 bir i\u015flem (API \u00e7a\u011fr\u0131s\u0131 gibi) tetikledi\u011fi durumlarda faydal\u0131d\u0131r. E\u011fer bir i\u015flem \u00e7ok h\u0131zl\u0131 ger\u00e7ekle\u015fiyorsa veya nadiren tetikleniyorsa, debouncing'e ihtiya\u00e7 duymayabilirsiniz.<\/p>\n \u0130deal gecikme s\u00fcresi, uygulaman\u0131z\u0131n ba\u011flam\u0131na ve kullan\u0131c\u0131 beklentilerine ba\u011fl\u0131d\u0131r. Genellikle 300ms ile 1000ms (1 saniye) aras\u0131nda bir de\u011fer kullan\u0131l\u0131r. 500ms, \u00e7o\u011fu arama kutusu senaryosu i\u00e7in iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Kullan\u0131c\u0131 testleri yaparak uygulaman\u0131z i\u00e7in en uygun de\u011feri bulabilirsiniz.<\/p>\n Evet, Arama kutusu gibi senaryolarda debouncing tercih edilir \u00e7\u00fcnk\u00fc kullan\u0131c\u0131 yazmay\u0131 bitirdi\u011finde tek bir API \u00e7a\u011fr\u0131s\u0131 yapmak istersiniz. Throttling, belirli bir zaman aral\u0131\u011f\u0131nda birden fazla \u00e7a\u011fr\u0131ya izin verebilir, bu da hala gereksiz \u00e7a\u011fr\u0131lara yol a\u00e7abilir. Throttling, s\u00fcrekli tetiklenen olaylar\u0131n (scroll, resize) belirli bir frekansta i\u015flenmesi gereken durumlarda daha uygundur.<\/p>\n Debouncing genellikle istemci taraf\u0131nda, kullan\u0131c\u0131n\u0131n UI etkile\u015fimlerini optimize etmek i\u00e7in kullan\u0131l\u0131r. Sunucu taraf\u0131nda ise daha \u00e7ok \"rate limiting\" (oran s\u0131n\u0131rlama) veya \"caching\" (\u00f6n bellekleme) gibi teknikler kullan\u0131l\u0131r. Rate limiting, belirli bir IP adresinden veya kullan\u0131c\u0131dan gelen istek say\u0131s\u0131n\u0131 belirli bir zaman diliminde s\u0131n\u0131rlar. Bu, k\u00f6t\u00fc niyetli veya a\u015f\u0131r\u0131 istekleri engellemek i\u00e7in \u00f6nemlidir ve istemci taraf\u0131 debouncing'e ek olarak uygulanmal\u0131d\u0131r.<\/p>\n","protected":false},"excerpt":{"rendered":"Bir\u00e7ok web uygulamas\u0131nda, kullan\u0131c\u0131 bir arama kutusuna yaz\u0131 yazmaya ba\u015flad\u0131\u011f\u0131nda, her karakter giri\u015fiyle birlikte an\u0131nda sonu\u00e7lar\u0131 g\u00fcncellemek …","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-38235","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nonChange<\/code> olay\u0131 tetiklenir, state g\u00fcncellenir ve bile\u015fen yeniden render edilir. Bu yeniden render i\u015flemi s\u0131ras\u0131nda, e\u011fer API \u00e7a\u011fr\u0131s\u0131 do\u011frudan input de\u011feri de\u011fi\u015fimine ba\u011fl\u0131ysa, her de\u011fi\u015fimde yeni bir \u00e7a\u011fr\u0131 yap\u0131l\u0131r. \u0130\u015fte bu noktada debouncing devreye girer.<\/p>\nDebouncing Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n
Throttling ile Fark\u0131<\/h4>\n
\n
Temel Mant\u0131\u011f\u0131 ve Zamanlay\u0131c\u0131lar<\/h4>\n
Debounce Fonksiyonunun Yap\u0131s\u0131<\/h4>\n
\nfunction debounce(func, delay) {\n let timeoutId;\n return function(...args) {\n const context = this;\n clearTimeout(timeoutId);\n timeoutId = setTimeout(() => {\n func.apply(context, args);\n }, delay);\n };\n}\n<\/pre>\ndebounce<\/code> fonksiyonu bir func<\/code> (API \u00e7a\u011fr\u0131s\u0131 yapacak fonksiyon) ve bir delay<\/code> (gecikme s\u00fcresi) al\u0131r. \u0130\u00e7eride, timeoutId<\/code> de\u011fi\u015fkeni bir closure olu\u015fturarak her \u00e7a\u011fr\u0131da korunur. Her tetiklenmede eski zamanlay\u0131c\u0131 temizlenir ve yeni bir zamanlay\u0131c\u0131 kurulur.<\/p>\nReact'te Debouncing Uygulamas\u0131: Ad\u0131m Ad\u0131m<\/h3>\n
useState<\/code> ve useEffect<\/code> hook'lar\u0131n\u0131 kullan\u0131r\u0131z. En temiz ve yeniden kullan\u0131labilir yakla\u015f\u0131m, \u00f6zel bir useDebounce<\/code> hook'u olu\u015fturmakt\u0131r.<\/p>\nTemel Arama Bile\u015feni Olu\u015fturma<\/h4>\n
\nimport React, { useState, useEffect } from 'react';\n\nfunction SearchComponentWithoutDebounce() {\n const [searchTerm, setSearchTerm] = useState('');\n const [searchResults, setSearchResults] = useState([]);\n\n useEffect(() => {\n if (searchTerm.length > 2) { \/\/ En az 3 karakter girildi\u011finde ara\n console.log(API \u00e7a\u011fr\u0131s\u0131 yap\u0131l\u0131yor: ${searchTerm}<\/code>);\n \/\/ Ger\u00e7ek bir API \u00e7a\u011fr\u0131s\u0131 burada olurdu\n \/\/ fetch(\/api\/search?q=${searchTerm}<\/code>).then(res => res.json()).then(data => setSearchResults(data));\n \n \/\/ Sim\u00fclasyon\n const mockResults = [\n Sonu\u00e7 1 for ${searchTerm}<\/code>,\n Sonu\u00e7 2 for ${searchTerm}<\/code>,\n Sonu\u00e7 3 for ${searchTerm}<\/code>,\n ];\n setSearchResults(mockResults);\n } else {\n setSearchResults([]);\n }\n }, [searchTerm]); \/\/ searchTerm her de\u011fi\u015fti\u011finde useEffect \u00e7al\u0131\u015f\u0131r\n\n const handleInputChange = (event) => {\n setSearchTerm(event.target.value);\n };\n\n return (\n Debounce Olmadan Arama<\/h3>\n
Sonu\u00e7lar:<\/h4>\n
\n {searchResults.map((result, index) => (\n
searchTerm<\/code> de\u011fi\u015fti\u011finde useEffect<\/code> \u00e7al\u0131\u015f\u0131r ve console.log<\/code> ile bir API \u00e7a\u011fr\u0131s\u0131 sim\u00fclasyonu yapar. H\u0131zl\u0131ca yazmaya ba\u015flad\u0131\u011f\u0131n\u0131zda konsolda bir\u00e7ok \u00e7a\u011fr\u0131 g\u00f6receksiniz.<\/p>\nuseState<\/code> ve useEffect<\/code> Kullan\u0131m\u0131<\/h4>\nuseEffect<\/code> hook'u, debounced de\u011feri belirli bir gecikmeyle g\u00fcncellemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\u00d6zel Bir
useDebounce<\/code> Hook'u Geli\u015ftirme<\/h4>\nuseDebounce<\/code> hook'u:<\/p>\n\nimport { useState, useEffect } from 'react';\n\nfunction useDebounce(value, delay) {\n \/\/ Debounce edilmi\u015f de\u011feri saklayan state\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(() => {\n \/\/ value her de\u011fi\u015fti\u011finde bir zamanlay\u0131c\u0131 ayarla\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n \/\/ Temizleme fonksiyonu: value veya delay de\u011fi\u015firse\n \/\/ \u00f6nceki zamanlay\u0131c\u0131y\u0131 temizle.\n \/\/ Bu, value de\u011fi\u015fmeden \u00f6nce \u00f6nceki setDebouncedValue \u00e7a\u011fr\u0131s\u0131n\u0131n\n \/\/ ger\u00e7ekle\u015fmesini engeller.\n return () => {\n clearTimeout(handler);\n };\n }, [value, delay]); \/\/ Sadece value veya delay de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015ft\u0131r\n\n return debouncedValue;\n}\n\nexport default useDebounce;\n<\/pre>\nAPI \u00c7a\u011fr\u0131s\u0131n\u0131 Debounce Edilmi\u015f De\u011ferle Tetikleme<\/h4>\n
useDebounce<\/code> hook'unu arama bile\u015fenimize entegre edelim:<\/p>\n\nimport React, { useState, useEffect } from 'react';\nimport useDebounce from '.\/useDebounce'; \/\/ useDebounce hook'unu import edin\n\nfunction SearchComponentWithDebounce() {\n const [searchTerm, setSearchTerm] = useState('');\n const [searchResults, setSearchResults] = useState([]);\n const debouncedSearchTerm = useDebounce(searchTerm, 500); \/\/ 500ms gecikme\n\n useEffect(() => {\n \/\/ debouncedSearchTerm de\u011fi\u015fti\u011finde API \u00e7a\u011fr\u0131s\u0131 yap\n \/\/ Bu, kullan\u0131c\u0131 yazmay\u0131 bitirdikten 500ms sonra ger\u00e7ekle\u015fecek\n if (debouncedSearchTerm.length > 2) {\n console.log(Debounce edilmi\u015f API \u00e7a\u011fr\u0131s\u0131 yap\u0131l\u0131yor: ${debouncedSearchTerm}<\/code>);\n \/\/ Ger\u00e7ek bir API \u00e7a\u011fr\u0131s\u0131 burada olurdu\n \/\/ fetch(\/api\/search?q=${debouncedSearchTerm}<\/code>).then(res => res.json()).then(data => setSearchResults(data));\n \n \/\/ Sim\u00fclasyon\n const mockResults = [\n Debounced Sonu\u00e7 1 for ${debouncedSearchTerm}<\/code>,\n Debounced Sonu\u00e7 2 for ${debouncedSearchTerm}<\/code>,\n Debounced Sonu\u00e7 3 for ${debouncedSearchTerm}<\/code>,\n ];\n setSearchResults(mockResults);\n } else {\n setSearchResults([]);\n }\n }, [debouncedSearchTerm]); \/\/ Sadece debouncedSearchTerm de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r\n\n const handleInputChange = (event) => {\n setSearchTerm(event.target.value);\n };\n\n return (\n Debounce ile Arama<\/h3>\n
Sonu\u00e7lar:<\/h4>\n
\n {searchResults.map((result, index) => (\n
searchTerm<\/code> her tu\u015f vuru\u015funda an\u0131nda g\u00fcncellenirken, debouncedSearchTerm<\/code> sadece kullan\u0131c\u0131 yazmay\u0131 b\u0131rakt\u0131ktan 500 milisaniye sonra g\u00fcncellenir. API \u00e7a\u011fr\u0131s\u0131 da yaln\u0131zca debouncedSearchTerm<\/code> de\u011fi\u015fti\u011finde tetiklenir, b\u00f6ylece a\u015f\u0131r\u0131 \u00e7a\u011fr\u0131lar\u0131n \u00f6n\u00fcne ge\u00e7ilmi\u015f olur.<\/p>\nEn \u0130yi Uygulamalar ve Dikkat Edilmesi Gerekenler<\/h3>\n
Do\u011fru Gecikme S\u00fcresi Se\u00e7imi<\/h4>\n
delay<\/code> de\u011feri, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. \u00c7ok k\u0131sa bir gecikme, debouncing'in etkisini azalt\u0131rken, \u00e7ok uzun bir gecikme kullan\u0131c\u0131n\u0131n arama sonu\u00e7lar\u0131n\u0131 beklemesine neden olabilir. Genellikle 300ms ile 1000ms (1 saniye) aras\u0131 bir de\u011fer tercih edilir. \u00c7o\u011fu durumda 500ms iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\nTemizleme Fonksiyonlar\u0131 (Cleanup)<\/h4>\n
useEffect<\/code> hook'unun temizleme fonksiyonu (return i\u00e7inde clearTimeout<\/code>), bile\u015fen unmount edildi\u011finde veya ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde \u00f6nceki zamanlay\u0131c\u0131lar\u0131n temizlenmesini sa\u011flar. Bu, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 ve istenmeyen yan etkileri \u00f6nlemek i\u00e7in hayati \u00f6neme sahiptir.<\/p>\nSunucu Taraf\u0131 Optimizasyonlar\u0131<\/h4>\n
Kullan\u0131c\u0131 Geri Bildirimi (Loading State)<\/h4>\n
useEffect<\/code> i\u00e7inde bir isLoading<\/code> state'i ile y\u00f6netilebilir.<\/p>\n\n\/\/ ...\nconst [isLoading, setIsLoading] = useState(false);\n\nuseEffect(() => {\n if (debouncedSearchTerm.length > 2) {\n setIsLoading(true); \/\/ Y\u00fckleniyor durumunu ba\u015flat\n \/\/ API \u00e7a\u011fr\u0131s\u0131\n \/\/ ...\n fetch(\/api\/search?q=${debouncedSearchTerm}<\/code>)\n .then(res => res.json())\n .then(data => {\n setSearchResults(data);\n setIsLoading(false); \/\/ Y\u00fckleniyor durumunu bitir\n })\n .catch(error => {\n console.error(\"API hatas\u0131:\", error);\n setIsLoading(false);\n });\n } else {\n setSearchResults([]);\n setIsLoading(false);\n }\n}, [debouncedSearchTerm]);\n\nreturn (\n \/\/ ...\n {isLoading && Alternatif Yakla\u015f\u0131mlar ve Ek \u0130pu\u00e7lar\u0131<\/h3>\n
Throttling Ne Zaman Kullan\u0131lmal\u0131?<\/h4>\n
\n
window.resize<\/code>) olaylar\u0131<\/li>\nwindow.scroll<\/code>)<\/li>\nClient-Side Filtreleme<\/h4>\n
\u00d6n Bellekleme (Caching)<\/h4>\n
localStorage<\/code>, sessionStorage<\/code> veya bir state y\u00f6netim k\u00fct\u00fcphanesi (Redux, React Query, SWR) ile kolayca y\u00f6netilebilir.<\/p>\nMinimum Karakter Say\u0131s\u0131 ile Arama Ba\u015flatma<\/h4>\n
if (debouncedSearchTerm.length > 2)<\/code> ko\u015fuluyla zaten g\u00f6sterilmi\u015ftir.<\/p>\nSonu\u00e7<\/h3>\n
useDebounce<\/code> gibi \u00f6zel bir hook kullanarak, bu mant\u0131\u011f\u0131 kolayca uygulayabilir ve kodunuzu daha okunabilir ve s\u00fcrd\u00fcr\u00fclebilir hale getirebilirsiniz. Do\u011fru gecikme s\u00fcresi se\u00e7imi, temizleme fonksiyonlar\u0131n\u0131n kullan\u0131m\u0131 ve kullan\u0131c\u0131 geri bildirimi gibi en iyi uygulamalar\u0131 takip ederek, uygulaman\u0131z\u0131n hem h\u0131zl\u0131 hem de duyarl\u0131 olmas\u0131n\u0131 sa\u011flayabilirsiniz. Unutmay\u0131n, iyi bir kullan\u0131c\u0131 deneyimi, uygulaman\u0131z\u0131n ba\u015far\u0131s\u0131n\u0131n anahtarlar\u0131ndan biridir.<\/p>\nSSS (S\u0131k Sorulan Sorular)<\/h3>\n
1. Debouncing her zaman gerekli midir?<\/h4>\n
2. Hangi gecikme s\u00fcresi (delay) idealdir?<\/h4>\n
3.
useCallback<\/code> ile ili\u015fkisi var m\u0131d\u0131r?<\/h4>\ndebounce<\/code> fonksiyonunu do\u011frudan bir bile\u015fen i\u00e7inde tan\u0131ml\u0131yorsan\u0131z, her render'da yeni bir fonksiyon \u00f6rne\u011fi olu\u015fturulur. Bu, useEffect<\/code>'in ba\u011f\u0131ml\u0131l\u0131k dizisinde debounce<\/code> fonksiyonunu kullan\u0131rsan\u0131z sorunlara yol a\u00e7abilir. Bu nedenle, debounce<\/code> fonksiyonunu bile\u015fenin d\u0131\u015f\u0131nda tan\u0131mlamak veya useCallback<\/code> ile sarmak en iyi uygulamad\u0131r. Ancak, useDebounce<\/code> hook'u gibi bir yap\u0131 kullan\u0131ld\u0131\u011f\u0131nda, debouncing mant\u0131\u011f\u0131 zaten hook i\u00e7inde izole edildi\u011fi i\u00e7in genellikle ek bir useCallback<\/code>'e gerek kalmaz.<\/p>\n4. Throttling yerine neden debouncing tercih etmeliyim?<\/h4>\n
5. Sunucu taraf\u0131nda debouncing yapmak m\u00fcmk\u00fcn m\u00fcd\u00fcr?<\/h4>\n