Y\u00fckleniyor...<\/div>;\n if (hata) return
Hata: {hata.message}<\/div>;\n\n return (\n
\u00c7ekilen Veri:<\/h3>\n
{JSON.stringify(veri, null, 2)}<\/pre>\n<\/p><\/div>\n      );
\n    }
\n    <\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, useEffect<\/code> bir API'den veri \u00e7ekme i\u015flemini y\u00f6netiyor. Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi []<\/code>, bu efektin yaln\u0131zca bile\u015fen ilk kez DOM'a eklendi\u011finde (mount edildi\u011finde) bir kez \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Bu sayede, her yeniden render i\u015fleminde gereksiz veri \u00e7ekme isteklerinin \u00f6n\u00fcne ge\u00e7ilir, b\u00f6ylece a\u011f y\u00fck\u00fc ve performans art\u0131r\u0131lm\u0131\u015f olur. useEffect<\/code>'in d\u00f6nd\u00fcrd\u00fc\u011f\u00fc opsiyonel temizleme fonksiyonu ise, bile\u015fen unmount edildi\u011finde veya efekt yeniden \u00e7al\u0131\u015fmadan \u00f6nce kaynaklar\u0131n d\u00fczg\u00fcn bir \u015fekilde serbest b\u0131rak\u0131lmas\u0131n\u0131 sa\u011flayarak bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nler. Bu da useEffect<\/code>'in sadece i\u015fleri ba\u015flatmakla kalmay\u0131p, ayn\u0131 zamanda sonland\u0131rmak i\u00e7in de ne kadar \u00f6nemli oldu\u011funu g\u00f6sterir.<\/p>\n
Ba\u011f\u0131ml\u0131l\u0131k Dizisi (Dependency Array) Nas\u0131l \u00c7al\u0131\u015f\u0131r ve Hatalar Nas\u0131l \u00d6nlenir?<\/h2>\nuseEffect<\/code> Hook'unun en kritik ve belki de en \u00e7ok yanl\u0131\u015f anla\u015f\u0131lan par\u00e7alar\u0131ndan biri ba\u011f\u0131ml\u0131l\u0131k dizisidir. Bu dizi, React'a \"Bu efekti ne zaman yeniden \u00e7al\u0131\u015ft\u0131rmal\u0131y\u0131m?\" sorusunun cevab\u0131n\u0131 verir. Ba\u011f\u0131ml\u0131l\u0131k dizisi (ikinci arg\u00fcman), useEffect<\/code>'in i\u00e7indeki callback fonksiyonunun hangi de\u011ferlere ba\u011f\u0131ml\u0131 oldu\u011funu belirtir. React, bu dizideki de\u011ferlerden herhangi birinin bir \u00f6nceki render'dan farkl\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. E\u011fer farkl\u0131ysa, efekt callback'ini yeniden \u00e7al\u0131\u015ft\u0131r\u0131r.<\/p>\n
\nBo\u015f Dizi ([]<\/code>):<\/strong> Efekt, bile\u015fen ilk monte edildi\u011finde (mount) bir kez \u00e7al\u0131\u015f\u0131r ve bir daha asla \u00e7al\u0131\u015fmaz (temizleme fonksiyonu hari\u00e7). Bu, componentDidMount<\/code> davran\u0131\u015f\u0131na benzer. \u00d6rne\u011fin, ba\u015flang\u0131\u00e7 verilerini \u00e7ekmek veya olay dinleyicilerini bir kez ayarlamak i\u00e7in idealdir.<\/li>\n
Dizi Yok (arg\u00fcman verilmemi\u015f):<\/strong> Efekt, bile\u015fen her render edildi\u011finde \u00e7al\u0131\u015f\u0131r. Bu genellikle istenmeyen bir durumdur ve performans sorunlar\u0131na yol a\u00e7abilir, \u00e7\u00fcnk\u00fc her state veya prop de\u011fi\u015fti\u011finde yan etki yeniden tetiklenir.<\/li>\n
Dolu Dizi ([dep1, dep2]<\/code>):<\/strong> Efekt, bile\u015fen ilk monte edildi\u011finde \u00e7al\u0131\u015f\u0131r ve daha sonra yaln\u0131zca dep1<\/code> veya dep2<\/code> de\u011ferlerinden herhangi biri de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015f\u0131r. Bu, componentDidUpdate<\/code>'in belirli ko\u015fullar alt\u0131nda \u00e7al\u0131\u015fmas\u0131na benzer bir kontrol sa\u011flar.<\/li>\n<\/ul>\nVaka Analizi: Kullan\u0131c\u0131 ID'sine G\u00f6re Veri \u00c7ekme<\/strong><\/p>\n
Bir kullan\u0131c\u0131 profil sayfas\u0131nda, URL'den al\u0131nan userId<\/code> prop'una g\u00f6re kullan\u0131c\u0131 verilerini \u00e7ekmemiz gerekti\u011fini d\u00fc\u015f\u00fcnelim. Kullan\u0131c\u0131 ID'si de\u011fi\u015fti\u011finde verilerin g\u00fcncellenmesi gerekir.<\/p>\n
\n    import React, { useEffect, useState } from 'react';\n\n    function KullaniciProfilBileseni({ userId }) {\n      const [kullaniciVerisi, setKullaniciVerisi] = useState(null);\n      const [yukleniyor, setYukleniyor] = useState(true);\n\n      useEffect(() => {\n        setYukleniyor(true); \/\/ Yeni veri \u00e7ekilirken y\u00fcklenme durumunu ayarla\n        const fetchKullanici = async () => {\n          try {\n            const response = await fetch(https:\/\/api.example.com\/users\/${userId}<\/code>);\n            const data = await response.json();\n            setKullaniciVerisi(data);\n          } catch (error) {\n            console.error('Kullan\u0131c\u0131 verisi \u00e7ekilirken hata olu\u015ftu:', error);\n          } finally {\n            setYukleniyor(false);\n          }\n        };\n\n        fetchKullanici();\n\n        \/\/ Temizleme fonksiyonu (iste\u011fe ba\u011fl\u0131, burada gerekli de\u011filse de iyi bir pratiktir)\n        return () => {\n          \/\/ \u00d6rne\u011fin, devam eden bir iste\u011fi iptal etmek i\u00e7in kullan\u0131labilir.\n          console.log(Kullan\u0131c\u0131 ID ${userId} i\u00e7in efekt temizlendi.<\/code>);\n        };\n      }, [userId]); \/\/ userId de\u011fi\u015fti\u011finde efekti yeniden \u00e7al\u0131\u015ft\u0131r.\n\n      if (yukleniyor) return Kullan\u0131c\u0131 bilgileri y\u00fckleniyor...<\/div>;\n      if (!kullaniciVerisi) return Kullan\u0131c\u0131 bulunamad\u0131.<\/div>;\n\n      return (\n        \n          Kullan\u0131c\u0131 Profili<\/h3>\n          Ad: {kullaniciVerisi.name}<\/p>\n          
Email: {kullaniciVerisi.email}<\/p>\n        <\/div>\n      );\n    }\n    <\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekte, ba\u011f\u0131ml\u0131l\u0131k dizisindeki [userId]<\/code>, React'a userId<\/code> prop'u her de\u011fi\u015fti\u011finde efekti yeniden \u00e7al\u0131\u015ft\u0131rmas\u0131 gerekti\u011fini s\u00f6yler. E\u011fer userId<\/code> de\u011fi\u015fmezse, bile\u015fen yeniden render olsa bile efekt yeniden \u00e7al\u0131\u015fmaz, bu da gereksiz a\u011f isteklerini \u00f6nler. Ancak, ba\u011f\u0131ml\u0131l\u0131klar\u0131 do\u011fru bir \u015fekilde belirtmek \u00e7ok \u00f6nemlidir. E\u011fer userId<\/code>'yi ba\u011f\u0131ml\u0131l\u0131k dizisinden \u00e7\u0131kar\u0131rsan\u0131z, efekt sadece bile\u015fen ilk monte edildi\u011finde \u00e7al\u0131\u015f\u0131r ve userId<\/code> daha sonra de\u011fi\u015fse bile yeni verileri \u00e7ekmez. Bu \"stale closure\" (eskimi\u015f kapan\u0131\u015f) sorununa yol a\u00e7abilir, yani efektin i\u00e7inde kullan\u0131lan userId<\/code> de\u011feri ilk render'daki de\u011fer olarak kal\u0131r.<\/p>\n
\n      Uzman \u0130pucu: Ba\u011f\u0131ml\u0131l\u0131k dizisini asla yalan s\u00f6ylemeyin! Efektinizin i\u00e7inde kulland\u0131\u011f\u0131n\u0131z herhangi bir state, prop veya fonksiyondan (useCallback<\/code> veya useMemo<\/code> ile sarmalanmam\u0131\u015fsa) ba\u011f\u0131ml\u0131l\u0131k olarak eklemeyi unutmay\u0131n. eslint-plugin-react-hooks'un exhaustive-deps<\/code> kural\u0131 bu konuda size b\u00fcy\u00fck \u00f6l\u00e7\u00fcde yard\u0131mc\u0131 olacakt\u0131r.\n    <\/div>\nAyr\u0131ca, ba\u011f\u0131ml\u0131l\u0131k dizisine nesne veya dizi gibi referans tiplerini do\u011frudan eklerken dikkatli olmal\u0131s\u0131n\u0131z. JavaScript'te nesneler ve diziler referansla kar\u015f\u0131la\u015ft\u0131r\u0131l\u0131r, bu da her render'da yeni bir nesne veya dizi olu\u015fturuldu\u011funda, i\u00e7eri\u011fi ayn\u0131 olsa bile useEffect<\/code>'in yeniden \u00e7al\u0131\u015fmas\u0131na neden olabilir. Bu durumu \u00f6nlemek i\u00e7in, bu t\u00fcr de\u011ferleri useMemo<\/code> ile sarmalayarak referans stabilitesini sa\u011flayabilirsiniz.<\/p>\n
Temizleme Fonksiyonu (Cleanup Function) Nedir ve Neden \u00d6nemlidir?<\/h2>\nuseEffect<\/code> sadece yan etkileri ba\u015flatmakla kalmaz, ayn\u0131 zamanda onlar\u0131 d\u00fczg\u00fcn bir \u015fekilde sonland\u0131rmam\u0131za da olanak tan\u0131r. \u0130\u015fte bu noktada, useEffect<\/code> callback'inden d\u00f6nd\u00fcr\u00fclen temizleme fonksiyonu (cleanup function) devreye girer. Bu fonksiyon, bile\u015fen DOM'dan kald\u0131r\u0131lmadan (unmount) \u00f6nce veya bir sonraki render'da efekt yeniden \u00e7al\u0131\u015fmadan \u00f6nce tetiklenir.<\/p>\n
Temizleme fonksiyonunun temel amac\u0131, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek ve gereksiz kaynak t\u00fcketimini durdurmakt\u0131r. React, bir efektin bir \u00f6nceki \u00e7al\u0131\u015fmas\u0131ndan kaynaklanan herhangi bir aboneli\u011fi, olay dinleyicisini veya zamanlay\u0131c\u0131y\u0131 kald\u0131rmak i\u00e7in bu fonksiyonu kullan\u0131r. Bu mekanizma, uygulaman\u0131z\u0131n uzun vadeli kararl\u0131l\u0131\u011f\u0131 ve performans\u0131 i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n
Vaka Analizi: Pencere Yeniden Boyutland\u0131rma Dinleyicisi Y\u00f6netimi<\/strong><\/p>\n
Bir bile\u015fenin, pencerenin boyutunu her de\u011fi\u015fti\u011finde takip etmesi gerekti\u011fini ve bu bilgiyi kullanarak aray\u00fcz\u00fcn\u00fc g\u00fcncellemesi gerekti\u011fini d\u00fc\u015f\u00fcnelim.<\/p>\n
\n    import React, { useEffect, useState } from 'react';\n\n    function PencereBoyutuGosterici() {\n      const [boyut, setBoyut] = useState({\n        genislik: window.innerWidth,\n        yukseklik: window.innerHeight,\n      });\n\n      useEffect(() => {\n        const handleResize = () => {\n          setBoyut({\n            genislik: window.innerWidth,\n            yukseklik: window.innerHeight,\n          });\n        };\n\n        window.addEventListener('resize', handleResize); \/\/ Olay dinleyicisini ekle\n\n        \/\/ Temizleme fonksiyonu:\n        return () => {\n          window.removeEventListener('resize', handleResize); \/\/ Bile\u015fen unmount edildi\u011finde kald\u0131r\n          console.log('Pencere boyutu dinleyicisi kald\u0131r\u0131ld\u0131.');\n        };\n      }, []); \/\/ Sadece bile\u015fen ilk monte edildi\u011finde bir kez ayarla\n\n      return (\n        \n          Pencere Boyutu<\/h3>\n          Geni\u015flik: {boyut.genislik}px<\/p>\n          
Y\u00fckseklik: {boyut.yukseklik}px<\/p>\n        <\/div>\n      );\n    }\n    <\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekte, useEffect<\/code> ile bir 'resize'<\/code> olay dinleyicisi ekleniyor. E\u011fer temizleme fonksiyonunu sa\u011flamazsak ve bile\u015fen DOM'dan kald\u0131r\u0131l\u0131rsa, handleResize<\/code> fonksiyonu hala \u00e7al\u0131\u015fmaya devam ederdi. Bu, kald\u0131r\u0131lm\u0131\u015f bir bile\u015fenin state'ini g\u00fcncellemeye \u00e7al\u0131\u015farak hatalara yol a\u00e7abilir ve potansiyel olarak uygulaman\u0131zda performans sorunlar\u0131na neden olabilir. Temizleme fonksiyonu (return () => { ... }<\/code>), bile\u015fen unmount edildi\u011finde veya ba\u011f\u0131ml\u0131l\u0131klar (bu \u00f6rnekte bo\u015f dizi oldu\u011fu i\u00e7in sadece unmount durumunda) de\u011fi\u015fti\u011finde dinleyiciyi kald\u0131r\u0131r. Bu, uygulaman\u0131n daha kararl\u0131 ve verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n
Temizleme fonksiyonu ayr\u0131ca, bir useEffect<\/code> i\u00e7inde ba\u015flat\u0131lan aboneliklerin (WebSockets gibi), zamanlay\u0131c\u0131lar\u0131n (setTimeout<\/code>, setInterval<\/code>) veya di\u011fer uzun \u00f6m\u00fcrl\u00fc i\u015flemlerin iptal edilmesi i\u00e7in de kullan\u0131l\u0131r. Herhangi bir harici kayna\u011fa ba\u011fland\u0131\u011f\u0131n\u0131zda veya k\u00fcresel bir \u015feye m\u00fcdahale etti\u011finizde, genellikle bir temizleme fonksiyonuna ihtiyac\u0131n\u0131z vard\u0131r. Bu, React'\u0131n tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131n\u0131 ve bile\u015fen izolasyonunu koruman\u0131n \u00f6nemli bir par\u00e7as\u0131d\u0131r.<\/p>\n
\n    function ZamanlayiciBileseni() {\n      const [saniye, setSaniye] = useState(0);\n\n      useEffect(() => {\n        const intervalId = setInterval(() => {\n          setSaniye(prevSaniye => prevSaniye + 1);\n        }, 1000);\n\n        \/\/ Zamanlay\u0131c\u0131y\u0131 temizle\n        return () => {\n          clearInterval(intervalId);\n          console.log('Zamanlay\u0131c\u0131 durduruldu.');\n        };\n      }, []); \/\/ Sadece ilk render'da ba\u015fla\n\n      return Ge\u00e7en S\u00fcre: {saniye} saniye<\/p>;\n    }\n    <\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki kodda, clearInterval(intervalId)<\/code> \u00e7a\u011fr\u0131s\u0131, bile\u015fen ekrandan kald\u0131r\u0131ld\u0131\u011f\u0131nda zamanlay\u0131c\u0131n\u0131n \u00e7al\u0131\u015fmas\u0131n\u0131 durdurur. Aksi takdirde, bile\u015fen olmasa bile her saniye state g\u00fcncellemesi yapmaya \u00e7al\u0131\u015farak hata ve performans sorunlar\u0131na yol a\u00e7ard\u0131. Bu nedenle, useEffect<\/code> kullan\u0131rken temizleme fonksiyonunu d\u00fc\u015f\u00fcnmek, sa\u011flam ve hatas\u0131z uygulamalar yazmak i\u00e7in kritik bir ad\u0131md\u0131r.<\/p>\n
Performans Optimizasyonu: useEffect ile Gereksiz Yeniden \u00c7al\u0131\u015fmalar\u0131 \u00d6nleme<\/h2>\nuseEffect<\/code> do\u011fru kullan\u0131lmad\u0131\u011f\u0131nda, React uygulaman\u0131zda ciddi performans d\u00fc\u015f\u00fc\u015flerine neden olabilir. \u00d6zellikle ba\u011f\u0131ml\u0131l\u0131k dizisini yanl\u0131\u015f belirlemek veya hi\u00e7 belirtmemek, efektin her render'da gereksiz yere \u00e7al\u0131\u015fmas\u0131na yol a\u00e7ar. Bu da s\u0131k s\u0131k a\u011f istekleri g\u00f6ndermeye, a\u011f\u0131r hesaplamalar yapmaya veya DOM'u gereksiz yere manip\u00fcle etmeye neden olabilir.<\/p>\n
Performans\u0131 optimize etmek i\u00e7in, useEffect<\/code>'in yaln\u0131zca ger\u00e7ekten ihtiya\u00e7 duyuldu\u011funda \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak esast\u0131r. Bunun i\u00e7in en \u00f6nemli ara\u00e7, elbette ba\u011f\u0131ml\u0131l\u0131k dizisidir. Ancak bazen ba\u011f\u0131ml\u0131l\u0131k dizisine eklemeniz gereken bir fonksiyon veya nesne, her render'da yeniden olu\u015fturuldu\u011fu i\u00e7in efekti gereksiz yere tetikleyebilir. \u0130\u015fte bu noktada useCallback<\/code> ve useMemo<\/code> Hook'lar\u0131 devreye girer.<\/p>\n
\nuseCallback<\/code>:<\/strong> Bir fonksiyonun referans\u0131n\u0131 haf\u0131zaya (memoize) al\u0131r. E\u011fer bir fonksiyonu useEffect<\/code>'in ba\u011f\u0131ml\u0131l\u0131k dizisine eklemeniz gerekiyorsa ve bu fonksiyon prop olarak alt bile\u015fenlere ge\u00e7iriliyorsa, useCallback<\/code> kullanarak bu fonksiyonun referans\u0131n\u0131n her render'da de\u011fi\u015fmesini engelleyebilirsiniz. Bu, hem useEffect<\/code>'in gereksiz \u00e7al\u0131\u015fmas\u0131n\u0131 \u00f6nler hem de alt bile\u015fenlerin gereksiz yeniden render edilmesini engeller.<\/li>\n
useMemo<\/code>:<\/strong> Bir de\u011ferin (nesne, dizi veya karma\u015f\u0131k hesaplama sonucu) referans\u0131n\u0131 haf\u0131zaya al\u0131r. E\u011fer useEffect<\/code> i\u00e7inde veya ba\u011f\u0131ml\u0131l\u0131k dizisinde kullan\u0131lan bir nesne veya dizi, her render'da yeni bir referansla olu\u015fturuluyorsa, useMemo<\/code> kullanarak bu referans\u0131n stabil kalmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/li>\n<\/ul>\nVaka Analizi: Performansl\u0131 Arama Filtresi<\/strong><\/p>\n
Bir \u00fcr\u00fcn listesi uygulamas\u0131 d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131 bir arama terimi girdi\u011finde, sunucudan filtrelenmi\u015f verileri \u00e7ekmemiz gerekiyor. Ancak her tu\u015f vuru\u015funda istek g\u00f6ndermek yerine, kullan\u0131c\u0131n\u0131n yazmay\u0131 bitirmesini beklemeliyiz (debounce).<\/p>\n
\n    import React, { useEffect, useState, useMemo } from 'react';\n\n    function UrunArama({ aramaTerimi }) {\n      const [urunler, setUrunler] = useState([]);\n      const [yukleniyor, setYukleniyor] = useState(false);\n      const [debouncedAramaTerimi, setDebouncedAramaTerimi] = useState(aramaTerimi);\n\n      \/\/ aramaTerimi de\u011fi\u015fti\u011finde debouncedAramaTerimi'ni g\u00fcncelle\n      \/\/ Kullan\u0131c\u0131n\u0131n yazmay\u0131 bitirmesini bekler\n      useEffect(() => {\n        setYukleniyor(true);\n        const handler = setTimeout(() => {\n          setDebouncedAramaTerimi(aramaTerimi);\n        }, 500); \/\/ 500ms bekle\n\n        return () => {\n          clearTimeout(handler); \/\/ Zamanlay\u0131c\u0131y\u0131 temizle\n        };\n      }, [aramaTerimi]); \/\/ aramaTerimi her de\u011fi\u015fti\u011finde bu efekti \u00e7al\u0131\u015ft\u0131r\n\n      \/\/ Debounced arama terimi de\u011fi\u015fti\u011finde API'den veri \u00e7ek\n      useEffect(() => {\n        if (!debouncedAramaTerimi) {\n          setUrunler([]); \/\/ Arama terimi yoksa bo\u015falt\n          setYukleniyor(false);\n          return;\n        }\n\n        const fetchUrunler = async () => {\n          try {\n            const response = await fetch(https:\/\/api.example.com\/products?q=${debouncedAramaTerimi}<\/code>);\n            const data = await response.json();\n            setUrunler(data);\n          } catch (error) {\n            console.error('\u00dcr\u00fcnler \u00e7ekilirken hata olu\u015ftu:', error);\n          } finally {\n            setYukleniyor(false);\n          }\n        };\n\n        fetchUrunler();\n      }, [debouncedAramaTerimi]); \/\/ Yaln\u0131zca debouncedAramaTerimi de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r\n\n      return (\n        \n          \u00dcr\u00fcn Arama Sonu\u00e7lar\u0131 ({aramaTerimi})<\/h3>\n          {yukleniyor && \u00dcr\u00fcnler aran\u0131yor...<\/p>}\n          
\n            {urunler.map(urun => (\n              {urun.name}<\/li>\n            ))}\n          <\/ul>\n        <\/div>\n      );\n    }\n    <\/pre>\n<\/code><\/p>\n
Bu \u00f6rnekte iki ayr\u0131 useEffect<\/code> kullan\u0131lm\u0131\u015ft\u0131r. \u0130lk useEffect<\/code>, aramaTerimi<\/code> prop'u her de\u011fi\u015fti\u011finde bir gecikme (debounce) uygular ve bu sayede debouncedAramaTerimi<\/code> state'ini sadece kullan\u0131c\u0131 yazmay\u0131 b\u0131rakt\u0131\u011f\u0131nda g\u00fcnceller. \u0130kinci useEffect<\/code> ise, yaln\u0131zca debouncedAramaTerimi<\/code> de\u011fi\u015fti\u011finde API iste\u011fini g\u00f6nderir. Bu yakla\u015f\u0131m, gereksiz API isteklerini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azaltarak hem sunucu y\u00fck\u00fcn\u00fc hafifletir hem de kullan\u0131c\u0131 aray\u00fcz\u00fc deneyimini iyile\u015ftirir.<\/p>\n
\n      Uyar\u0131: useEffect<\/code> i\u00e7inde karma\u015f\u0131k ve pahal\u0131 hesaplamalar yap\u0131yorsan\u0131z, bu hesaplamalar\u0131n sonucunu useMemo<\/code> ile \u00f6nbelle\u011fe almay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. Bu, efektin i\u00e7indeki mant\u0131\u011f\u0131n her \u00e7al\u0131\u015fmas\u0131nda ayn\u0131 hesaplamay\u0131 tekrarlamas\u0131n\u0131 \u00f6nler, b\u00f6ylece \u00f6zellikle b\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015f\u0131rken performans art\u0131\u015f\u0131 sa\u011flar.\n    <\/div>\nAyr\u0131ca, bazen farkl\u0131 yan etkileri tek bir useEffect<\/code> i\u00e7inde birle\u015ftirmek yerine, ilgili yan etkileri mant\u0131ksal olarak ayr\u0131 useEffect<\/code> bloklar\u0131na b\u00f6lmek daha iyi bir stratejidir. Bu, her bir yan etkinin kendi ba\u011f\u0131ml\u0131l\u0131klar\u0131na sahip olmas\u0131n\u0131 sa\u011flar ve tek bir b\u00fcy\u00fck efektten kaynaklanabilecek gereksiz yeniden \u00e7al\u0131\u015fmalar\u0131 \u00f6nler. Kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 da kolayla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, bir API'den veri \u00e7ekmek i\u00e7in bir useEffect<\/code> ve bir olay dinleyicisi eklemek i\u00e7in ba\u015fka bir useEffect<\/code> kullanmak daha do\u011fru bir yakla\u015f\u0131md\u0131r.<\/p>\n
\u0130leri D\u00fczey Senaryolar: useEffect ile Asenkron \u0130\u015flemler ve Veri Senkronizasyonu<\/h2>\nuseEffect<\/code> Hook'u, sadece basit yan etkileri y\u00f6netmekle kalmaz, ayn\u0131 zamanda asenkron veri ak\u0131\u015flar\u0131n\u0131 ve karma\u015f\u0131k senkronizasyon senaryolar\u0131n\u0131 da g\u00fc\u00e7l\u00fc bir \u015fekilde ele alabilir. Modern uygulamalarda s\u0131k\u00e7a kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z API \u00e7a\u011fr\u0131lar\u0131, WebSocket abonelikleri veya zamanlanm\u0131\u015f g\u00f6revler gibi asenkron i\u015flemler, useEffect<\/code> ile g\u00fcvenli ve etkin bir \u015fekilde y\u00f6netilebilir.<\/p>\n
Ancak, useEffect<\/code>'in callback fonksiyonu do\u011frudan bir async<\/code> fonksiyon olamaz. \u00c7\u00fcnk\u00fc async<\/code> fonksiyonlar her zaman bir Promise d\u00f6nd\u00fcr\u00fcr ve useEffect<\/code>'ten bir Promise d\u00f6nd\u00fcrmek, React'\u0131n bekledi\u011fi bir temizleme fonksiyonu de\u011fil, farkl\u0131 bir davran\u0131\u015ft\u0131r. Bu durumu \u00e7\u00f6zmek i\u00e7in, useEffect<\/code> i\u00e7inde asenkron bir fonksiyon tan\u0131mlay\u0131p onu hemen \u00e7a\u011f\u0131rmak yayg\u0131n bir desendir:<\/p>\n
\n    import React, { useEffect, useState } from 'react';\n\n    function AsyncVeriCekme({ id }) {\n      const [veri, setVeri] = useState(null);\n      const [yukleniyor, setYukleniyor] = useState(true);\n\n      useEffect(() => {\n        let isCancelled = false; \/\/ Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in flag\n\n        const fetchVeri = async () => {\n          setYukleniyor(true);\n          try {\n            const response = await fetch(https:\/\/api.example.com\/items\/${id}<\/code>);\n            const result = await response.json();\n            if (!isCancelled) { \/\/ Bile\u015fen unmount edilmediyse state'i g\u00fcncelle\n              setVeri(result);\n            }\n          } catch (error) {\n            if (!isCancelled) {\n              console.error(\"Veri \u00e7ekme hatas\u0131:\", error);\n            }\n          } finally {\n            if (!isCancelled) {\n              setYukleniyor(false);\n            }\n          }\n        };\n\n        fetchVeri();\n\n        \/\/ Temizleme fonksiyonu:\n        return () => {\n          isCancelled = true; \/\/ Bile\u015fen unmount edildi\u011finde veya id de\u011fi\u015fti\u011finde iste\u011fi iptal et\n          console.log(Asenkron i\u015flem ${id} iptal edildi.<\/code>);\n        };\n      }, [id]); \/\/ id de\u011fi\u015fti\u011finde efekti yeniden \u00e7al\u0131\u015ft\u0131r\n\n      if (yukleniyor) return Veriler y\u00fckleniyor...<\/div>;\n      if (!veri) return Veri bulunamad\u0131.<\/div>;\n\n      return (\n        \n          \u00d6\u011fe: {veri.name}<\/h3>\n          A\u00e7\u0131klama: {veri.description}<\/p>\n        <\/div>\n      );\n    }\n    <\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, fetchVeri<\/code> ad\u0131nda bir async<\/code> fonksiyon tan\u0131mlan\u0131r ve hemen \u00e7a\u011fr\u0131l\u0131r. En \u00f6nemlisi, bir isCancelled<\/code> bayra\u011f\u0131 kullan\u0131larak, bile\u015fen unmount edildi\u011finde veya id<\/code> de\u011fi\u015fti\u011finde (yani efekt yeniden \u00e7al\u0131\u015fmadan \u00f6nce) asenkron i\u015flemin sonucunun state'i g\u00fcncellemesini engelleriz. Bu, \"race condition\" (yar\u0131\u015f durumu) olarak bilinen bir sorunu \u00f6nler; yani eski bir iste\u011fin daha yeni bir iste\u011fin verilerini ezmesini engeller. Bu, \u00f6zellikle h\u0131zl\u0131ca de\u011fi\u015fen ba\u011f\u0131ml\u0131l\u0131klarla \u00e7al\u0131\u015fan veya bile\u015fenin h\u0131zl\u0131ca mount\/unmount oldu\u011fu durumlarda kritik bir optimizasyondur.<\/p>\n
React'ta Responsive Tasar\u0131m ve useEffect<\/h3>\nuseEffect<\/code>, sadece veri \u00e7ekme gibi i\u015flemler i\u00e7in de\u011fil, ayn\u0131 zamanda responsive UI davran\u0131\u015flar\u0131n\u0131 y\u00f6netmek i\u00e7in de kullan\u0131labilir. \u00d6rne\u011fin, ekran boyutuna g\u00f6re farkl\u0131 bile\u015fenler render etmek veya stil kurallar\u0131n\u0131 dinamik olarak de\u011fi\u015ftirmek isteyebilirsiniz. Temizleme fonksiyonu ile olay dinleyicilerini d\u00fczg\u00fcn bir \u015fekilde y\u00f6netmek bu t\u00fcr senaryolarda \u00e7ok \u00f6nemlidir.<\/p>\n
\n