{"id":37609,"date":"2026-01-10T16:00:32","date_gmt":"2026-01-10T13:00:32","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-ozel-hooklari-kapsamli-bir-anlayis-ve-kendi-uygulamanizi-gelistirme-rehberi\/"},"modified":"2026-01-10T16:00:32","modified_gmt":"2026-01-10T13:00:32","slug":"react-ozel-hooklari-kapsamli-bir-anlayis-ve-kendi-uygulamanizi-gelistirme-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-ozel-hooklari-kapsamli-bir-anlayis-ve-kendi-uygulamanizi-gelistirme-rehberi\/","title":{"rendered":"React \u00d6zel Hook’lar\u0131: Kapsaml\u0131 Bir Anlay\u0131\u015f ve Kendi Uygulaman\u0131z\u0131 Geli\u015ftirme Rehberi"},"content":{"rendered":"

React \u00d6zel Hook’lar\u0131: Kapsaml\u0131 Bir Anlay\u0131\u015f ve Kendi Uygulaman\u0131z\u0131 Geli\u015ftirme Rehberi<\/h2>\n

React ekosisteminde geli\u015ftirme yaparken, belirli bir noktada kendinizi ayn\u0131 mant\u0131k bloklar\u0131n\u0131 farkl\u0131 bile\u015fenlerde tekrar tekrar yazarken bulman\u0131z ka\u00e7\u0131n\u0131lmazd\u0131r. Bu durum, kod tekrar\u0131na, okunabilirli\u011fin azalmas\u0131na ve bak\u0131m\u0131 zor bir codebase’e yol a\u00e7ar. \u0130\u015fte tam da bu noktada, React Hook’lar\u0131 ve \u00f6zellikle \u00d6zel Hook’lar devreye girerek geli\u015ftiricilere adeta bir nefes alma alan\u0131 sunar. Bu makalede, \u00d6zel Hook’lar\u0131n ne oldu\u011funu, neden bu kadar \u00f6nemli olduklar\u0131n\u0131 ve kendi \u00d6zel Hook’unuzu nas\u0131l geli\u015ftirebilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz.<\/p>\n

React Hook’lara K\u0131sa Bir Bak\u0131\u015f<\/h2>\n

React, bile\u015fen tabanl\u0131 bir UI k\u00fct\u00fcphanesidir ve uzun y\u0131llar boyunca s\u0131n\u0131f bile\u015fenleri, state y\u00f6netimi ve ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131 i\u00e7in standart yakla\u015f\u0131m olmu\u015ftur. Ancak s\u0131n\u0131f bile\u015fenlerinin karma\u015f\u0131kl\u0131\u011f\u0131, this<\/code> ba\u011flam sorunlar\u0131 ve mant\u0131\u011f\u0131n farkl\u0131 ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131na da\u011f\u0131lmas\u0131 gibi dezavantajlar\u0131 vard\u0131.<\/p>\n

Hook’lar Neden Ortaya \u00c7\u0131kt\u0131?<\/h3>\n

React ekibi, fonksiyonel bile\u015fenlerin g\u00fcc\u00fcn\u00fc state ve yan etki y\u00f6netimiyle birle\u015ftirerek bu sorunlara \u00e7\u00f6z\u00fcm bulmak amac\u0131yla Hook’lar\u0131 tan\u0131tt\u0131. Hook’lar, fonksiyonel bile\u015fenlerde state ve di\u011fer React \u00f6zelliklerini kullanmam\u0131z\u0131 sa\u011flayan \u00f6zel fonksiyonlard\u0131r. useState<\/code>, useEffect<\/code>, useContext<\/code>, useRef<\/code> gibi yerle\u015fik Hook’lar, s\u0131n\u0131f bile\u015fenlerinin sundu\u011fu t\u00fcm yetenekleri daha temiz ve anla\u015f\u0131l\u0131r bir API ile sunar.<\/p>\n

Temel Hook’lar ve \u0130\u015flevleri<\/h3>\n

React’in sa\u011flad\u0131\u011f\u0131 temel Hook’lar \u015funlard\u0131r:<\/p>\n

    \n
  • useState<\/code>: Fonksiyonel bile\u015fenlere state eklemeyi sa\u011flar.<\/li>\n
  • useEffect<\/code>: Yan etkileri (veri \u00e7ekme, DOM manip\u00fclasyonu, timer’lar vb.) y\u00f6netmek i\u00e7in kullan\u0131l\u0131r.<\/li>\n
  • useContext<\/code>: Context API arac\u0131l\u0131\u011f\u0131yla bile\u015fenler aras\u0131nda veri payla\u015f\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/li>\n
  • useRef<\/code>: DOM elemanlar\u0131na veya herhangi bir mutable de\u011fere referans tutmak i\u00e7in kullan\u0131l\u0131r.<\/li>\n
  • useMemo<\/code> ve useCallback<\/code>: Performans optimizasyonlar\u0131 i\u00e7in memoizasyon sa\u011flar.<\/li>\n<\/ul>\n

    S\u0131n\u0131f Bile\u015fenlerinden Fonksiyonel Bile\u015fenlere Ge\u00e7i\u015f<\/h3>\n

    Hook’lar sayesinde, s\u0131n\u0131f bile\u015fenlerinin karma\u015f\u0131k yap\u0131s\u0131ndan kurtularak, daha basit ve test edilebilir fonksiyonel bile\u015fenler yazmak m\u00fcmk\u00fcn hale geldi. Bu ge\u00e7i\u015f, React geli\u015ftirme deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirerek, daha okunabilir ve y\u00f6netilebilir kod tabanlar\u0131 olu\u015fturmam\u0131za yard\u0131mc\u0131 oldu.<\/p>\n

    \u00d6zel Hook’lar Neden Bu Kadar G\u00fc\u00e7l\u00fc?<\/h2>\n

    Temel Hook’lar bile\u015fenlerimize state ve yan etki yetenekleri kazand\u0131r\u0131rken, \u00d6zel Hook’lar bu yetenekleri daha \u00fcst bir seviyeye ta\u015f\u0131yarak yeniden kullan\u0131labilir mant\u0131k katmanlar\u0131 olu\u015fturmam\u0131z\u0131 sa\u011flar.<\/p>\n

    Kod Tekrar\u0131n\u0131 Azaltma ve Mod\u00fclerlik<\/h3>\n

    Bir\u00e7ok bile\u015fende ayn\u0131 veya benzer mant\u0131\u011f\u0131 kullanmak zorunda kald\u0131\u011f\u0131n\u0131z\u0131 d\u00fc\u015f\u00fcn\u00fcn: \u00f6rne\u011fin, bir API’den veri \u00e7ekme, form giri\u015flerini y\u00f6netme veya yerel depolama ile etkile\u015fim kurma. Bu mant\u0131\u011f\u0131 her bile\u015fende yeniden yazmak yerine, \u00d6zel Hook’lar sayesinde tek bir yerde tan\u0131mlay\u0131p istedi\u011finiz kadar bile\u015fende kullanabilirsiniz. Bu, kod tekrar\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131r ve uygulaman\u0131z\u0131n daha mod\u00fcler olmas\u0131n\u0131 sa\u011flar.<\/p>\n

    Mant\u0131k Ayr\u0131m\u0131 ve Okunabilirlik<\/h3>\n

    \u00d6zel Hook’lar, bile\u015fenlerinizdeki UI mant\u0131\u011f\u0131 ile i\u015f mant\u0131\u011f\u0131n\u0131 birbirinden ay\u0131rman\u0131za yard\u0131mc\u0131 olur. Bile\u015fenleriniz sadece neyi render edeceklerine odaklan\u0131rken, karma\u015f\u0131k i\u015f mant\u0131\u011f\u0131 \u00d6zel Hook’lar\u0131n i\u00e7inde kaps\u00fcllenir. Bu ayr\u0131m, bile\u015fenlerinizi daha k\u00fc\u00e7\u00fck, daha odakl\u0131 ve okunabilir hale getirir. Yeni bir geli\u015ftirici projenize kat\u0131ld\u0131\u011f\u0131nda, bile\u015fenin ne yapt\u0131\u011f\u0131n\u0131 anlamak i\u00e7in sadece UI render k\u0131sm\u0131na bakmas\u0131 yeterli olur.<\/p>\n

    Test Edilebilirli\u011fi Art\u0131rma<\/h3>\n

    Mant\u0131\u011f\u0131n \u00d6zel Hook’lara ta\u015f\u0131nmas\u0131, bu mant\u0131k birimlerini ba\u011f\u0131ms\u0131z olarak test etmeyi \u00e7ok daha kolay hale getirir. Bir \u00d6zel Hook’u test ederken, karma\u015f\u0131k bir UI bile\u015fenini render etmenize gerek kalmaz; sadece hook’un girdilerini ve \u00e7\u0131kt\u0131lar\u0131n\u0131 test edersiniz. Bu, birim testlerinin yaz\u0131lmas\u0131n\u0131 h\u0131zland\u0131r\u0131r ve uygulaman\u0131z\u0131n genel kalitesini art\u0131r\u0131r.<\/p>\n

    \u00d6zel Hook’lar\u0131n Temel Prensipleri ve Kurallar\u0131<\/h2>\n

    \u00d6zel Hook’lar da t\u0131pk\u0131 yerle\u015fik Hook’lar gibi belirli kurallara tabidir. Bu kurallara uymak, Hook’lar\u0131n\u0131z\u0131n do\u011fru ve tahmin edilebilir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n

    “use” \u00d6n Eki ve Anlam\u0131<\/h3>\n

    Bir fonksiyonu \u00d6zel Hook yapan en belirgin \u00f6zellik, ad\u0131n\u0131n use<\/code> ile ba\u015flamas\u0131d\u0131r (\u00f6rne\u011fin, useMyCustomHook<\/code>). Bu isimlendirme kural\u0131, React’in Hook’lar\u0131 tan\u0131mas\u0131na ve Hook kurallar\u0131n\u0131 uygulayabilmesine yard\u0131mc\u0131 olur. Ayr\u0131ca, di\u011fer geli\u015ftiricilere bu fonksiyonun bir Hook oldu\u011funu ve Hook kurallar\u0131na uymas\u0131 gerekti\u011fini a\u00e7\u0131k\u00e7a belirtir.<\/p>\n

    Hook Kurallar\u0131: Nerede ve Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\n

    React’in iki temel Hook kural\u0131 vard\u0131r:<\/p>\n

      \n
    1. Sadece React Fonksiyonlar\u0131n\u0131n En \u00dcst Seviyesinde \u00c7a\u011f\u0131r\u0131n:<\/strong> Hook’lar\u0131 d\u00f6ng\u00fclerin, ko\u015fullar\u0131n veya i\u00e7 i\u00e7e fonksiyonlar\u0131n i\u00e7inde \u00e7a\u011f\u0131rmay\u0131n. Bu, React’in her render s\u0131ras\u0131nda Hook’lar\u0131 ayn\u0131 s\u0131rada \u00e7a\u011f\u0131rmas\u0131n\u0131 ve state’i do\u011fru bir \u015fekilde korumas\u0131n\u0131 sa\u011flar.<\/li>\n
    2. Sadece React Fonksiyonlar\u0131ndan \u00c7a\u011f\u0131r\u0131n:<\/strong> Hook’lar\u0131 sadece fonksiyonel React bile\u015fenlerinden veya ba\u015fka \u00d6zel Hook’lardan \u00e7a\u011f\u0131rabilirsiniz. S\u0131radan JavaScript fonksiyonlar\u0131ndan Hook \u00e7a\u011f\u0131rmak hataya yol a\u00e7ar.<\/li>\n<\/ol>\n

      Bu kurallar, React’in Hook’lar\u0131n state’ini do\u011fru bir \u015fekilde e\u015fle\u015ftirmesini sa\u011flayan temel mekanizmalard\u0131r.<\/p>\n

      State ve Yan Etki Y\u00f6netimi<\/h3>\n

      \u00d6zel Hook’lar, useState<\/code> ve useEffect<\/code> gibi yerle\u015fik Hook’lar\u0131 kendi i\u00e7lerinde kullanarak state ve yan etkileri y\u00f6netebilirler. \u00d6rne\u011fin, bir \u00d6zel Hook kendi i\u00e7 state’ini tutabilir veya belirli bir prop de\u011fi\u015fti\u011finde bir yan etkiyi tetikleyebilir. Bu, \u00d6zel Hook’lara kendi kendine yeten, durum bilgisi olan mant\u0131k birimleri olma yetene\u011fi kazand\u0131r\u0131r.<\/p>\n

      Kendi \u00d6zel Hook’unuzu Ad\u0131m Ad\u0131m Olu\u015fturma: useLocalStorage \u00d6rne\u011fi<\/h2>\n

      \u015eimdi pratik bir \u00f6rnekle kendi \u00d6zel Hook’umuzu nas\u0131l geli\u015ftirece\u011fimizi g\u00f6relim. S\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir senaryo olan localStorage<\/code> ile etkile\u015fimi y\u00f6neten bir useLocalStorage<\/code> Hook’u olu\u015ftural\u0131m.<\/p>\n

      useLocalStorage Hook’unun Amac\u0131<\/h3>\n

      Bu Hook’un amac\u0131, bir de\u011feri localStorage<\/code>‘da saklamak ve bu de\u011feri React state’i ile senkronize etmektir. Yani, de\u011fer de\u011fi\u015fti\u011finde bile\u015fen yeniden render edilecek ve sayfa yenilendi\u011finde son kaydedilen de\u011fer localStorage<\/code>‘dan okunacakt\u0131r.<\/p>\n

      Hook’un Yap\u0131s\u0131 ve Kod \u00d6rne\u011fi<\/h3>\n

      useLocalStorage.js<\/code> ad\u0131nda bir dosya olu\u015ftural\u0131m:<\/p>\n

      import { useState, useEffect } from 'react';\n\nfunction useLocalStorage(key, initialValue) {\n  \/\/ State'i ba\u015flatmak i\u00e7in bir fonksiyon kullan\u0131yoruz.\n  \/\/ Bu fonksiyon sadece ilk render'da \u00e7al\u0131\u015f\u0131r.\n  const [storedValue, setStoredValue] = useState(() => {\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? JSON.parse(item) : initialValue;\n    } catch (error) {\n      console.warn(Error reading localStorage key \u201c${key}\u201d:<\/code>, error);\n      return initialValue;\n    }\n  });\n\n  \/\/ storedValue de\u011fi\u015fti\u011finde localStorage'\u0131 g\u00fcnceller.\n  useEffect(() => {\n    try {\n      window.localStorage.setItem(key, JSON.stringify(storedValue));\n    } catch (error) {\n      console.warn(Error setting localStorage key \u201c${key}\u201d:<\/code>, error);\n    }\n  }, [key, storedValue]); \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi: key veya storedValue de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r.\n\n  return [storedValue, setStoredValue];\n}\n\nexport default useLocalStorage;<\/pre>\n
      <\/code><\/p>\n
      Yukar\u0131daki kodda:<\/p>\n
        \n
      • useState<\/code> Hook'unu kullanarak storedValue<\/code> ad\u0131nda bir state tan\u0131mlad\u0131k. Bu state'in ba\u015flang\u0131\u00e7 de\u011feri, localStorage<\/code>'dan okunan de\u011fer veya okunamad\u0131ysa initialValue<\/code> olacakt\u0131r.<\/li>\n
      • useEffect<\/code> Hook'unu kullanarak storedValue<\/code> veya key<\/code> her de\u011fi\u015fti\u011finde localStorage<\/code>'\u0131 g\u00fcncelliyoruz. Bu, de\u011ferin kal\u0131c\u0131 olmas\u0131n\u0131 sa\u011flar.<\/li>\n
      • Hook, t\u0131pk\u0131 useState<\/code> gibi, mevcut de\u011feri ve de\u011feri g\u00fcncellemek i\u00e7in bir fonksiyonu dizi olarak d\u00f6nd\u00fcr\u00fcr.<\/li>\n<\/ul>\n
        Bile\u015fen \u0130\u00e7inde useLocalStorage Kullan\u0131m\u0131<\/h3>\n
        \u015eimdi bu \u00d6zel Hook'u bir React bile\u015feni i\u00e7inde nas\u0131l kullanaca\u011f\u0131m\u0131za bakal\u0131m:<\/p>\n
        import React from 'react';\nimport useLocalStorage from '.\/useLocalStorage'; \/\/ Hook'umuzu import ediyoruz\n\nfunction SettingsPage() {\n  const [theme, setTheme] = useLocalStorage('appTheme', 'light');\n  const [userName, setUserName] = useLocalStorage('userName', 'Guest');\n\n  const toggleTheme = () => {\n    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));\n  };\n\n  const handleNameChange = (e) => {\n    setUserName(e.target.value);\n  };\n\n  return (\n    
        \n      
        Ayarlar Sayfas\u0131<\/h2>\n      
        Mevcut Tema: {theme}<\/p>\n