React, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 mimarisi sayesinde kullan\u0131c\u0131 aray\u00fczlerini k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir par\u00e7alara ay\u0131rmay\u0131 ve y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r. Ancak, \u00e7o\u011fu dinamik web uygulamas\u0131n\u0131n harici veri kaynaklar\u0131na, yani Web API’lerine ba\u011flanmas\u0131 gerekir. Kullan\u0131c\u0131lar\u0131n g\u00f6rece\u011fi dinamik i\u00e7erik, genellikle bir sunucudan veya \u00fc\u00e7\u00fcnc\u00fc taraf bir hizmetten \u00e7ekilir. Bu veri \u00e7ekme (data fetching) i\u015flemleri, React bile\u015fenlerinin ya\u015fam d\u00f6ng\u00fcs\u00fcnde belirli anlarda ger\u00e7ekle\u015fmesi gereken “yan etkiler” (side effects) kategorisine girer.<\/p>\n
React’in s\u0131n\u0131f tabanl\u0131 bile\u015fenlerinde bu t\u00fcr yan etkiler Bu makalede, React’te * Veri \u00c7ekme (Data Fetching):<\/strong> Bir API’den veri almak. * Web API’lerinden veri \u00e7ekmek i\u00e7in JavaScript’in yerle\u015fik Bu yap\u0131y\u0131 A\u015fa\u011f\u0131da, Ba\u015fl\u0131k: {data.title}<\/p>\n \u0130\u00e7erik: {data.body}<\/p>\n <\/div>\n );\n}\n\nexport default MyComponent;<\/code><\/pre>\n Bu \u00f6rnekte: API \u00e7a\u011fr\u0131lar\u0131 yaparken, verinin kendisi kadar, bu verinin y\u00fckleme durumu ve olas\u0131 hatalar\u0131 da kullan\u0131c\u0131ya do\u011fru bir \u015fekilde yans\u0131t\u0131lmal\u0131d\u0131r. 1. Bu durum de\u011fi\u015fkenlerinin API \u00e7a\u011fr\u0131s\u0131 ya\u015fam d\u00f6ng\u00fcs\u00fcndeki ak\u0131\u015f\u0131 \u015f\u00f6yledir:<\/p>\n 1. \u00c7a\u011fr\u0131 Ba\u015flamadan \u00d6nce:<\/strong> Yukar\u0131daki \u00f6rnekte bu ak\u0131\u015f\u0131 zaten g\u00f6rm\u00fc\u015ft\u00fck. Bu durumlar\u0131 kullanarak bile\u015fen i\u00e7inde ko\u015fullu renderlama yapmak, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r:<\/p>\n G\u00f6nderiler y\u00fckleniyor...<\/p>\n {\/ Buraya bir spinner veya iskelet ekran eklenebilir <\/em>\/}\n <\/div>;\n }\n\n if (error) {\n return Veri \u00e7ekilirken bir hata olu\u015ftu: {error.message}<\/p>\n <\/div>;\n }\n\n return (\n {post.body}<\/p>\n <\/div>\n ))}\n <\/div>\n );\n}\n\nexport default MyComponentWithStateManagement;<\/code><\/pre>\n Bu \u00f6rnek, kullan\u0131c\u0131ya ak\u0131c\u0131 bir deneyim sunmak i\u00e7in y\u00fckleme ve hata durumlar\u0131n\u0131n nas\u0131l y\u00f6netildi\u011fini daha net g\u00f6sterir.<\/p>\n E\u011fer ikinci arg\u00fcman olarak ba\u011f\u0131ml\u0131l\u0131k dizisi belirtilmezse, E-posta: {user.email}<\/p>\n \u015eehir: {user.address.city}<\/p>\n <\/div>\n );\n}\n\nexport default UserProfile;<\/code><\/pre>\n Bu \u00f6rnekte, \u00d6nemli Not:<\/strong> Ba\u011f\u0131ml\u0131l\u0131k dizisine eklenen her de\u011fi\u015fken, API \u00e7a\u011fr\u0131lar\u0131nda hata y\u00f6netimi, uygulaman\u0131n sa\u011flaml\u0131\u011f\u0131 ve kullan\u0131c\u0131 deneyimi i\u00e7in kritik \u00f6neme sahiptir. A\u011f hatalar\u0131, sunucu hatalar\u0131 (4xx, 5xx), veya API’den gelen ge\u00e7ersiz yan\u0131tlar gibi \u00e7e\u015fitli sorunlarla kar\u015f\u0131la\u015f\u0131labilir.<\/p>\n {data.title}<\/p> : Veri bulunamad\u0131.<\/p>}\n <\/div>\n );\n}\n\nexport default ErrorHandlingComponent;<\/code><\/pre>\n Bu \u00f6rnekte: API \u00e7a\u011fr\u0131lar\u0131 s\u00f6z konusu oldu\u011funda, bir bile\u015fen kald\u0131r\u0131lmadan \u00f6nce devam eden bir Ba\u015fl\u0131k: {data.title}<\/p>\n \u0130\u00e7erik: {data.body}<\/p>\n <\/div>\n );\n}\n\nexport default AbortableFetchComponent;<\/code><\/pre>\n Bu \u00f6rnekte: Bu mekanizma, \u00f6zellikle kullan\u0131c\u0131 bir sayfadan h\u0131zl\u0131ca ayr\u0131ld\u0131\u011f\u0131nda veya bir bile\u015fen dinamik olarak kald\u0131r\u0131ld\u0131\u011f\u0131nda, gereksiz a\u011f trafi\u011fini ve React’in kald\u0131rm\u0131\u015f oldu\u011fu bir bile\u015fende durum g\u00fcncellemesi yapmaya \u00e7al\u0131\u015fmas\u0131ndan kaynaklanan uyar\u0131lar\u0131 \u00f6nler.<\/p>\n API \u00e7a\u011fr\u0131s\u0131 mant\u0131\u011f\u0131n\u0131 birden fazla bile\u015fende kullanman\u0131z gerekti\u011finde, bu mant\u0131\u011f\u0131 \u00f6zel bir hook i\u00e7ine kaps\u00fcllemek \u00e7ok faydal\u0131d\u0131r. Bu, kod tekrar\u0131n\u0131 azalt\u0131r, okunabilirli\u011fi art\u0131r\u0131r ve test edilebilirli\u011fi kolayla\u015ft\u0131r\u0131r.<\/p>\n Bu Ba\u015fl\u0131k: {post.title}<\/p>\n \u0130\u00e7erik: {post.body}<\/p>\n <\/div>\n );\n}\n\nexport default MyComponentUsingCustomHook;<\/code><\/pre>\n Axios ile bir B\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda, API \u00e7a\u011fr\u0131lar\u0131n\u0131 sadece bir kez yapmak, veriyi \u00f6nbelle\u011fe almak, arka planda yeniden do\u011frulamak, senkronizasyon sa\u011flamak ve global durumu y\u00f6netmek gibi ihtiya\u00e7lar ortaya \u00e7\u0131kar. Bu durumlar i\u00e7in \u00d6rne\u011fin, React Query ile bir veri \u00e7ekme i\u015flemi sadece birka\u00e7 sat\u0131r kodla yap\u0131labilir ve \u00f6nbellekleme, yeniden deneme, arka plan g\u00fcncelleme gibi bir\u00e7ok \u00f6zellik otomatik olarak gelir.<\/p>\n Bu k\u00fct\u00fcphaneler, 1. Yan Etkileri Yal\u0131tma:<\/strong> componentDidMount<\/code>, componentDidUpdate<\/code> ve componentWillUnmount<\/code> gibi ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131 kullan\u0131larak y\u00f6netilirdi. Ancak React Hooks’un tan\u0131t\u0131lmas\u0131yla birlikte, fonksiyonel bile\u015fenlerde de bu yetenekler useEffect<\/code> hook’u arac\u0131l\u0131\u011f\u0131yla sunuldu. useEffect<\/code>, fonksiyonel bile\u015fenlerde veri \u00e7ekme, abonelikler kurma veya DOM’u do\u011frudan manip\u00fcle etme gibi yan etkileri ger\u00e7ekle\u015ftirmenin standart yoludur.<\/p>\nuseEffect<\/code> hook’unu kullanarak Web API \u00e7a\u011fr\u0131lar\u0131n\u0131 nas\u0131l yapaca\u011f\u0131m\u0131z\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Temel API \u00e7a\u011fr\u0131s\u0131 yap\u0131s\u0131ndan ba\u015flayarak, veri durumunu y\u00f6netmeye, ba\u011f\u0131ml\u0131l\u0131k dizisini do\u011fru kullanmaya, hata y\u00f6netimine, temizleme fonksiyonlar\u0131na ve hatta daha geli\u015fmi\u015f senaryolara kadar ad\u0131m ad\u0131m ilerleyece\u011fiz. Amac\u0131m\u0131z, useEffect<\/code> ile sa\u011flam, verimli ve hata toleransl\u0131 API \u00e7a\u011fr\u0131lar\u0131 yapma konusunda size kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\nuseEffect Hook’una Giri\u015f<\/h3>\n
useEffect<\/code> hook’u, React fonksiyonel bile\u015fenlerinde “yan etkileri” ger\u00e7ekle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Yan etkiler, bir fonksiyonun ana i\u015flevinin d\u0131\u015f\u0131nda kalan ve d\u0131\u015f d\u00fcnya ile etkile\u015fime giren her t\u00fcrl\u00fc eylemi ifade eder. Bir React bile\u015feni ba\u011flam\u0131nda, bu genellikle \u015funlar\u0131 i\u00e7erir:<\/p>\n
\n* Abonelikler (Subscriptions):<\/strong> WebSocket gibi harici bir veri kayna\u011f\u0131na abone olmak.
\n* DOM Manip\u00fclasyonu:<\/strong> Bile\u015fenin d\u0131\u015f\u0131nda kalan DOM elemanlar\u0131n\u0131 do\u011frudan de\u011fi\u015ftirmek (\u00f6rne\u011fin, belge ba\u015fl\u0131\u011f\u0131n\u0131 g\u00fcncellemek).
\n* Zamanlay\u0131c\u0131lar (Timers):<\/strong> setTimeout<\/code> veya setInterval<\/code> kullanmak.<\/p>\nuseEffect<\/code>‘in temel yap\u0131s\u0131 \u015fu \u015fekildedir:<\/p>\nuseEffect(callback, [dependencies]);<\/code><\/pre>\ncallback<\/code> (Geri \u00c7a\u011f\u0131rma Fonksiyonu):<\/strong> Bu, yan etki mant\u0131\u011f\u0131n\u0131z\u0131 i\u00e7eren fonksiyondur. React, bile\u015fen her render edildi\u011finde (veya ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde) bu fonksiyonu \u00e7al\u0131\u015ft\u0131r\u0131r.
\n* [dependencies]<\/code> (Ba\u011f\u0131ml\u0131l\u0131k Dizisi):<\/strong> Bu iste\u011fe ba\u011fl\u0131 bir dizidir ve useEffect<\/code>‘in ne zaman yeniden \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131n\u0131 kontrol eder.
\n * Bo\u015f dizi ([]<\/code>):<\/strong> useEffect<\/code> yaln\u0131zca bile\u015fen ilk kez monte edildi\u011finde (mount) \u00e7al\u0131\u015f\u0131r ve bir daha \u00e7al\u0131\u015fmaz (s\u0131n\u0131f bile\u015fenlerindeki componentDidMount<\/code> gibidir). Bu, genellikle ilk veri \u00e7ekme i\u015flemleri i\u00e7in idealdir.
\n * Hi\u00e7bir ba\u011f\u0131ml\u0131l\u0131k dizisi yok:<\/strong> useEffect<\/code> bile\u015fen her render edildi\u011finde \u00e7al\u0131\u015f\u0131r. Bu, genellikle bir sonsuz d\u00f6ng\u00fcye yol a\u00e7abilece\u011fi i\u00e7in dikkatli kullan\u0131lmal\u0131d\u0131r ve \u00e7o\u011fu zaman istenmeyen bir durumdur.
\n * De\u011ferler i\u00e7eren bir dizi ([propA, stateB]<\/code>):<\/strong> useEffect<\/code> sadece dizideki de\u011ferlerden herhangi biri bir \u00f6nceki render’dan farkl\u0131ysa \u00e7al\u0131\u015f\u0131r. Bu, belirli prop veya state de\u011fi\u015fikliklerine tepki vermek i\u00e7in kullan\u0131l\u0131r.<\/p>\nuseEffect<\/code>‘in d\u00f6n\u00fc\u015f de\u011feri olarak bir fonksiyon d\u00f6nd\u00fcr\u00fclebilir. Bu d\u00f6n\u00fc\u015f fonksiyonu, bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda (unmount) veya useEffect<\/code> bir sonraki \u00e7al\u0131\u015ft\u0131\u011f\u0131nda (ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011fi i\u00e7in) temizleme (cleanup) i\u015flemi yapmak i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, abonelikleri iptal etmek veya zamanlay\u0131c\u0131lar\u0131 temizlemek i\u00e7in idealdir. Veri \u00e7ekme senaryolar\u0131nda, devam eden bir iste\u011fi iptal etmek i\u00e7in kullan\u0131labilir.<\/p>\nTemel API \u00c7a\u011fr\u0131s\u0131 Yap\u0131s\u0131<\/h3>\n
fetch<\/code> API’sini veya \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphaneleri (\u00f6rne\u011fin, Axios) kullanabiliriz. Bu makalede fetch<\/code> API’sine odaklanaca\u011f\u0131z, \u00e7\u00fcnk\u00fc herhangi bir ek kurulum gerektirmez ve modern taray\u0131c\u0131lar taraf\u0131ndan geni\u015f \u00e7apta desteklenir.<\/p>\nfetch<\/code> API’si, Promise tabanl\u0131d\u0131r ve asenkron i\u015flemler i\u00e7in async\/await<\/code> s\u00f6zdizimi ile kullan\u0131m\u0131 \u00e7ok daha okunabilir hale gelir. Temel bir fetch<\/code> iste\u011fi \u015fu \u015fekilde g\u00f6r\u00fcn\u00fcr:<\/p>\nasync function fetchData() {\n try {\n const response = await fetch('https:\/\/api.example.com\/data');\n if (!response.ok) {\n throw new Error(HTTP error! status: ${response.status}<\/code>);\n }\n const data = await response.json();\n console.log(data);\n } catch (error) {\n console.error(\"Veri \u00e7ekme hatas\u0131:\", error);\n }\n}\n\nfetchData();<\/code><\/pre>\nuseEffect<\/code> hook’u i\u00e7ine entegre ederken, genellikle bile\u015fenimizin durumu (state) ile etkile\u015fime girmesi gerekir. useState<\/code> hook’u, bile\u015fenin durumunu y\u00f6netmek i\u00e7in kullan\u0131l\u0131r ve API’den gelen verileri, y\u00fckleme durumunu ve hata mesajlar\u0131n\u0131 saklamak i\u00e7in vazge\u00e7ilmezdir.<\/p>\nuseEffect<\/code> ve useState<\/code> kullanarak basit bir veri \u00e7ekme \u00f6rne\u011fi verilmi\u015ftir:<\/p>\nimport React, { useState, useEffect } from 'react';\n\nfunction MyComponent() {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n async function fetchData() {\n try {\n const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/posts\/1');\n if (!response.ok) {\n throw new Error(HTTP hatas\u0131! Durum: ${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(); \/\/ useEffect i\u00e7inde tan\u0131mlanan asenkron fonksiyonu \u00e7a\u011f\u0131r\n }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi: Sadece bile\u015fen ilk y\u00fcklendi\u011finde \u00e7al\u0131\u015f\u0131r.\n\n if (loading) return API'den Gelen Veri:<\/h2>\n
\n1. useState<\/code> kullanarak data<\/code>, loading<\/code> ve error<\/code> durum de\u011fi\u015fkenlerini tan\u0131mlad\u0131k. loading<\/code> ba\u015flang\u0131\u00e7ta true<\/code> olarak ayarlanm\u0131\u015ft\u0131r \u00e7\u00fcnk\u00fc veri \u00e7ekme i\u015flemi hemen ba\u015flayacakt\u0131r.
\n2. useEffect<\/code> i\u00e7inde fetchData<\/code> ad\u0131nda asenkron bir fonksiyon tan\u0131mlad\u0131k. Bu fonksiyon, API’den veri \u00e7eker, ba\u015far\u0131l\u0131 olursa setData<\/code> ile durumu g\u00fcnceller, bir hata olursa setError<\/code> ile hatay\u0131 kaydeder ve her durumda setLoading(false)<\/code> ile y\u00fckleme durumunu sonland\u0131r\u0131r.
\n3. fetchData()<\/code> \u00e7a\u011fr\u0131s\u0131, useEffect<\/code> i\u00e7inde tan\u0131mland\u0131ktan hemen sonra yap\u0131l\u0131r.
\n4. Ba\u011f\u0131ml\u0131l\u0131k dizisi []<\/code> oldu\u011fu i\u00e7in, bu useEffect<\/code> sadece bile\u015fen ilk monte edildi\u011finde bir kez \u00e7al\u0131\u015f\u0131r.<\/p>\nVeri Durumunu Y\u00f6netme<\/h3>\n
useState<\/code> hook’u, bu farkl\u0131 durumlar\u0131 y\u00f6netmek i\u00e7in temel ara\u00e7t\u0131r. Genellikle \u00fc\u00e7 ana durum de\u011fi\u015fkeni kullan\u0131l\u0131r:<\/p>\ndata<\/code>:<\/strong> API’den ba\u015far\u0131l\u0131 bir \u015fekilde \u00e7ekilen veriyi saklar. Ba\u015flang\u0131\u00e7 de\u011feri null<\/code> veya bo\u015f bir dizi\/obje olabilir, beklenen veri tipine g\u00f6re de\u011fi\u015fir.
\n2. isLoading<\/code> (veya loading<\/code>):<\/strong> Veri \u00e7ekme i\u015fleminin devam edip etmedi\u011fini g\u00f6steren bir boolean bayra\u011f\u0131d\u0131r. true<\/code> ise y\u00fckleme s\u00fcr\u00fcyor demektir, false<\/code> ise i\u015flem tamamlanm\u0131\u015ft\u0131r. Kullan\u0131c\u0131ya bir y\u00fckleme g\u00f6stergesi (spinner, iskelet ekran) g\u00f6stermek i\u00e7in kullan\u0131l\u0131r.
\n3. error<\/code>:<\/strong> API \u00e7a\u011fr\u0131s\u0131 s\u0131ras\u0131nda meydana gelen herhangi bir hatay\u0131 saklar. Ba\u015flang\u0131\u00e7 de\u011feri null<\/code> olabilir. Bir hata olu\u015ftu\u011funda, bu de\u011fi\u015fken hata nesnesini veya mesaj\u0131n\u0131 i\u00e7erir ve kullan\u0131c\u0131ya hata mesaj\u0131n\u0131 g\u00f6stermek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
\n * setLoading(true)<\/code>
\n * setError(null)<\/code> (\u00f6nceki hatalar\u0131 temizlemek i\u00e7in)
\n2. \u00c7a\u011fr\u0131 Ba\u015far\u0131l\u0131 Oldu\u011funda:<\/strong>
\n * setData(gelenVeri)<\/code>
\n * setLoading(false)<\/code>
\n3. \u00c7a\u011fr\u0131 Ba\u015far\u0131s\u0131z Oldu\u011funda:<\/strong>
\n * setError(hataObjesi)<\/code>
\n * setLoading(false)<\/code>
\n4. finally<\/code> Blo\u011funda:<\/strong> setLoading(false)<\/code> genellikle try...catch<\/code> blo\u011funun finally<\/code> k\u0131sm\u0131nda \u00e7a\u011fr\u0131l\u0131r, b\u00f6ylece hem ba\u015far\u0131l\u0131 hem de ba\u015far\u0131s\u0131z durumlarda y\u00fckleme durumu do\u011fru bir \u015fekilde kapan\u0131r.<\/p>\n\/\/ ... (\u00f6nceki import ve useState tan\u0131mlamalar\u0131)\n\nfunction MyComponentWithStateManagement() {\n const [posts, setPosts] = useState([]); \/\/ Bir dizi bekledi\u011fimiz i\u00e7in ba\u015flang\u0131\u00e7 de\u011feri bo\u015f dizi\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const fetchPosts = async () => {\n setLoading(true); \/\/ Y\u00fckleme ba\u015flad\u0131\n setError(null); \/\/ \u00d6nceki hatalar\u0131 temizle\n try {\n const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/posts');\n if (!response.ok) {\n throw new Error(HTTP hatas\u0131! Durum: ${response.status}<\/code>);\n }\n const data = await response.json();\n setPosts(data); \/\/ Veri ba\u015far\u0131yla al\u0131nd\u0131\n } catch (err) {\n setError(err); \/\/ Hata olu\u015ftu\n } finally {\n setLoading(false); \/\/ Y\u00fckleme tamamland\u0131 (ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z)\n }\n };\n\n fetchPosts();\n }, []);\n\n if (loading) {\n return {post.title}<\/h3>\n
Ba\u011f\u0131ml\u0131l\u0131k Dizisi ve Kontroll\u00fc Yeniden \u00c7al\u0131\u015fma<\/h3>\n
useEffect<\/code> hook’unun ikinci arg\u00fcman\u0131 olan ba\u011f\u0131ml\u0131l\u0131k dizisi, performans ve do\u011fru \u00e7al\u0131\u015fma a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Bu dizi, useEffect<\/code> i\u00e7indeki yan etkinin ne zaman yeniden \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131n\u0131 belirler.<\/p>\n1. Bo\u015f Ba\u011f\u0131ml\u0131l\u0131k Dizisi (
[]<\/code>)<\/h4>\nuseEffect<\/code>‘in sadece bile\u015fen ilk monte edildi\u011finde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu, s\u0131n\u0131f bile\u015fenlerindeki componentDidMount<\/code> metoduna kar\u015f\u0131l\u0131k gelir. Genellikle bir bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fcnde yaln\u0131zca bir kez yap\u0131lmas\u0131 gereken veri \u00e7ekme i\u015flemleri i\u00e7in kullan\u0131l\u0131r.<\/p>\nuseEffect(() => {\n \/\/ Bu kod sadece bile\u015fen ilk kez DOM'a eklendi\u011finde \u00e7al\u0131\u015f\u0131r.\n \/\/ \u00d6rnek: \u0130lk sayfa y\u00fcklendi\u011finde bir listeyi \u00e7ekmek.\n fetch('https:\/\/api.example.com\/initial-data').then(...);\n}, []); \/\/ Bo\u015f dizi<\/code><\/pre>\n2. Ba\u011f\u0131ml\u0131l\u0131k Dizisi Yok<\/h4>\n
useEffect<\/code> bile\u015fen her render edildi\u011finde \u00e7al\u0131\u015f\u0131r. Bu, genellikle istenmeyen bir durumdur ve sonsuz d\u00f6ng\u00fclere yol a\u00e7abilir, \u00f6zellikle useState<\/code> g\u00fcncellemeleri i\u00e7eriyorsa.<\/p>\nuseEffect(() => {\n \/\/ D\u0130KKAT: Bu kod her render'da \u00e7al\u0131\u015f\u0131r!\n \/\/ E\u011fer bu i\u00e7inde bir state g\u00fcncelleniyorsa, sonsuz d\u00f6ng\u00fcye girebilirsiniz.\n console.log('Her renderda \u00e7al\u0131\u015f\u0131yorum!');\n}); \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi yok<\/code><\/pre>\n3. De\u011ferler \u0130\u00e7eren Ba\u011f\u0131ml\u0131l\u0131k Dizisi (
[value1, value2]<\/code>)<\/h4>\nuseEffect<\/code> i\u00e7indeki yan etkinin, dizideki de\u011ferlerden herhangi biri bir \u00f6nceki render’dan farkl\u0131ysa yeniden \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu, belirli prop veya state de\u011fi\u015fikliklerine tepki vermek i\u00e7in idealdir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n ID’si de\u011fi\u015fti\u011finde o kullan\u0131c\u0131n\u0131n verilerini \u00e7ekmek gibi.<\/p>\nimport React, { useState, useEffect } from 'react';\n\nfunction UserProfile({ userId }) {\n const [user, setUser] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const fetchUser = async () => {\n setLoading(true);\n setError(null);\n try {\n const response = await fetch(https:\/\/jsonplaceholder.typicode.com\/users\/${userId}<\/code>);\n if (!response.ok) {\n throw new Error(Kullan\u0131c\u0131 bulunamad\u0131! Durum: ${response.status}<\/code>);\n }\n const data = await response.json();\n setUser(data);\n } catch (err) {\n setError(err);\n } finally {\n setLoading(false);\n }\n };\n\n if (userId) { \/\/ userId'nin ge\u00e7erli oldu\u011fundan emin ol\n fetchUser();\n } else {\n setUser(null);\n setLoading(false);\n }\n \n }, [userId]); \/\/ userId de\u011fi\u015fti\u011finde useEffect yeniden \u00e7al\u0131\u015f\u0131r\n\n if (loading) return Kullan\u0131c\u0131 Profili: {user.name}<\/h2>\n
userId<\/code> prop’u useEffect<\/code>‘in ba\u011f\u0131ml\u0131l\u0131k dizisine dahil edilmi\u015ftir. Bu sayede, UserProfile<\/code> bile\u015fenine farkl\u0131 bir userId<\/code> prop’u geldi\u011finde (\u00f6rne\u011fin bir \u00fcst bile\u015fenden), useEffect<\/code> yeniden \u00e7al\u0131\u015facak ve yeni kullan\u0131c\u0131 i\u00e7in veri \u00e7ekecektir.<\/p>\nuseEffect<\/code>‘in do\u011fru \u00e7al\u0131\u015fmas\u0131 i\u00e7in stabil olmal\u0131d\u0131r. E\u011fer diziye bir obje veya fonksiyon gibi referans tipli bir de\u011fi\u015fken ekler ve bu de\u011fi\u015fken her render’da yeniden olu\u015fturulursa (\u00f6rne\u011fin, do\u011frudan useEffect<\/code> i\u00e7inde bir obje olu\u015fturup ba\u011f\u0131ml\u0131l\u0131k olarak vermek), useEffect<\/code> her zaman bu de\u011fi\u015fkenin de\u011fi\u015fti\u011fini d\u00fc\u015f\u00fcnecek ve sonsuz bir d\u00f6ng\u00fcye girecektir. Bu t\u00fcr durumlar i\u00e7in useCallback<\/code> veya useMemo<\/code> hook’lar\u0131 kullan\u0131labilir, ancak \u00e7o\u011fu basit API \u00e7a\u011fr\u0131s\u0131 senaryosunda bu kadar ileri gitmeye gerek kalmaz.<\/p>\nHata Y\u00f6netimi<\/h3>\n
fetch<\/code> API’si, a\u011f hatalar\u0131 (\u00f6rne\u011fin, internet ba\u011flant\u0131s\u0131 yok) durumunda bir Promise’i reddeder, ancak HTTP durum kodlar\u0131 (\u00f6rne\u011fin, 404 Not Found veya 500 Internal Server Error) durumunda Promise’i reddetmez; bunun yerine response.ok<\/code> \u00f6zelli\u011fini false<\/code> olarak ayarlar. Bu nedenle, hem a\u011f hatalar\u0131n\u0131 hem de HTTP durum hatalar\u0131n\u0131 ayr\u0131 ayr\u0131 ele almak \u00f6nemlidir.<\/p>\n\/\/ ... (\u00f6nceki import ve useState tan\u0131mlamalar\u0131)\n\nfunction ErrorHandlingComponent() {\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('https:\/\/jsonplaceholder.typicode.com\/nonexistent-endpoint'); \/\/ Bilerek hatal\u0131 bir URL\n \n \/\/ HTTP durum kodunu kontrol et\n if (!response.ok) {\n \/\/ Hata durumunda response.json() ile sunucudan gelen hata mesaj\u0131n\u0131 almaya \u00e7al\u0131\u015fabiliriz\n const errorData = await response.json().catch(() => ({ message: 'Bilinmeyen sunucu hatas\u0131.' }));\n throw new Error(HTTP hatas\u0131! Durum: ${response.status} - ${errorData.message || response.statusText}<\/code>);\n }\n \n const result = await response.json();\n setData(result);\n } catch (err) {\n \/\/ A\u011f hatalar\u0131 veya yukar\u0131daki throw new Error yakalan\u0131r\n console.error(\"Veri \u00e7ekme s\u0131ras\u0131nda bir hata olu\u015ftu:\", err);\n setError(err);\n } finally {\n setLoading(false);\n }\n };\n\n fetchData();\n }, []);\n\n if (loading) return API'den Gelen Veri:<\/h2>\n {data ?
\n* try...catch<\/code> blo\u011fu, hem fetch<\/code> Promise’inin reddedilmesi durumunda (a\u011f hatas\u0131) hem de bizim manuel olarak throw new Error<\/code> ile f\u0131rlatt\u0131\u011f\u0131m\u0131z durumlarda (HTTP durum hatas\u0131) hatalar\u0131 yakalar.
\n* response.ok<\/code> kontrol\u00fc, 200-299 aral\u0131\u011f\u0131nda olmayan HTTP durum kodlar\u0131n\u0131 yakalamak i\u00e7in kullan\u0131l\u0131r.
\n* response.json().catch(() => ...)<\/code> ile, sunucudan gelen hata mesaj\u0131n\u0131 (e\u011fer varsa) almaya \u00e7al\u0131\u015f\u0131r\u0131z. E\u011fer JSON parse edilemezse, varsay\u0131lan bir hata mesaj\u0131 kullan\u0131l\u0131r.
\n* setError(err)<\/code> ile hata durumunu g\u00fcncelleyip kullan\u0131c\u0131ya g\u00f6steririz.<\/p>\nTemizleme Fonksiyonlar\u0131<\/h3>\n
useEffect<\/code> hook’u, bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda (unmount) veya ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde \u00f6nceki yan etkinin temizlenmesini sa\u011flayan bir fonksiyon d\u00f6nd\u00fcrebilir. Bu temizleme fonksiyonu, \u00f6zellikle abonelikleri iptal etmek, zamanlay\u0131c\u0131lar\u0131 durdurmak veya devam eden a\u011f isteklerini iptal etmek gibi durumlarda bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 ve istenmeyen davran\u0131\u015flar\u0131 \u00f6nlemek i\u00e7in \u00e7ok \u00f6nemlidir.<\/p>\nfetch<\/code> iste\u011fini iptal etmek, “Can’t perform a React state update on an unmounted component” (Kald\u0131r\u0131lm\u0131\u015f bir bile\u015fende React durum g\u00fcncellemesi yap\u0131lamaz) uyar\u0131s\u0131n\u0131 \u00f6nlemenin yayg\u0131n bir yoludur. fetch<\/code> API’si do\u011frudan bir iptal mekanizmas\u0131na sahip olmasa da, AbortController<\/code> API’si bu i\u015flevi sa\u011flar.<\/p>\nimport React, { useState, useEffect } from 'react';\n\nfunction AbortableFetchComponent() {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const abortController = new AbortController(); \/\/ Yeni bir AbortController olu\u015ftur\n const signal = abortController.signal; \/\/ \u0130ptal sinyalini al\n\n const fetchData = async () => {\n setLoading(true);\n setError(null);\n try {\n const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/posts\/1', { signal }); \/\/ \u0130stekle birlikte sinyali g\u00f6nder\n \n if (!response.ok) {\n throw new Error(HTTP hatas\u0131! Durum: ${response.status}<\/code>);\n }\n \n const result = await response.json();\n setData(result);\n } catch (err) {\n \/\/ E\u011fer hata AbortError ise, iste\u011fin iptal edildi\u011fi anlam\u0131na gelir.\n \/\/ Bu durumda state g\u00fcncellemesi yapmay\u0131z.\n if (err.name === 'AbortError') {\n console.log('Fetch iste\u011fi iptal edildi.');\n } else {\n setError(err);\n }\n } finally {\n setLoading(false);\n }\n };\n\n fetchData();\n\n \/\/ Temizleme fonksiyonu: Bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda veya ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r.\n return () => {\n abortController.abort(); \/\/ Devam eden iste\u011fi iptal et\n };\n }, []); \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi bo\u015f\n\n if (loading) return API'den Gelen Veri (\u0130ptal Edilebilir):<\/h2>\n
\n1. AbortController<\/code> nesnesi olu\u015fturulur ve signal<\/code> \u00f6zelli\u011fi fetch<\/code> iste\u011fine signal<\/code> se\u00e7ene\u011fi olarak ge\u00e7irilir.
\n2. useEffect<\/code>‘ten d\u00f6nen temizleme fonksiyonunda abortController.abort()<\/code> \u00e7a\u011fr\u0131l\u0131r. Bu, fetch<\/code> iste\u011fini iptal eder.
\n3. catch<\/code> blo\u011funda, hatan\u0131n AbortError<\/code> olup olmad\u0131\u011f\u0131n\u0131 kontrol ederiz. E\u011fer \u00f6yleyse, bu bir iptal hatas\u0131d\u0131r ve genellikle kullan\u0131c\u0131ya g\u00f6sterilmesi gereken ger\u00e7ek bir hata de\u011fildir, bu y\u00fczden setError<\/code> \u00e7a\u011fr\u0131s\u0131ndan ka\u00e7\u0131n\u0131r\u0131z.<\/p>\nGeli\u015fmi\u015f Kullan\u0131m Senaryolar\u0131 ve \u0130pu\u00e7lar\u0131<\/h3>\n
useEffect<\/code> ile API \u00e7a\u011fr\u0131lar\u0131 yapmak temel d\u00fczeyde yeterli olsa da, daha karma\u015f\u0131k uygulamalar ve daha iyi geli\u015ftirici deneyimi i\u00e7in baz\u0131 geli\u015fmi\u015f teknikler ve k\u00fct\u00fcphaneler mevcuttur.<\/p>\n1. Custom Hooks (\u00d6zel Hook’lar)<\/h4>\n
\/\/ useFetch.js\nimport { useState, useEffect } from 'react';\n\nfunction useFetch(url, options) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const abortController = new AbortController();\n const signal = abortController.signal;\n\n const fetchData = async () => {\n setLoading(true);\n setError(null);\n try {\n const response = await fetch(url, { ...options, signal });\n if (!response.ok) {\n throw new Error(HTTP hatas\u0131! Durum: ${response.status}<\/code>);\n }\n const result = await response.json();\n setData(result);\n } catch (err) {\n if (err.name === 'AbortError') {\n console.log('Fetch iste\u011fi iptal edildi:', url);\n } else {\n setError(err);\n }\n } finally {\n setLoading(false);\n }\n };\n\n if (url) { \/\/ URL varsa iste\u011fi yap\n fetchData();\n } else { \/\/ URL yoksa, hemen y\u00fcklemeyi bitir\n setLoading(false);\n }\n\n return () => {\n abortController.abort();\n };\n }, [url, JSON.stringify(options)]); \/\/ URL veya options de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015f\n\n return { data, loading, error };\n}\n\nexport default useFetch;<\/code><\/pre>\nuseFetch<\/code> hook’unu bir bile\u015fende kullanmak \u00e7ok daha temiz olacakt\u0131r:<\/p>\n\/\/ MyComponentUsingCustomHook.js\nimport React from 'react';\nimport useFetch from '.\/useFetch'; \/\/ useFetch hook'umuzu import ediyoruz\n\nfunction MyComponentUsingCustomHook() {\n const { data: post, loading, error } = useFetch('https:\/\/jsonplaceholder.typicode.com\/posts\/2');\n\n if (loading) return Custom Hook ile Gelen Veri:<\/h2>\n
2. Axios K\u00fct\u00fcphanesi<\/h4>\n
fetch<\/code> API’si harika olsa da, Axios gibi \u00fc\u00e7\u00fcnc\u00fc taraf bir k\u00fct\u00fcphane, API \u00e7a\u011fr\u0131lar\u0131 i\u00e7in ek \u00f6zellikler ve daha rahat bir kullan\u0131m sunar:
\n* Otomatik JSON d\u00f6n\u00fc\u015ft\u00fcrme
\n* \u0130stek\/Yan\u0131t interceptor’lar\u0131
\n* Daha iyi hata y\u00f6netimi (HTTP durum kodlar\u0131 i\u00e7in Promise’i otomatik reddetme)
\n* \u0130ste\u011fi iptal etme (yerle\u015fik cancelToken<\/code>)<\/p>\nuseEffect<\/code> \u00e7a\u011fr\u0131s\u0131 \u015f\u00f6yle g\u00f6r\u00fcnebilir:<\/p>\nimport React, { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nfunction AxiosFetchComponent() {\n const [todos, setTodos] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const source = axios.CancelToken.source(); \/\/ Axios iptal token'\u0131\n \n const fetchTodos = async () => {\n setLoading(true);\n setError(null);\n try {\n const response = await axios.get('https:\/\/jsonplaceholder.typicode.com\/todos', {\n cancelToken: source.token \/\/ \u0130ptal token'\u0131n\u0131 iste\u011fe ekle\n });\n setTodos(response.data);\n } catch (err) {\n if (axios.isCancel(err)) {\n console.log('Axios iste\u011fi iptal edildi:', err.message);\n } else {\n setError(err);\n }\n } finally {\n setLoading(false);\n }\n };\n\n fetchTodos();\n\n return () => {\n source.cancel('\u0130stek temizleme s\u0131ras\u0131nda iptal edildi.'); \/\/ Temizleme fonksiyonunda iptal et\n };\n }, []);\n\n if (loading) return Yap\u0131lacaklar Listesi (Axios ile)<\/h2>\n
\n {todos.slice(0, 5).map(todo => ( \/\/ \u0130lk 5 tanesini g\u00f6sterelim\n
3. Veri \u00d6nbellekleme ve Durum Y\u00f6netimi K\u00fct\u00fcphaneleri<\/h4>\n
React Query<\/code> (TanStack Query) veya SWR<\/code> gibi k\u00fct\u00fcphaneler useEffect<\/code>‘e g\u00f6re \u00e7ok daha geli\u015fmi\u015f \u00e7\u00f6z\u00fcmler sunar. Bu k\u00fct\u00fcphaneler, useEffect<\/code>‘in \u00fczerine in\u015fa edilmi\u015f olsa da, veri \u00e7ekme, \u00f6nbellekleme, hata y\u00f6netimi ve y\u00fckleme durumlar\u0131 gibi karma\u015f\u0131k senaryolar\u0131 otomatikle\u015ftirerek geli\u015ftiriciye b\u00fcy\u00fck kolayl\u0131k sa\u011flarlar.<\/p>\n\/\/ React Query \u00f6rne\u011fi (kurulum ve Context Provider gerektirir)\nimport { useQuery } from '@tanstack\/react-query';\n\nfunction ReactQueryComponent() {\n const { isLoading, error, data } = useQuery({\n queryKey: ['todos'], \/\/ \u00d6nbellek anahtar\u0131\n queryFn: async () => { \/\/ Veri \u00e7ekme fonksiyonu\n const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/todos');\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n return response.json();\n }\n });\n\n if (isLoading) return Yap\u0131lacaklar Listesi (React Query ile)<\/h2>\n
\n {data.slice(0, 5).map(todo => (\n
useEffect<\/code>‘i do\u011frudan kullanma ihtiyac\u0131n\u0131 azaltarak, veri katman\u0131n\u0131 daha soyut ve y\u00f6netilebilir hale getirir.<\/p>\nEn \u0130yi Uygulamalar ve S\u0131k Yap\u0131lan Hatalar<\/h3>\n
useEffect<\/code> ile API \u00e7a\u011fr\u0131lar\u0131 yaparken dikkat edilmesi gereken baz\u0131 \u00f6nemli noktalar ve ka\u00e7\u0131n\u0131lmas\u0131 gereken yayg\u0131n hatalar vard\u0131r:<\/p>\nuseEffect<\/code> sadece yan etkiler i\u00e7in kullan\u0131lmal\u0131d\u0131r. Bile\u015fenin render \u00e7\u0131kt\u0131s\u0131n\u0131 do\u011frudan etkilemeyen, ancak d\u0131\u015f d\u00fcnya ile etkile\u015fime giren i\u015flemler i\u00e7in idealdir. Durum g\u00fcncellemelerini useEffect<\/code> d\u0131\u015f\u0131nda, olay i\u015fleyicilerinde yapmak daha uygundur.
\n2. Sonsuz D\u00f6ng\u00fcleri \u00d6nleme:<\/strong> En yayg\u0131n hatalardan biri, ba\u011f\u0131ml\u0131l\u0131k dizisini yanl\u0131\u015f kullanmak veya hi\u00e7 kullanmamakt\u0131r. useEffect<\/code> i\u00e7indeki bir durum g\u00fcncellemesi, bile\u015fenin yeniden render olmas\u0131na neden olabilir ve e\u011fer ba\u011f\u0131ml\u0131l\u0131k dizisi do\u011fru ayarlanmam\u0131\u015fsa, useEffect<\/code> tekrar \u00e7al\u0131\u015farak tekrar bir durum g\u00fcncellemesi tetikleyebilir ve bu bir sonsuz d\u00f6ng\u00fcye yol a\u00e7abilir. Bu nedenle, ba\u011f\u0131ml\u0131l\u0131k dizisine dikkat edin ve referans tipli de\u011fi\u015fkenler i\u00e7in useCallback<\/code> veya useMemo<\/code> kullanmay\u0131 d\u00fc\u015f\u00fcn\u00fcn.
\n3. Temizleme Fonksiyonlar\u0131n\u0131 Kullanma:<\/strong> \u00d6zellikle uzun s\u00fcreli i\u015flemler (abonelikler, zamanlay\u0131c\u0131lar, a\u011f istekleri) i\u00e7in temizleme fonksiyonlar\u0131 mutlaka kullan\u0131lmal\u0131d\u0131r. Bu, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 ve “unmounted component” uyar\u0131lar\u0131n\u0131 \u00f6nler. AbortController<\/code> bunun i\u00e7in harika bir ara\u00e7t\u0131r.
\n4. Hata Y\u00f6netimini \u0130hmal Etmeme:<\/strong> API \u00e7a\u011fr\u0131lar\u0131 her zaman ba\u015far\u0131s\u0131z olabilir. Uygulaman\u0131z\u0131n bu durumlar\u0131 zarif\u00e7e ele almas\u0131 ve kullan\u0131c\u0131ya anlaml\u0131 geri bildirimler sunmas\u0131 \u00f6nemlidir. try...catch<\/code> bloklar\u0131 ve response.ok<\/code> kontrol\u00fc vazge\u00e7ilmezdir.
\n5. Gereksiz Yeniden \u00c7al\u0131\u015fmalar\u0131 Azaltma:<\/strong> Ba\u011f\u0131ml\u0131l\u0131k dizisini do\u011fru ayarlamak, useEffect<\/code>‘in sadece ger\u00e7ekten gerekti\u011finde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu, gereksiz API \u00e7a\u011fr\u0131lar\u0131n\u0131 ve performans sorunlar\u0131n\u0131 \u00f6nler.