{"id":31532,"date":"2025-10-11T00:41:07","date_gmt":"2025-10-10T21:41:07","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=31532"},"modified":"2025-10-11T00:41:07","modified_gmt":"2025-10-10T21:41:07","slug":"reactte-komponent-yasam-dongulerini-useeffect-hooku-ile-degistirmek","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-komponent-yasam-dongulerini-useeffect-hooku-ile-degistirmek\/","title":{"rendered":"React’te Komponent Ya\u015fam D\u00f6ng\u00fclerini useEffect Hook’u ile De\u011fi\u015ftirmek"},"content":{"rendered":"

<\/p>\n

React’te Komponent Ya\u015fam D\u00f6ng\u00fclerini useEffect Hook’u ile De\u011fi\u015ftirmek<\/h2>\n

React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in deklaratif bir yakla\u015f\u0131m sunan g\u00fc\u00e7l\u00fc bir k\u00fct\u00fcphanedir. Geli\u015fiminin ilk y\u0131llar\u0131ndan itibaren, bile\u015fenlerin davran\u0131\u015flar\u0131n\u0131 y\u00f6netmek i\u00e7in s\u0131n\u0131f tabanl\u0131 bile\u015fenler ve bunlarla ili\u015fkili ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131 temel bir yap\u0131 ta\u015f\u0131 olmu\u015ftur. Ancak, React Hooks’un tan\u0131t\u0131lmas\u0131yla birlikte, fonksiyonel bile\u015fenler, s\u0131n\u0131f bile\u015fenlerinin sundu\u011fu yeteneklerin \u00e7o\u011funu, hatta daha fazlas\u0131n\u0131, daha temiz ve daha mod\u00fcler bir \u015fekilde sa\u011flamaya ba\u015flam\u0131\u015ft\u0131r. Bu devrimin merkezinde yer alan useEffect<\/code> hook’u, yan etkileri (side effects) y\u00f6netmek ve b\u00f6ylece s\u0131n\u0131f bile\u015fenlerinin ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131 etkili bir \u015fekilde de\u011fi\u015ftirmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu makalede, useEffect<\/code> hook’unun ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve componentDidMount<\/code>, componentDidUpdate<\/code> ve componentWillUnmount<\/code> gibi geleneksel ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131n yerini nas\u0131l ald\u0131\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Ayr\u0131ca, useEffect<\/code>‘in geli\u015fmi\u015f kullan\u0131m senaryolar\u0131n\u0131, s\u0131k\u00e7a yap\u0131lan hatalar\u0131 ve genel olarak fonksiyonel bile\u015fenlere ge\u00e7i\u015fin getirdi\u011fi avantajlar\u0131 ele alaca\u011f\u0131z.<\/p>\n

S\u0131n\u0131f Bile\u015fenlerinde Ya\u015fam D\u00f6ng\u00fcs\u00fc Metodlar\u0131na Genel Bak\u0131\u015f<\/h3>\n

React s\u0131n\u0131f bile\u015fenleri, bir bile\u015fenin \u00f6mr\u00fc boyunca belirli anlarda otomatik olarak \u00e7a\u011fr\u0131lan \u00f6zel metodlar arac\u0131l\u0131\u011f\u0131yla yan etkileri (veri getirme, olay dinleyicileri ayarlama, DOM’u do\u011frudan manip\u00fcle etme vb.) y\u00f6netir. Bu metodlar, bile\u015fenin “do\u011fdu\u011fu”, “g\u00fcncellendi\u011fi” ve “\u00f6ld\u00fc\u011f\u00fc” anlar\u0131 temsil eder. En yayg\u0131n kullan\u0131lan ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131 \u015funlard\u0131r:<\/p>\n

* componentDidMount()<\/code>:<\/strong> Bile\u015fen DOM’a ilk kez render edildikten sonra \u00e7a\u011fr\u0131l\u0131r. Genellikle ilk veri getirme i\u015flemleri, olay dinleyicileri ayarlama veya DOM \u00fczerinde do\u011frudan i\u015flem yapma gibi tek seferlik kurulum i\u015flemleri i\u00e7in kullan\u0131l\u0131r.
\n* componentDidUpdate(prevProps, prevState)<\/code>:<\/strong> Bile\u015fenin prop’lar\u0131 veya state’i g\u00fcncellendi\u011finde, ilk render hari\u00e7, her yeniden render i\u015fleminden sonra \u00e7a\u011fr\u0131l\u0131r. Bu metod, g\u00fcncellenen prop’lara veya state’e g\u00f6re yan etkileri (\u00f6rne\u011fin, yeni veriler getirme) ger\u00e7ekle\u015ftirmek i\u00e7in idealdir.
\n* componentWillUnmount()<\/code>:<\/strong> Bile\u015fen DOM’dan kald\u0131r\u0131lmadan hemen \u00f6nce \u00e7a\u011fr\u0131l\u0131r. Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in componentDidMount<\/code> i\u00e7inde ayarlanan olay dinleyicilerini, zamanlay\u0131c\u0131lar\u0131 veya abonelikleri temizlemek i\u00e7in kullan\u0131l\u0131r.
\n* shouldComponentUpdate(nextProps, nextState)<\/code>:<\/strong> Performans optimizasyonu i\u00e7in kullan\u0131l\u0131r. Bile\u015fenin yeniden render edilip edilmeyece\u011fini kontrol eder. true<\/code> d\u00f6nd\u00fcr\u00fcrse render edilir, false<\/code> d\u00f6nd\u00fcr\u00fcrse edilmez.
\n* getDerivedStateFromProps(nextProps, prevState)<\/code>:<\/strong> Nadiren kullan\u0131l\u0131r ve state’in prop’lardan t\u00fcretilmesi gerekti\u011finde \u00e7a\u011fr\u0131l\u0131r. Bu metod, yan etkileri tetiklemek i\u00e7in de\u011fil, state’i senkronize etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n

S\u0131n\u0131f bile\u015fenlerindeki bu ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131, yan etkileri y\u00f6netmek i\u00e7in i\u015flevsel bir yol sunsa da, baz\u0131 dezavantajlar\u0131 vard\u0131r:<\/p>\n

* Mant\u0131k Da\u011f\u0131n\u0131kl\u0131\u011f\u0131:<\/strong> Ayn\u0131 mant\u0131\u011fa ait kod par\u00e7alar\u0131 (\u00f6rne\u011fin, bir abonelik kurma ve temizleme) farkl\u0131 ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131na da\u011f\u0131labilir. Bu durum, kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r.
\n* Tekrar Kullan\u0131m Zorlu\u011fu:<\/strong> Yan etki mant\u0131\u011f\u0131n\u0131 bile\u015fenler aras\u0131nda yeniden kullanmak zordur. Genellikle HOC’ler (Higher-Order Components) veya Render Props gibi daha karma\u015f\u0131k desenler gerektirir.
\n* this<\/code> Ba\u011flama Sorunlar\u0131:<\/strong> JavaScript’teki this<\/code> anahtar kelimesinin davran\u0131\u015f\u0131, \u00f6zellikle olay i\u015fleyicileriyle birlikte kullan\u0131ld\u0131\u011f\u0131nda, kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir ve ek ba\u011flama i\u015flemleri gerektirebilir.<\/p>\n

React Hooks, \u00f6zellikle useEffect<\/code>, bu sorunlara zarif bir \u00e7\u00f6z\u00fcm sunarak fonksiyonel bile\u015fenlerin g\u00fcc\u00fcn\u00fc art\u0131rm\u0131\u015ft\u0131r.<\/p>\n

useEffect Hook’unun Temelleri<\/h3>\n

useEffect<\/code> hook’u, fonksiyonel bile\u015fenlerde yan etkileri ger\u00e7ekle\u015ftirmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. “Yan etki” terimi, bir fonksiyonun kendi kapsam\u0131 d\u0131\u015f\u0131ndaki bir \u015feyi de\u011fi\u015ftirmesi veya etkilemesi anlam\u0131na gelir. React ba\u011flam\u0131nda bu, API \u00e7a\u011fr\u0131lar\u0131, DOM manip\u00fclasyonlar\u0131, abonelikler, zamanlay\u0131c\u0131lar, olay dinleyicileri gibi i\u015flemleri i\u00e7erir. useEffect<\/code>, bir bile\u015fenin render i\u015fleminden sonra, DOM g\u00fcncellendikten sonra \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131 gereken kodu tan\u0131mlaman\u0131za olanak tan\u0131r.<\/p>\n

useEffect<\/code>‘in temel yap\u0131s\u0131 \u015f\u00f6yledir:<\/p>\n

import React, { useEffect } from 'react';\n\nfunction MyComponent() {\n  useEffect(() => {\n    \/\/ Yan etki kodu buraya yaz\u0131l\u0131r\n\n    return () => {\n      \/\/ Temizleme kodu buraya yaz\u0131l\u0131r (iste\u011fe ba\u011fl\u0131)\n    };\n  }, [ba\u011f\u0131ml\u0131l\u0131klar]); \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi (iste\u011fe ba\u011fl\u0131)\n\n  \/\/ ... bile\u015fen render mant\u0131\u011f\u0131\n}<\/code><\/pre>\n
useEffect<\/code> iki ana arg\u00fcman al\u0131r:<\/p>\n
1.  setup<\/code> Fonksiyonu (Geri \u00c7a\u011f\u0131rma Fonksiyonu):<\/strong> Bu fonksiyon, yan etki mant\u0131\u011f\u0131n\u0131 i\u00e7erir. React, bile\u015fen render edildikten sonra (ve DOM g\u00fcncellendikten sonra) bu fonksiyonu \u00e7a\u011f\u0131r\u0131r.
\n2.  dependencies<\/code> Dizisi (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.<\/p>\n
    *   Bo\u015f dizi []<\/code>:<\/strong> Efekt sadece bile\u015fen ilk kez DOM’a ba\u011fland\u0131\u011f\u0131nda (mount) \u00e7al\u0131\u015f\u0131r ve bir daha \u00e7al\u0131\u015fmaz. Bu, componentDidMount<\/code>‘a benzer bir davran\u0131\u015f sa\u011flar.
\n    *   Dizi belirtilmezse:<\/strong> Efekt, bile\u015fenin her render i\u015fleminden sonra \u00e7al\u0131\u015f\u0131r. Bu genellikle istenmeyen bir durumdur ve sonsuz d\u00f6ng\u00fclere yol a\u00e7abilir.
\n    *   De\u011ferler i\u00e7eren bir dizi [dep1, dep2]<\/code>:<\/strong> Efekt, bile\u015fen ilk kez ba\u011fland\u0131\u011f\u0131nda ve dizideki ba\u011f\u0131ml\u0131l\u0131klardan herhangi biri bir \u00f6nceki render’a g\u00f6re de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r. Bu, componentDidUpdate<\/code>‘e benzer bir davran\u0131\u015f sa\u011flar.<\/p>\n
setup<\/code> fonksiyonu iste\u011fe ba\u011fl\u0131 olarak bir temizleme fonksiyonu<\/strong> d\u00f6nd\u00fcrebilir. Bu temizleme fonksiyonu, bir sonraki efekt \u00e7al\u0131\u015ft\u0131r\u0131lmadan \u00f6nce (e\u011fer ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015firse) ve bile\u015fen DOM’dan kald\u0131r\u0131lmadan \u00f6nce (unmount) \u00e7a\u011fr\u0131l\u0131r. Bu, componentWillUnmount<\/code>‘a benzer bir davran\u0131\u015f sa\u011flar.<\/p>\n
useEffect<\/code>‘i d\u00fc\u015f\u00fcn\u00fcrken, onu sadece ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131n bir yede\u011fi olarak g\u00f6rmek yerine, “bir bile\u015fenin harici bir sistemle senkronize olmas\u0131n\u0131 sa\u011flayan bir mekanizma” olarak d\u00fc\u015f\u00fcnmek daha faydal\u0131d\u0131r.<\/p>\n
useEffect ile Ya\u015fam D\u00f6ng\u00fcs\u00fc Metodlar\u0131n\u0131n Yerine Ge\u00e7me<\/h3>\n
\u015eimdi, useEffect<\/code>‘in s\u0131n\u0131f bile\u015fenlerindeki yayg\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131 nas\u0131l de\u011fi\u015ftirdi\u011fini \u00f6rneklerle inceleyelim.<\/p>\n
componentDidMount’u Sim\u00fcle Etmek<\/h4>\n
componentDidMount<\/code>, bile\u015fen ilk kez DOM’a ba\u011fland\u0131\u011f\u0131nda \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131 gereken tek seferlik kurulum mant\u0131\u011f\u0131 i\u00e7in kullan\u0131l\u0131r. useEffect<\/code> ile bunu ba\u015farmak i\u00e7in bo\u015f bir ba\u011f\u0131ml\u0131l\u0131k dizisi kullan\u0131r\u0131z:<\/p>\n
import React, { useState, useEffect } from 'react';\n\nfunction DataFetcher() {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    \/\/ Bu fonksiyon sadece bile\u015fen ilk kez mount edildi\u011finde \u00e7al\u0131\u015f\u0131r\n    console.log('Bile\u015fen mount edildi, veri \u00e7ekiliyor...');\n    const fetchData = async () => {\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 result = await response.json();\n        setData(result);\n      } catch (err) {\n        setError(err);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchData();\n\n    \/\/ Bu durumda bir temizleme i\u015flemi gerekmiyor\n    \/\/ return () => { \/ cleanup code <\/em>\/ };\n  }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi: sadece mount'ta \u00e7al\u0131\u015f\u0131r\n\n  if (loading) return 
Y\u00fckleniyor...<\/div>;\n  if (error) return 
Hata: {error.message}<\/div>;\n\n  return (\n    
\n      
Veri:<\/h3>\n      
{JSON.stringify(data, null, 2)}<\/pre>\n<\/p><\/div>\n
  );
\n}<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, useEffect<\/code> i\u00e7indeki fetchData<\/code> fonksiyonu sadece bile\u015fen ilk kez y\u00fcklendi\u011finde \u00e7al\u0131\u015f\u0131r. []<\/code> bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi, React’e bu efektin herhangi bir prop veya state de\u011fi\u015fikli\u011finde yeniden \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131na gerek olmad\u0131\u011f\u0131n\u0131 s\u00f6yler.<\/p>\n
componentDidUpdate’i Sim\u00fcle Etmek<\/h4>\n
componentDidUpdate<\/code>, bile\u015fenin prop’lar\u0131 veya state’i de\u011fi\u015fti\u011finde belirli yan etkileri tetiklemek i\u00e7in kullan\u0131l\u0131r. useEffect<\/code> ile bu davran\u0131\u015f\u0131 elde etmek i\u00e7in, ba\u011f\u0131ml\u0131l\u0131k dizisine izlemek istedi\u011fimiz prop veya state de\u011fi\u015fkenlerini ekleriz.<\/p>\n
import 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    \/\/ userId de\u011fi\u015fti\u011finde veya bile\u015fen ilk mount edildi\u011finde \u00e7al\u0131\u015f\u0131r\n    console.log(userId de\u011fi\u015fti veya mount edildi: ${userId}, kullan\u0131c\u0131 verisi \u00e7ekiliyor...<\/code>);\n    setLoading(true);\n    setError(null); \/\/ \u00d6nceki hatalar\u0131 temizle\n\n    const fetchUser = async () => {\n      try {\n        const response = await fetch(https:\/\/api.example.com\/users\/${userId}<\/code>);\n        if (!response.ok) {\n          throw new Error(HTTP error! status: ${response.status}<\/code>);\n        }\n        const result = await response.json();\n        setUser(result);\n      } catch (err) {\n        setError(err);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    if (userId) { \/\/ userId null veya undefined de\u011filse fetch yap\n      fetchUser();\n    } else {\n      setUser(null);\n      setLoading(false);\n    }\n\n  }, [userId]); \/\/ userId ba\u011f\u0131ml\u0131l\u0131\u011f\u0131: userId de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015f\u0131r\n\n  if (loading) return 
Kullan\u0131c\u0131 bilgileri y\u00fckleniyor...<\/div>;\n  if (error) return 
Hata: {error.message}<\/div>;\n  if (!user) return 
Kullan\u0131c\u0131 se\u00e7ilmedi veya bulunamad\u0131.<\/div>;\n\n  return (\n    
\n      
Kullan\u0131c\u0131 Profili: {user.name}<\/h3>\n      
Email: {user.email}<\/p>\n      
\u015eehir: {user.address?.city}<\/p>\n    <\/div>\n  );\n}<\/code><\/pre>\n
Bu \u00f6rnekte, userId<\/code> prop’u de\u011fi\u015fti\u011finde (veya bile\u015fen ilk kez mount edildi\u011finde) useEffect<\/code> i\u00e7indeki veri getirme i\u015flemi yeniden tetiklenir. [userId]<\/code> ba\u011f\u0131ml\u0131l\u0131k dizisi, React’e userId<\/code>‘nin bir \u00f6nceki render’a g\u00f6re farkl\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol etmesini s\u00f6yler. E\u011fer farkl\u0131ysa, efekt yeniden \u00e7al\u0131\u015f\u0131r.<\/p>\n
Sadece G\u00fcncellemede \u00c7al\u0131\u015ft\u0131rmak (\u0130lk Mount’ta De\u011fil):<\/strong>
\nBaz\u0131 durumlarda, bir efekti sadece g\u00fcncellemelerde \u00e7al\u0131\u015ft\u0131rmak, ilk mount’ta \u00e7al\u0131\u015ft\u0131rmamak isteyebilirsiniz. useEffect<\/code> do\u011frudan bu yetene\u011fi sa\u011flamaz \u00e7\u00fcnk\u00fc ba\u011f\u0131ml\u0131l\u0131k dizisi, ilk mount’ta da \u00e7al\u0131\u015fmay\u0131 garanti eder. Ancak, bir ref<\/code> kullanarak bu davran\u0131\u015f\u0131 sim\u00fcle edebilirsiniz:<\/p>\n
import React, { useState, useEffect, useRef } from 'react';\n\nfunction MyComponentWithUpdateEffect() {\n  const [count, setCount] = useState(0);\n  const isInitialMount = useRef(true);\n\n  useEffect(() => {\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n    } else {\n      \/\/ Bu kod sadece g\u00fcncellemelerde \u00e7al\u0131\u015f\u0131r, ilk mount'ta de\u011fil\n      console.log('count g\u00fcncellendi:', count);\n      document.title = Say\u0131m: ${count}<\/code>;\n    }\n  }, [count]); \/\/ count de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r\n\n  return (\n    
\n      
Say\u0131m: {count}<\/p>\n