React-Async K\u00fct\u00fcphanesi ile Deklaratif Veri \u00c7ekme: Modern React Uygulamalar\u0131nda Asenkron \u0130\u015flemleri Y\u00f6netmek<\/h2>\n

React uygulamalar\u0131 geli\u015ftirirken kar\u015f\u0131la\u015f\u0131lan en yayg\u0131n ve bazen en karma\u015f\u0131k g\u00f6revlerden biri, d\u0131\u015f kaynaklardan veri \u00e7ekme i\u015flemidir. API \u00e7a\u011fr\u0131lar\u0131 yapmak, y\u00fckleme durumlar\u0131n\u0131 y\u00f6netmek, hatalar\u0131 ele almak ve verileri bile\u015fenler aras\u0131nda do\u011fru bir \u015fekilde senkronize etmek, uygulaman\u0131n genel performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini do\u011frudan etkiler. Geleneksel olarak, bu t\u00fcr asenkron i\u015flemler useEffect<\/code> hook’u ve useState<\/code> hook’u kombinasyonuyla manuel olarak y\u00f6netilir. Ancak bu yakla\u015f\u0131m, \u00f6zellikle karma\u015f\u0131k senaryolarda (\u00f6rne\u011fin, ba\u011f\u0131ml\u0131l\u0131klar\u0131n de\u011fi\u015fmesiyle yeniden \u00e7ekme, yar\u0131\u015f ko\u015fullar\u0131, iste\u011fi iptal etme, \u00f6nbelle\u011fe alma) h\u0131zl\u0131ca karma\u015f\u0131k, hataya a\u00e7\u0131k ve okunmas\u0131 zor bir hal alabilir.<\/p>\n

\u0130\u015fte tam bu noktada, React-Async<\/code> gibi k\u00fct\u00fcphaneler devreye girerek asenkron i\u015flemleri daha deklaratif, \u00f6ng\u00f6r\u00fclebilir ve y\u00f6netilebilir bir \u015fekilde ele almam\u0131z\u0131 sa\u011flar. React-Async<\/code>, React’in do\u011fas\u0131na uygun, bile\u015fen tabanl\u0131 bir yakla\u015f\u0131mla, promise tabanl\u0131 asenkron i\u015flemleri React bile\u015fenlerinizin i\u00e7inde kolayca y\u00f6netmenize olanak tan\u0131yan hafif ve esnek bir k\u00fct\u00fcphanedir. Bu makalede, React-Async<\/code> k\u00fct\u00fcphanesinin temel prensiplerini, sundu\u011fu \u00f6zellikleri, kullan\u0131m senaryolar\u0131n\u0131 ve modern React uygulamalar\u0131nda nas\u0131l g\u00fc\u00e7l\u00fc bir ara\u00e7 olabilece\u011fini derinlemesine inceleyece\u011fiz.<\/p>\n

Neden Deklaratif Veri \u00c7ekme?<\/h3>\nReact, kullan\u0131c\u0131 aray\u00fczlerini deklaratif bir \u015fekilde tan\u0131mlama felsefesi \u00fczerine kurulmu\u015ftur. Bu, uygulaman\u0131z\u0131n belirli bir anda nas\u0131l g\u00f6r\u00fcnmesi gerekti\u011fini “nas\u0131l” de\u011fil, “ne” olmas\u0131 gerekti\u011fini a\u00e7\u0131klaman\u0131z anlam\u0131na gelir. Ancak veri \u00e7ekme gibi yan etkiler (side effects) genellikle imperatif (emredici) bir \u015fekilde y\u00f6netilir. \u00d6rne\u011fin, useEffect<\/code> i\u00e7inde bir fetch<\/code> \u00e7a\u011fr\u0131s\u0131 yapmak, belirli bir olay zincirini (iste\u011fi ba\u015flat, cevab\u0131 bekle, durumu g\u00fcncelle) ad\u0131m ad\u0131m tan\u0131mlar.<\/p>\n
Bu imperatif yakla\u015f\u0131m\u0131n baz\u0131 dezavantajlar\u0131 vard\u0131r:<\/p>\n
*   Karma\u015f\u0131kl\u0131k:<\/strong> Y\u00fckleme durumlar\u0131, hata durumlar\u0131, ba\u015far\u0131l\u0131 durumlar i\u00e7in ayr\u0131 ayr\u0131 useState<\/code> tan\u0131mlar\u0131 ve bunlar\u0131n useEffect<\/code> i\u00e7inde manuel olarak g\u00fcncellenmesi gerekir.
\n*   Yar\u0131\u015f Ko\u015fullar\u0131:<\/strong> useEffect<\/code> ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\u011finde veya bile\u015fen demonte edildi\u011finde devam eden bir iste\u011fin sonucu, g\u00fcncel olmayan veya hatal\u0131 bir duruma yol a\u00e7abilir. Bu durumlar\u0131 \u00f6nlemek i\u00e7in manuel temizleme (cleanup) fonksiyonlar\u0131 yazmak zorunludur.
\n*   Tekrar Kullan\u0131labilirlik:<\/strong> Ayn\u0131 veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 farkl\u0131 bile\u015fenlerde kullanmak istedi\u011finizde, genellikle \u00f6zel hook’lar yazmak veya mant\u0131\u011f\u0131 kopyalamak zorunda kal\u0131rs\u0131n\u0131z.
\n*   Okunabilirlik ve Bak\u0131m:<\/strong> Kod taban\u0131 b\u00fcy\u00fcd\u00fck\u00e7e, asenkron mant\u0131\u011f\u0131 takip etmek ve hatalar\u0131 ay\u0131klamak zorla\u015f\u0131r.<\/p>\n
Deklaratif veri \u00e7ekme, bu sorunlara \u00e7\u00f6z\u00fcm sunar. React-Async<\/code> gibi k\u00fct\u00fcphaneler, bir promise’\u0131 veya bir asenkron fonksiyonu al\u0131r ve onun ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc (beklemede, ba\u015far\u0131l\u0131, reddedildi) otomatik olarak y\u00f6netir. Siz sadece bu durumlar\u0131n her birinde UI’\u0131n nas\u0131l g\u00f6r\u00fcnmesi gerekti\u011fini belirtirsiniz. Bu, kodunuzu daha okunabilir, daha az hataya a\u00e7\u0131k ve daha s\u00fcrd\u00fcr\u00fclebilir hale getirir. React-Async<\/code>, React’in deklaratif do\u011fas\u0131yla m\u00fckemmel bir uyum sa\u011flayarak, asenkron i\u015flemleri de UI gibi deklaratif bir \u015fekilde y\u00f6netmemize olanak tan\u0131r.<\/p>\n
React-Async’i Anlamak<\/h3>\nReact-Async<\/code>, React bile\u015fenleri i\u00e7inde promise tabanl\u0131 asenkron i\u015flemleri y\u00f6netmek i\u00e7in tasarlanm\u0131\u015f esnek bir ara\u00e7t\u0131r. Amac\u0131, asenkron operasyonlar\u0131n durumlar\u0131n\u0131 (y\u00fckleniyor, tamamland\u0131, hata) otomatik olarak izlemek ve bu durumlara g\u00f6re UI’\u0131 render etmek i\u00e7in basit ve deklaratif bir API sa\u011flamakt\u0131r. K\u00fct\u00fcphane, hem render props API’si arac\u0131l\u0131\u011f\u0131yla <\/code> bile\u015feni hem de React Hooks API’si arac\u0131l\u0131\u011f\u0131yla useAsync<\/code> ve useFetch<\/code> hook’lar\u0131 sunar, bu da onu modern React uygulamalar\u0131 i\u00e7in olduk\u00e7a uygun k\u0131lar.<\/p>\n
React-Async<\/code>‘in temel \u00f6zellikleri \u015funlard\u0131r:<\/p>\n
*   Otomatik Durum Y\u00f6netimi:<\/strong> Bir promise’\u0131n pending<\/code> (beklemede), fulfilled<\/code> (ba\u015far\u0131l\u0131) ve rejected<\/code> (reddedildi) durumlar\u0131n\u0131 otomatik olarak izler ve ilgili bilgileri bile\u015fene sa\u011flar.
\n*   Deklaratif API:<\/strong> Hem <\/code> bile\u015feni hem de useAsync<\/code> hook’u, asenkron i\u015flemleri React’in deklaratif do\u011fas\u0131na uygun bir \u015fekilde tan\u0131mlaman\u0131za olanak tan\u0131r.
\n*   Esneklik:<\/strong> Herhangi bir promise tabanl\u0131 i\u015flemi (veri \u00e7ekme, dosya y\u00fckleme, zamanlay\u0131c\u0131lar vb.) y\u00f6netebilir.
\n*   \u00d6nbelle\u011fe Alma (Caching):<\/strong> Ayn\u0131 promise i\u00e7in tekrar tekrar API \u00e7a\u011fr\u0131s\u0131 yapmaktan ka\u00e7\u0131nmak i\u00e7in basit bir \u00f6nbelle\u011fe alma mekanizmas\u0131 sunar.
\n*   Debounce ve Throttle:<\/strong> A\u015f\u0131r\u0131 API \u00e7a\u011fr\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in istekleri geciktirme veya s\u0131n\u0131rlama yetene\u011fi.
\n*   Tekrar Deneme (Retries):<\/strong> Ge\u00e7ici a\u011f hatalar\u0131 gibi durumlarda istekleri otomatik olarak yeniden deneme.
\n*   \u0130ptal Etme (Aborting):<\/strong> Devam eden asenkron i\u015flemleri bile\u015fen demonte edildi\u011finde veya ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde iptal etme mekanizmas\u0131.
\n*   Sunucu Tarafl\u0131 \u0130\u015fleme (SSR) Deste\u011fi:<\/strong> Sunucu taraf\u0131nda veri \u00e7ekme ve istemci taraf\u0131nda hidrasyon i\u00e7in kolay entegrasyon.
\n*   TypeScript Deste\u011fi:<\/strong> G\u00fc\u00e7l\u00fc t\u00fcr \u00e7\u0131kar\u0131m\u0131 ve tip g\u00fcvenli\u011fi sa\u011flar.<\/p>\n
Bu \u00f6zellikler, React-Async<\/code>‘i sadece basit veri \u00e7ekme i\u015flemleri i\u00e7in de\u011fil, ayn\u0131 zamanda daha karma\u015f\u0131k asenkron ak\u0131\u015flar\u0131 y\u00f6netmek i\u00e7in de g\u00fc\u00e7l\u00fc bir ara\u00e7 haline getirir.<\/p>\n
React-Async ile Ba\u015flang\u0131\u00e7<\/h3>\nReact-Async<\/code>‘i projenize dahil etmek olduk\u00e7a basittir.<\/p>\n
Kurulum:<\/strong><\/p>\n
npm install react-async\nveya<\/h2>\nyarn add react-async<\/code><\/pre>\nTemel Kullan\u0131m: <\/code> Bile\u015feni ile<\/strong><\/p>\n
<\/code> bile\u015feni, render props desenini kullanarak asenkron i\u015flemlerin durumunu y\u00f6netir. promiseFn<\/code> prop’u, \u00e7\u00f6z\u00fcmlenmesini istedi\u011finiz bir promise d\u00f6nd\u00fcren bir fonksiyon al\u0131r. Bile\u015fenin \u00e7ocuklar\u0131 ise, farkl\u0131 durumlar\u0131 (y\u00fckleniyor, ba\u015far\u0131l\u0131, hata) i\u015fleyen fonksiyonlar veya do\u011frudan JSX olabilir.<\/p>\n
import React from 'react';\nimport { Async } from 'react-async';\n\nconst fetchUsers = async () => {\n  const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/users');\n  if (!response.ok) throw new Error('Kullan\u0131c\u0131lar y\u00fcklenirken bir hata olu\u015ftu.');\n  return response.json();\n};\n\nfunction UserList() {\n  return (\n    \n      {({ data, error, isLoading }) => {\n        if (isLoading) return Kullan\u0131c\u0131lar y\u00fckleniyor...<\/div>;\n        if (error) return Hata: {error.message}<\/div>;\n        if (data)\n          return (\n            \n              Kullan\u0131c\u0131 Listesi<\/h2>\n              \n                {data.map(user => (\n                  {user.name}<\/li>\n                ))}\n              <\/ul>\n            <\/div>\n          );\n        return null; \/\/ Ba\u015flang\u0131\u00e7 durumu veya veri yoksa\n      }}\n    <\/Async>\n  );\n}\n\nexport default UserList;<\/code><\/pre>\nBu \u00f6rnekte, fetchUsers<\/code> fonksiyonu bir promise d\u00f6nd\u00fcr\u00fcr. <\/code> bile\u015feni bu promise’\u0131 otomatik olarak \u00e7al\u0131\u015ft\u0131r\u0131r ve durumunu izler. isLoading<\/code>, error<\/code> ve data<\/code> gibi render prop’lar\u0131 arac\u0131l\u0131\u011f\u0131yla, uygulaman\u0131n mevcut durumuna g\u00f6re farkl\u0131 UI elemanlar\u0131 render edebiliriz.<\/p>\n
Temel Kullan\u0131m: useAsync<\/code> Hook’u ile<\/strong><\/p>\n
React Hooks, bile\u015fenler aras\u0131nda durum bilgisi olan mant\u0131\u011f\u0131 yeniden kullanmay\u0131 kolayla\u015ft\u0131rd\u0131. useAsync<\/code> hook’u, <\/code> bile\u015feninin sundu\u011fu t\u00fcm \u00f6zellikleri hook tabanl\u0131 bir API ile sunar.<\/p>\n
import React from 'react';\nimport { useAsync } from 'react-async';\n\nconst fetchPosts = async () => {\n  const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/posts');\n  if (!response.ok) throw new Error('G\u00f6nderiler y\u00fcklenirken bir hata olu\u015ftu.');\n  return response.json();\n};\n\nfunction PostList() {\n  const { data, error, isLoading, reload } = useAsync({ promiseFn: fetchPosts });\n\n  if (isLoading) return G\u00f6nderiler y\u00fckleniyor...<\/div>;\n  if (error) return Hata: {error.message}

G\u00f6nderi Listesi<\/h2>\n

Kullan\u0131c\u0131 Detaylar\u0131: {data.name}<\/h3>\n
Email: {data.email}<\/p>\n
Telefon: {data.phone}<\/p>\n <\/div>\n );\n return
L\u00fctfen bir kullan\u0131c\u0131 se\u00e7in.<\/div>;\n}\n\nfunction App() {\n const [selectedUserId, setSelectedUserId] = React.useState(1);\n\n return (\n
\n

G\u00f6nderi Listesi<\/h2>\n

Kullan\u0131c\u0131 Detaylar\u0131: {data.name}<\/h3>\n Email: {data.email}<\/p>\n Telefon: {data.phone}<\/p>\n <\/div>\n );\n return L\u00fctfen bir kullan\u0131c\u0131 se\u00e7in.<\/div>;\n}\n\nfunction App() {\n const [selectedUserId, setSelectedUserId] = React.useState(1);\n\n return (\n \n

Kullan\u0131c\u0131 Detaylar\u0131: {data.name}<\/h3>\n
Email: {data.email}<\/p>\n
Telefon: {data.phone}<\/p>\n <\/div>\n );\n return
L\u00fctfen bir kullan\u0131c\u0131 se\u00e7in.<\/div>;\n}\n\nfunction App() {\n const [selectedUserId, setSelectedUserId] = React.useState(1);\n\n return (\n
\n