React uygulamalar\u0131n\u0131zda React ekosistemi, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in geli\u015ftiricilere g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Bu ara\u00e7lardan biri olan Geli\u015ftiriciler, bir bile\u015fen y\u00fcklendi\u011finde veya belirli ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde bir API \u00e7a\u011fr\u0131s\u0131 yapma ihtiyac\u0131 duydu\u011funda do\u011fal olarak Bu sorunlar sadece teknik karma\u015f\u0131kl\u0131kla s\u0131n\u0131rl\u0131 kalmaz; ayn\u0131 zamanda geli\u015ftirici deneyimini de olumsuz etkiler. Hata ay\u0131klama s\u00fcre\u00e7leri uzar, kodun okunabilirli\u011fi ve bak\u0131m\u0131 zorla\u015f\u0131r. Bir Ancak, veri \u00e7ekme, \u00f6zellikle React’a yeni ba\u015flayan geli\u015ftiriciler i\u00e7in Veri \u00e7ekme, \u00e7o\u011fu zaman uygulaman\u0131n global bir durumunun veya d\u0131\u015f d\u00fcnyan\u0131n bir par\u00e7as\u0131d\u0131r. Bir Custom Hook kullanarak veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 nas\u0131l soyutlayabiliriz? Temel fikir, bir API u\u00e7 noktas\u0131 al\u0131r, bu u\u00e7 noktadan veri \u00e7eker ve uygulaman\u0131n y\u00fckleme, hata ve veri durumlar\u0131n\u0131 d\u00f6nd\u00fcren bir fonksiyon olu\u015fturmakt\u0131r. B\u00f6ylece, her bile\u015fenin kendi i\u00e7inde Kullan\u0131c\u0131 bilgileri y\u00fckleniyor...<\/p>;\n if (error) return Hata: {error.message}<\/p>;\n\n return (\n Email: {user.email}<\/p>\n <\/div>\n );\n}\n <\/pre>\n <\/code><\/p>\n Bu Custom Hook'lar, sadece veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 kapsamakla kalmaz, ayn\u0131 zamanda \u00f6nbellekleme (caching), verinin arka planda yeniden do\u011frulanmas\u0131 (revalidation) veya hata an\u0131nda otomatik tekrar deneme gibi daha geli\u015fmi\u015f \u00f6zellikler eklemek i\u00e7in de geni\u015fletilebilir. \u00d6rne\u011fin, bir Uzman \u0130pucu: Custom Hook'lar\u0131n\u0131z\u0131 m\u00fcmk\u00fcn oldu\u011funca jenerik tutmaya \u00e7al\u0131\u015f\u0131n. Bu, sadece belirli bir API endpoint'i i\u00e7in de\u011fil, farkl\u0131 veri \u00e7ekme senaryolar\u0131nda da kullan\u0131labilir olmalar\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir kimlik do\u011frulama ba\u015fl\u0131\u011f\u0131 eklemek i\u00e7in bir parametre kabul edebilirler.<\/p>\n Custom Hook'lar, veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 soyutlamak i\u00e7in harika bir ilk ad\u0131md\u0131r, ancak modern web uygulamalar\u0131n\u0131n veri \u00e7ekme ihtiya\u00e7lar\u0131, basit bir React Query, \"sunucu state'ini\" y\u00f6netmek i\u00e7in kapsaml\u0131 bir \u00e7\u00f6z\u00fcm sunar. Uygulaman\u0131z\u0131n UI state'inden ( React Query'nin kullan\u0131m\u0131 olduk\u00e7a basittir. Temel olarak, Yap\u0131lacaklar y\u00fckleniyor...<\/p>;\n if (error) return Bir hata olu\u015ftu: {error.message}<\/p>;\n\n return (\n <\/code><\/p>\n Bu \u00f6rnekte, SWR, Next.js ekibi taraf\u0131ndan geli\u015ftirilmi\u015f, \"Stale-While-Revalidate\" (eskimi\u015fken yeniden do\u011frula) stratejisini temel alan hafif bir veri \u00e7ekme k\u00fct\u00fcphanesidir. Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, SWR \u00f6nbelle\u011fe al\u0131nm\u0131\u015f (stale) veriyi an\u0131nda g\u00f6sterirken, arka planda yeni veriyi (revalidate) \u00e7ekerek g\u00fcncelli\u011fini kontrol eder. Bu, kullan\u0131c\u0131ya neredeyse an\u0131nda geri bildirim sa\u011flarken, her zaman en g\u00fcncel veriyi g\u00f6rmesini garantiler. SWR'\u0131n ba\u015fl\u0131ca avantajlar\u0131:<\/p>\n Email: {data.email}<\/p>\n <\/div>\n );\n}\n <\/pre>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Uzman \u0130pucu: B\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda, global state y\u00f6netimi i\u00e7in Redux veya Zustand gibi k\u00fct\u00fcphanelerle React Query\/SWR'\u0131 birle\u015ftirebilirsiniz. React Query\/SWR sunucu state'i i\u00e7in m\u00fckemmelken, Redux\/Zustand istemci taraf\u0131 UI state'i i\u00e7in daha uygundur.<\/p>\n Bir e-ticaret uygulamas\u0131nda s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan senaryolardan biri, bir \u00fcr\u00fcn listeleme sayfas\u0131d\u0131r. Bu sayfa genellikle \u00fcr\u00fcnleri kategoriye, fiyata veya pop\u00fclerli\u011fe g\u00f6re filtreleme ve s\u0131ralama se\u00e7enekleri sunar. Gelin, bu senaryoyu \u00dcr\u00fcnler y\u00fckleniyor...<\/p>;\n if (error) return \u00dcr\u00fcnler y\u00fcklenirken bir hata olu\u015ftu: {error.message}<\/p>;\n\n return (\n useEffect<\/code> kullanarak veri \u00e7ekme pratiklerinin neden sorunlu olabilece\u011fini ve daha modern, etkili alternatifleri bu kapsaml\u0131 rehberde ke\u015ffedin. Performans sorunlar\u0131, hata y\u00f6netimi karma\u015f\u0131kl\u0131\u011f\u0131 ve kullan\u0131c\u0131 deneyimi gibi kritik konulara \u00e7\u00f6z\u00fcm bulaca\u011f\u0131z.<\/p>\nuseEffect<\/code>, bile\u015fen ya\u015fam d\u00f6ng\u00fcs\u00fc yan etkilerini (side effects) y\u00f6netmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Veri \u00e7ekme, abonelikler, manuel DOM manip\u00fclasyonlar\u0131 gibi i\u015flemler tipik yan etkilerdir. Ancak, useEffect<\/code>‘in veri \u00e7ekme i\u00e7in yayg\u0131n olarak kullan\u0131lmas\u0131, zamanla \u00e7e\u015fitli zorluklar\u0131 ve antipattern’lar\u0131 beraberinde getirmi\u015ftir. \u00d6zellikle tek sayfal\u0131k uygulamalar\u0131n (SPA) karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a, useEffect<\/code> ile veri \u00e7ekme, beklenenden daha fazla ba\u015f a\u011fr\u0131s\u0131na yol a\u00e7abilmektedir.<\/p>\nuseEffect<\/code>‘e y\u00f6nelirler. \u00c7\u00fcnk\u00fc bu, “bir \u015feyler de\u011fi\u015fti\u011finde bir \u015feyler yap” mant\u0131\u011f\u0131na en uygun React kancas\u0131 gibi g\u00f6r\u00fcn\u00fcr. Ancak bu yakla\u015f\u0131m, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda veya s\u0131k veri g\u00fcncellemesi gerektiren senaryolarda, performans d\u00fc\u015f\u00fc\u015flerine, gereksiz yeniden render’lara, sonsuz d\u00f6ng\u00fclere ve daha da \u00f6nemlisi, yar\u0131\u015f ko\u015fullar\u0131 (race conditions) gibi zor tespit edilebilir hatalara neden olabilir. \u00d6rne\u011fin, kullan\u0131c\u0131 h\u0131zl\u0131ca sayfalar aras\u0131nda gezinirken, \u00f6nceki sayfan\u0131n veri \u00e7ekme iste\u011fi hen\u00fcz tamamlanmam\u0131\u015fken yeni bir sayfan\u0131n iste\u011fi tetiklenebilir. E\u011fer \u00f6nceki iste\u011fin sonucu, yeni sayfan\u0131n durumu g\u00fcncelleyecek \u015fekilde i\u015flenirse, bu durum uygulaman\u0131zda beklenmedik ve hatal\u0131 bir state’e yol a\u00e7abilir. Bu senaryolar, useEffect<\/code>‘in do\u011fas\u0131nda var olan asenkronluk ve ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimi karma\u015f\u0131kl\u0131\u011f\u0131ndan kaynaklan\u0131r.<\/p>\nuseEffect<\/code> blo\u011funun ne zaman \u00e7al\u0131\u015faca\u011f\u0131n\u0131, hangi ba\u011f\u0131ml\u0131l\u0131klar\u0131n tetikledi\u011fini ve olas\u0131 yan etkilerini anlamak, \u00f6zellikle birden fazla useEffect<\/code> kancas\u0131n\u0131n i\u00e7 i\u00e7e kullan\u0131ld\u0131\u011f\u0131 durumlarda karma\u015f\u0131k bir bulmacaya d\u00f6n\u00fc\u015febilir. Bu durum, yeni ekip \u00fcyelerinin projeye adaptasyonunu yava\u015flatabilir ve mevcut geli\u015ftiricilerin verimlili\u011fini d\u00fc\u015f\u00fcrebilir. Veri \u00e7ekme, \u00e7o\u011fu React uygulamas\u0131n\u0131n temel bir par\u00e7as\u0131 oldu\u011fundan, bu s\u00fcrecin optimize edilmi\u015f ve hata toleransl\u0131 olmas\u0131 kritik \u00f6nem ta\u015f\u0131r. Bu makalede, useEffect<\/code>‘in bu t\u00fcr s\u0131n\u0131rl\u0131l\u0131klar\u0131n\u0131 a\u015fman\u0131n ve daha sa\u011flam, performansl\u0131 ve bak\u0131m\u0131 kolay veri \u00e7ekme stratejileri geli\u015ftirmenin yollar\u0131n\u0131 ke\u015ffedece\u011fiz. Art\u0131k useEffect<\/code>‘in sadece yan etkiler i\u00e7in ayr\u0131lm\u0131\u015f, daha \u00f6zel bir ara\u00e7 olarak kullan\u0131lmas\u0131 gerekti\u011fini savunuyoruz.<\/p>\nuseEffect’in Amac\u0131 Neydi ve Veri \u00c7ekmede Nas\u0131l Yanl\u0131\u015f Anla\u015f\u0131ld\u0131?<\/h2>\n
useEffect<\/code> kancas\u0131, React ekibi taraf\u0131ndan bile\u015fenlerin ya\u015fam d\u00f6ng\u00fcs\u00fc yan etkilerini (side effects) y\u00f6netmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bir bile\u015fenin render edilmesinin \u00f6tesine ge\u00e7en her t\u00fcrl\u00fc i\u015flem, bir yan etki olarak kabul edilebilir. \u00d6rne\u011fin, bir API’den veri getirme, bir bile\u015fen y\u00fcklendi\u011finde bir timer ba\u015flatma, DOM’u do\u011frudan manip\u00fcle etme veya bir olay dinleyicisi ekleme gibi i\u015flemler useEffect<\/code>‘in temel kullan\u0131m alanlar\u0131d\u0131r. Temel felsefesi, i\u015f mant\u0131\u011f\u0131n\u0131 ve sunum mant\u0131\u011f\u0131n\u0131 ayr\u0131 tutarken, bile\u015fenin d\u0131\u015f d\u00fcnyayla etkile\u015fimini y\u00f6netmektir. Ba\u011f\u0131ml\u0131l\u0131k dizisi (dependency array) ile useEffect<\/code>, sadece belirli de\u011ferler de\u011fi\u015fti\u011finde yan etkinin yeniden \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131n\u0131 sa\u011flayarak performans optimizasyonu ve kontrol mekanizmas\u0131 sunar. Bu kanca, s\u0131n\u0131f tabanl\u0131 bile\u015fenlerdeki componentDidMount<\/code>, componentDidUpdate<\/code> ve componentWillUnmount<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131n i\u015flevselli\u011fini tek bir API alt\u0131nda birle\u015ftirmeyi ama\u00e7lam\u0131\u015ft\u0131r.<\/p>\nuseEffect<\/code> i\u00e7inde uygulanmas\u0131 “do\u011fal” veya “kolay” g\u00f6r\u00fcnen bir senaryo olmu\u015ftur. Bir bile\u015fen y\u00fcklendi\u011finde veri getirmek istendi\u011finde, bo\u015f bir ba\u011f\u0131ml\u0131l\u0131k dizisi ([]<\/code>) ile useEffect<\/code> kullanmak, componentDidMount<\/code>‘a e\u015fde\u011fer bir davran\u0131\u015f sunar gibi g\u00f6r\u00fcn\u00fcr. Ancak bu yakla\u015f\u0131m, asenkron i\u015flemlerin do\u011fas\u0131 gere\u011fi ortaya \u00e7\u0131kan karma\u015f\u0131kl\u0131klar\u0131 g\u00f6z ard\u0131 eder. Basit bir “veri getir ve g\u00f6ster” senaryosu bile, y\u00fckleme durumu, hata durumu, \u00f6nbellekleme, tekrar deneme (retry) mekanizmalar\u0131 ve verinin g\u00fcncelli\u011fi gibi bir\u00e7ok ek y\u00f6netimi gerektirir. useEffect<\/code>‘in temel amac\u0131 bu karma\u015f\u0131k veri y\u00f6netimi stratejilerini ba\u015ftan sona uygulamak de\u011fil, belirli bir ko\u015ful alt\u0131nda bir yan etkiyi tetiklemek ve temizlemektir (cleanup).<\/p>\nuseEffect<\/code> i\u00e7ine yerle\u015ftirilen veri \u00e7ekme mant\u0131\u011f\u0131, bile\u015fenin kendi i\u00e7inde bir mikro-y\u00f6netim sistemi olu\u015fturur. Bu da kod tekrar\u0131na, senkronizasyon sorunlar\u0131na ve uygulaman\u0131n genel veri ak\u0131\u015f\u0131n\u0131 anlamay\u0131 zorla\u015ft\u0131rmaya yol a\u00e7ar. \u00d6rne\u011fin, ayn\u0131 veriye ihtiya\u00e7 duyan iki farkl\u0131 bile\u015fen varsa, her ikisi de useEffect<\/code> i\u00e7inde kendi veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 yazmaya ba\u015flayabilir. Bu durum, gereksiz a\u011f isteklerine ve \u00f6nbellekleme f\u0131rsatlar\u0131n\u0131n ka\u00e7\u0131r\u0131lmas\u0131na yol a\u00e7ar. Dahas\u0131, useEffect<\/code> i\u00e7indeki asenkron i\u015flemlerin y\u00f6netimi (\u00f6rne\u011fin, bir bile\u015fen mount olmaktan \u00e7\u0131kt\u0131\u011f\u0131nda bekleyen bir iste\u011fi iptal etme), manuel olarak yap\u0131lmazsa haf\u0131za s\u0131z\u0131nt\u0131lar\u0131na veya “state g\u00fcncellenirken bile\u015fen mount olmad\u0131” uyar\u0131lar\u0131na neden olabilir. Bu yanl\u0131\u015f anlama ve kullan\u0131m, useEffect<\/code>‘in potansiyelini azalt\u0131rken, uygulamalar\u0131n performans\u0131n\u0131 ve bak\u0131m\u0131n\u0131 olumsuz etkileyen pratiklerin yayg\u0131nla\u015fmas\u0131na neden olmu\u015ftur.<\/p>\nDaha Temiz ve Verimli Veri \u00c7ekme: Custom Hook’lar Nas\u0131l Yard\u0131mc\u0131 Olur?<\/h2>\n
useEffect<\/code>‘in veri \u00e7ekme i\u00e7in s\u0131n\u0131rl\u0131l\u0131klar\u0131n\u0131 anlad\u0131ktan sonra, daha temiz ve yeniden kullan\u0131labilir bir yakla\u015f\u0131m aray\u0131\u015f\u0131na gireriz. Bu noktada, React’\u0131n sa\u011flad\u0131\u011f\u0131 g\u00fc\u00e7l\u00fc bir \u00f6zellik olan “Custom Hook”lar devreye girer. Custom Hook’lar, stateful mant\u0131\u011f\u0131 bile\u015fenler aras\u0131nda yeniden kullanmam\u0131z\u0131 sa\u011flayan fonksiyonlard\u0131r. useEffect<\/code>, useState<\/code> gibi di\u011fer React kancalar\u0131n\u0131 i\u00e7inde bar\u0131nd\u0131rarak, veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 soyutlaman\u0131n ve bile\u015fenlerimizden ay\u0131rman\u0131n m\u00fckemmel bir yolunu sunarlar. Bu, kod tekrar\u0131n\u0131 azalt\u0131r, okunabilirli\u011fi art\u0131r\u0131r ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\nuseState<\/code> ve useEffect<\/code> kancalar\u0131n\u0131 tekrarlamas\u0131 yerine, bu mant\u0131\u011f\u0131 tek bir yerden y\u00f6netebiliriz. A\u015fa\u011f\u0131da basit bir useFetch<\/code> Custom Hook \u00f6rne\u011fi bulunmaktad\u0131r:<\/p>\n\nimport { useState, useEffect } from 'react';\n\nfunction useFetch(url) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const fetchData = async () => {\n setLoading(true);\n setError(null);\n try {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(HTTP error! status: ${response.status}<\/code>);\n }\n const result = await response.json();\n setData(result);\n } catch (err) {\n setError(err);\n } finally {\n setLoading(false);\n }\n };\n\n fetchData();\n }, [url]); \/\/ url de\u011fi\u015fti\u011finde veriyi yeniden \u00e7ek\n\n return { data, loading, error };\n}\n\n\/\/ Custom Hook'un kullan\u0131m\u0131\nfunction UserProfile({ userId }) {\n const { data: user, loading, error } = useFetch(\/api\/users\/${userId}<\/code>);\n\n if (loading) return {user.name}<\/h3>\n
useFetch<\/code> Custom Hook'u, veri \u00e7ekme i\u015fleminin t\u00fcm d\u00f6ng\u00fcs\u00fcn\u00fc kapsar: iste\u011fi ba\u015flatmadan \u00f6nce y\u00fckleme durumunu ayarlar, ba\u015far\u0131l\u0131 bir \u015fekilde veriyi ald\u0131\u011f\u0131nda durumu g\u00fcnceller, bir hata olu\u015ftu\u011funda hatay\u0131 yakalar ve son olarak y\u00fckleme durumunu sonland\u0131r\u0131r. Bu hook sayesinde, UserProfile<\/code> gibi bile\u015fenler sadece al\u0131nan veriyi g\u00f6stermeye odaklan\u0131r, veri \u00e7ekme mant\u0131\u011f\u0131n\u0131n detaylar\u0131yla ilgilenmezler. Bu ayr\u0131m, bile\u015fenlerinizi daha saf (pure) ve test edilebilir hale getirir.<\/p>\nmemo<\/code> mekanizmas\u0131 ekleyerek ayn\u0131 URL i\u00e7in gereksiz yere birden fazla istek at\u0131lmas\u0131n\u0131 engelleyebilirsiniz. Bu, uygulaman\u0131z\u0131n performans\u0131n\u0131 do\u011frudan etkileyen \u00f6nemli bir iyile\u015ftirmedir. Custom Hook'lar, useEffect<\/code>'in kendisini k\u00f6t\u00fc bir ara\u00e7 olmaktan \u00e7\u0131kar\u0131p, yan etkileri y\u00f6netmek i\u00e7in do\u011fru ba\u011flamda kullan\u0131ld\u0131\u011f\u0131nda ne kadar g\u00fc\u00e7l\u00fc olabilece\u011fini g\u00f6steren bir \u00f6rnektir. Veri \u00e7ekme gibi karma\u015f\u0131k ve tekrarlayan g\u00f6revleri soyutlayarak, React uygulamalar\u0131n\u0131zda daha s\u00fcrd\u00fcr\u00fclebilir bir mimari olu\u015fturman\u0131za yard\u0131mc\u0131 olurlar. Bu yakla\u015f\u0131m, sadece temiz kod yazmakla kalmaz, ayn\u0131 zamanda uygulamalar\u0131n\u0131z\u0131n \u00f6l\u00e7eklenebilirli\u011fini de art\u0131r\u0131r.<\/p>\nReact Query (TanStack Query) ve SWR: Veri \u00c7ekme K\u00fct\u00fcphanelerinin G\u00fcc\u00fc<\/h2>\n
useFetch<\/code> hook'unun \u00f6tesine ge\u00e7er. \u00d6nbellekleme, verinin g\u00fcncelli\u011fi (stale-while-revalidate), otomatik tekrar denemeler, iyimser g\u00fcncellemeler ve e\u015fzamanl\u0131 istek y\u00f6netimi gibi konular, elle implemente edildi\u011finde ciddi bir karma\u015f\u0131kl\u0131\u011fa yol a\u00e7ar. \u0130\u015fte tam bu noktada, React Query (\u015fimdiki ad\u0131yla TanStack Query) ve SWR (Stale-While-Revalidate) gibi veri \u00e7ekme k\u00fct\u00fcphaneleri devreye girer. Bu k\u00fct\u00fcphaneler, birer \"veri katman\u0131\" veya \"veri senkronizasyon ara\u00e7lar\u0131\" olarak i\u015flev g\u00f6rerek, sunucu verisiyle etkile\u015fim kurman\u0131n ve durumu y\u00f6netmenin standart bir yolunu sunar.<\/p>\nReact Query (TanStack Query) ile Ak\u0131ll\u0131 Veri Y\u00f6netimi<\/h3>\n
useState<\/code> ile y\u00f6netilen) ayr\u0131 bir \u015fekilde sunucudan gelen veriyi ele al\u0131r. Bu, bir\u00e7ok yayg\u0131n veri \u00e7ekme problemini (\u00f6nbellekleme, senkronizasyon, g\u00fcncelleme) sizin yerinize \u00e7\u00f6zd\u00fc\u011f\u00fc anlam\u0131na gelir. React Query'nin temel \u00f6zellikleri \u015funlard\u0131r:<\/p>\n\n
useQuery<\/code> kancas\u0131n\u0131 kullanarak verinizi \u00e7ekersiniz:<\/p>\n\nimport { useQuery, QueryClient, QueryClientProvider } from '@tanstack\/react-query';\n\n\/\/ QueryClient olu\u015fturulur ve uygulaman\u0131z\u0131n tepesine yerle\u015ftirilir\nconst queryClient = new QueryClient();\n\nfunction Todos() {\n const { data, isLoading, error } = useQuery({\n queryKey: ['todos'], \/\/ Bu sorguyu tan\u0131mlayan e\u015fsiz bir anahtar\n queryFn: async () => { \/\/ Veri \u00e7ekme fonksiyonu\n const response = await fetch('\/api\/todos');\n if (!response.ok) {\n throw new Error('Yap\u0131lacaklar listesi y\u00fcklenemedi.');\n }\n return response.json();\n }\n });\n\n if (isLoading) return \n {data.map(todo => (\n
useQuery<\/code> kancas\u0131 ['todos']<\/code> anahtar\u0131yla tan\u0131mlanm\u0131\u015f bir sorgu \u00e7al\u0131\u015ft\u0131r\u0131r. queryFn<\/code> i\u00e7inde veri \u00e7ekme mant\u0131\u011f\u0131m\u0131z bulunur. React Query, bu veriyi otomatik olarak \u00f6nbelle\u011fe al\u0131r, y\u00fckleme ve hata durumlar\u0131n\u0131 y\u00f6netir. Siz sadece veriyi kullanmaya odaklan\u0131rs\u0131n\u0131z.<\/p>\nSWR: Hafif ve Etkili Bir Alternatif<\/h3>\n
\n
\nimport useSWR from 'swr';\n\nconst fetcher = (...args) => fetch(...args).then(res => res.json());\n\nfunction UserProfile({ userId }) {\n const { data, error, isLoading } = useSWR(\/api\/users\/${userId}<\/code>, fetcher);\n\n if (isLoading) return {data.name}<\/h2>\n
useSWR<\/code> kancas\u0131 bir anahtar (genellikle API URL'si) ve bir fetcher<\/code> fonksiyonu al\u0131r. SWR, bu fonksiyonu kullanarak veriyi \u00e7eker ve t\u00fcm \u00f6nbellekleme, y\u00fckleme, hata ve revalidasyon mant\u0131\u011f\u0131n\u0131 sizin i\u00e7in y\u00f6netir. Her iki k\u00fct\u00fcphane de useEffect<\/code>'in veri \u00e7ekme i\u00e7in manuel olarak y\u00f6netilmesi gereken bir\u00e7ok karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 ortadan kald\u0131rarak geli\u015ftirici verimlili\u011fini ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Hangi k\u00fct\u00fcphaneyi se\u00e7ece\u011finiz, projenizin ihtiya\u00e7lar\u0131na ve ekibinizin tercihlerine ba\u011fl\u0131d\u0131r; ancak her ikisi de useEffect<\/code> ile veri \u00e7ekme pratiklerine g\u00f6re \u00e7ok daha \u00fcst\u00fcn \u00e7\u00f6z\u00fcmler sunar.<\/p>\nVaka Analizi: \u00dcr\u00fcn Listeleme Sayfas\u0131nda useEffect vs. React Query<\/h2>\n
useEffect<\/code> ile ve React Query ile nas\u0131l ele alaca\u011f\u0131m\u0131z\u0131 kar\u015f\u0131la\u015ft\u0131ral\u0131m ve aradaki farklar\u0131 g\u00f6zlemleyelim.<\/p>\nSenaryo 1: useEffect ile \u00dcr\u00fcn Listeleme (Geleneksel Yakla\u015f\u0131m)<\/h3>\n
useEffect<\/code> kullanarak bir \u00fcr\u00fcn listesi \u00e7ekerken, genellikle bir veya daha fazla useState<\/code> kancas\u0131yla y\u00fckleme durumu, hata durumu ve \u00fcr\u00fcn verisi y\u00f6netilir. Filtreleme veya s\u0131ralama parametreleri de\u011fi\u015fti\u011finde, useEffect<\/code>'in ba\u011f\u0131ml\u0131l\u0131k dizisindeki bu parametreler de\u011fi\u015fti\u011fi i\u00e7in veri tekrar \u00e7ekilir.<\/p>\n\nimport React, { useState, useEffect } from 'react';\n\nfunction ProductListWithUseEffect() {\n const [products, setProducts] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [category, setCategory] = useState('all'); \/\/ Varsay\u0131lan kategori\n const [sortBy, setSortBy] = useState('price'); \/\/ Varsay\u0131lan s\u0131ralama\n\n useEffect(() => {\n const fetchProducts = async () => {\n setLoading(true);\n setError(null);\n try {\n \/\/ API URL'ine kategori ve s\u0131ralama parametreleri eklenir\n const response = await fetch(\/api\/products?category=${category}&sortBy=${sortBy}<\/code>);\n if (!response.ok) {\n throw new Error(HTTP error! status: ${response.status}<\/code>);\n }\n const data = await response.json();\n setProducts(data);\n } catch (err) {\n setError(err);\n } finally {\n setLoading(false);\n }\n };\n\n fetchProducts();\n }, [category, sortBy]); \/\/ Kategori veya s\u0131ralama de\u011fi\u015fti\u011finde tekrar \u00e7ek\n\n if (loading) return \u00dcr\u00fcnlerimiz<\/h2>\n