React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in deklaratif ve bile\u015fen tabanl\u0131 bir yakla\u015f\u0131m sunan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Y\u0131llar i\u00e7inde React, geli\u015ftiricilerin karma\u015f\u0131k UI’lar\u0131 daha y\u00f6netilebilir par\u00e7alara ay\u0131rmas\u0131na olanak tan\u0131yan bir dizi g\u00fc\u00e7l\u00fc \u00f6zellik sunmu\u015ftur. Ancak, React’in ilk s\u00fcr\u00fcmlerinden beri var olan s\u0131n\u0131f bile\u015fenleri, \u00f6zellikle durum y\u00f6netimi ve yan etkilerin ele al\u0131nmas\u0131 konusunda baz\u0131 zorluklar\u0131 beraberinde getirmi\u015ftir. Bu zorluklar\u0131 a\u015fmak ve fonksiyonel bile\u015fenlerin g\u00fcc\u00fcn\u00fc art\u0131rmak amac\u0131yla React ekibi, 2019’da React Hooks’u tan\u0131tt\u0131. Hooks, fonksiyonel bile\u015fenlerde durum (state) ve ya\u015fam d\u00f6ng\u00fcs\u00fc (lifecycle) \u00f6zelliklerini kullanmam\u0131za olanak tan\u0131yan \u00f6zel fonksiyonlard\u0131r. Bu makalede, React Hooks’un ne oldu\u011funu, neden ortaya \u00e7\u0131kt\u0131\u011f\u0131n\u0131, temel Hooks’lar\u0131 ve modern React geli\u015ftirmedeki yerini derinlemesine inceleyece\u011fiz.<\/p>\n
React Hooks’un ortaya \u00e7\u0131k\u0131\u015f\u0131, s\u0131n\u0131f bile\u015fenlerinin uzun s\u00fcredir devam eden baz\u0131 mimari ve geli\u015ftirme zorluklar\u0131na bir yan\u0131t niteli\u011findeydi. Bu zorluklar\u0131 anlamak, Hooks’un neden bu kadar \u00f6nemli oldu\u011funu kavramam\u0131z\u0131 sa\u011flar.<\/p>\n
React’in ilk zamanlar\u0131nda, bir bile\u015fende durum y\u00f6netimi veya ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131na ihtiya\u00e7 duydu\u011fumuzda s\u0131n\u0131f bile\u015fenleri kullanmak zorundayd\u0131k. Fonksiyonel bile\u015fenler ise “stateless” (durumsuz) ve “presentational” (sunumsal) bile\u015fenler olarak kabul ediliyordu. Ancak s\u0131n\u0131f bile\u015fenlerinin baz\u0131 dezavantajlar\u0131 vard\u0131:<\/p>\n
* Mant\u0131k Payla\u015f\u0131m\u0131 Zorlu\u011fu:<\/strong> S\u0131n\u0131f bile\u015fenleri aras\u0131nda tekrar kullan\u0131labilir durum mant\u0131\u011f\u0131n\u0131 payla\u015fmak zordu. Bu genellikle “render props” veya “higher-order components (HOCs)” gibi karma\u015f\u0131k tasar\u0131m desenlerini gerektiriyordu. Bu desenler, bile\u015fen hiyerar\u015fisini derinle\u015ftirerek “wrapper hell” olarak bilinen bir soruna yol a\u00e7abiliyordu. React Hooks, bu sorunlara zarif ve etkili \u00e7\u00f6z\u00fcmler sunarak modern React geli\u015ftirmenin temelini atm\u0131\u015ft\u0131r. Hooks’un vaadi \u015funlard\u0131r:<\/p>\n * Fonksiyonel Bile\u015fenlerde Durum ve Ya\u015fam D\u00f6ng\u00fcs\u00fc:<\/strong> Hooks, fonksiyonel bile\u015fenlerin durum tutmas\u0131na ve ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131na benzer yan etkileri y\u00f6netmesine olanak tan\u0131r. Bu, neredeyse t\u00fcm React bile\u015fenlerini fonksiyonel olarak yazabilmemiz anlam\u0131na gelir. React Hooks, fonksiyonel bile\u015fenlere “React state ve lifecycle \u00f6zelliklerini eklemenizi sa\u011flayan fonksiyonlard\u0131r.” Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, bunlar React’in derinliklerine “tak\u0131lman\u0131za” (hook into) izin veren \u00f6zel JavaScript fonksiyonlar\u0131d\u0131r.<\/p>\n Bir Hook, Hooks’un temel amac\u0131, fonksiyonel bile\u015fenlerin s\u0131n\u0131f bile\u015fenlerinin sahip oldu\u011fu yeteneklere (durum, ya\u015fam d\u00f6ng\u00fcs\u00fc, ba\u011flam vb.) sahip olmas\u0131n\u0131 sa\u011flamakt\u0131r. B\u00f6ylece, React uygulamalar\u0131n\u0131z\u0131 neredeyse tamamen fonksiyonel bile\u015fenlerle yazabilirsiniz.<\/p>\n Hooks’u kullan\u0131rken dikkat etmemiz gereken iki \u00f6nemli kural vard\u0131r. Bu kurallar, React’in Hooks’lar\u0131 do\u011fru bir \u015fekilde izlemesini ve bile\u015fenlerimizin \u00f6ng\u00f6r\u00fclebilir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. React, bu kurallar\u0131 ihlal etti\u011finizde genellikle uyar\u0131lar verir.<\/p>\n Hooks’lar\u0131 sadece iki yerde \u00e7a\u011f\u0131rabilirsiniz: Hooks’lar\u0131 normal JavaScript fonksiyonlar\u0131nda veya s\u0131n\u0131f bile\u015fenlerinde \u00e7a\u011f\u0131ramazs\u0131n\u0131z. Ayr\u0131ca, d\u00f6ng\u00fclerin, ko\u015fullar\u0131n veya i\u00e7 i\u00e7e fonksiyonlar\u0131n i\u00e7inde de \u00e7a\u011f\u0131rmamal\u0131s\u0131n\u0131z.<\/p>\n Hooks’lar\u0131 her zaman fonksiyon bile\u015feninizin veya \u00f6zel Hook’unuzun en \u00fcst seviyesinde \u00e7a\u011f\u0131rmal\u0131s\u0131n\u0131z. Ko\u015fullu olarak (\u00f6rne\u011fin bir Bu kural\u0131n nedeni, React’in her bir Hook \u00e7a\u011fr\u0131s\u0131n\u0131 dahili olarak bir s\u0131raya g\u00f6re izlemesidir. E\u011fer bir Hook’u ko\u015fullu olarak \u00e7a\u011f\u0131r\u0131rsan\u0131z, bile\u015fenin farkl\u0131 render’lar\u0131 aras\u0131nda Hook’lar\u0131n s\u0131ras\u0131 de\u011fi\u015febilir ve bu da hatalara yol a\u00e7abilir.<\/p>\n React Hooks’un kalbinde, durum y\u00f6netimi ve yan etkileri ele almak i\u00e7in tasarlanm\u0131\u015f iki temel Hook bulunur: Say\u0131: {count}<\/p>\n
\n* Karma\u015f\u0131k Bile\u015fenler ve Ya\u015fam D\u00f6ng\u00fcs\u00fc Metotlar\u0131:<\/strong> Bile\u015fenler b\u00fcy\u00fcd\u00fck\u00e7e, ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131 (componentDidMount<\/code>, componentDidUpdate<\/code>, componentWillUnmount<\/code>) genellikle birbiriyle alakas\u0131z mant\u0131k par\u00e7alar\u0131n\u0131 i\u00e7eriyordu. \u00d6rne\u011fin, veri \u00e7ekme, olay dinleyicileri ayarlama ve temizleme gibi farkl\u0131 yan etkiler ayn\u0131 ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131na da\u011f\u0131lm\u0131\u015f olabiliyordu. Bu durum, kodu okumay\u0131 ve bak\u0131m\u0131n\u0131 yapmay\u0131 zorla\u015ft\u0131r\u0131yordu.
\n* this<\/code> Ba\u011flam\u0131 Sorunu:<\/strong> JavaScript’teki this<\/code> anahtar kelimesinin davran\u0131\u015f\u0131, \u00f6zellikle React s\u0131n\u0131f bile\u015fenlerinde olay i\u015fleyicileriyle \u00e7al\u0131\u015f\u0131rken kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabiliyordu. Geli\u015ftiricilerin genellikle olay i\u015fleyicilerini bind<\/code> etmeleri veya ok fonksiyonlar\u0131 kullanmalar\u0131 gerekiyordu, bu da ekstra s\u00f6zdizimi y\u00fck\u00fc ve potansiyel hatalara yol a\u00e7\u0131yordu.
\n* S\u0131n\u0131flar\u0131n Karma\u015f\u0131kl\u0131\u011f\u0131:<\/strong> JavaScript s\u0131n\u0131flar\u0131, prototip tabanl\u0131 kal\u0131t\u0131m gibi baz\u0131 karma\u015f\u0131k kavramlar\u0131 i\u00e7erir. React Hooks, bu karma\u015f\u0131kl\u0131\u011f\u0131 azaltarak daha basit ve anla\u015f\u0131l\u0131r bir API sunmay\u0131 hedefledi.<\/p>\nHooks’lar\u0131n Vaadi<\/h4>\n
\n* Mant\u0131\u011f\u0131 Yeniden Kullan\u0131m:<\/strong> \u00d6zel Hooks’lar (Custom Hooks) olu\u015fturarak, durumlu mant\u0131\u011f\u0131 bile\u015fenler aras\u0131nda kolayca payla\u015fabiliriz. Bu, “render props” veya HOC’lara k\u0131yasla daha temiz ve daha anla\u015f\u0131l\u0131r bir soyutlama sa\u011flar.
\n* \u0130lgili Mant\u0131\u011f\u0131 Bir Araya Getirme:<\/strong> useEffect<\/code> gibi Hooks’lar, bir bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fcne da\u011f\u0131lm\u0131\u015f ilgili mant\u0131k par\u00e7alar\u0131n\u0131 (\u00f6rne\u011fin, veri \u00e7ekme ve temizleme) tek bir yerde grupland\u0131rmam\u0131z\u0131 sa\u011flar. Bu, kodu daha okunabilir ve bak\u0131m\u0131 daha kolay hale getirir.
\n* this<\/code> Sorununu Ortadan Kald\u0131rma:<\/strong> Fonksiyonel bile\u015fenler this<\/code> anahtar kelimesini kullanmad\u0131\u011f\u0131 i\u00e7in, this<\/code> ba\u011flam\u0131yla ilgili t\u00fcm sorunlar ortadan kalkar.
\n* Daha Az Kod, Daha Anla\u015f\u0131l\u0131r Yap\u0131:<\/strong> Hooks genellikle s\u0131n\u0131f bile\u015fenlerine g\u00f6re daha az ve daha okunabilir kod yazmam\u0131z\u0131 sa\u011flar.<\/p>\nHooks Nedir? Temel Kavramlar<\/h3>\n
Tan\u0131m ve Ama\u00e7<\/h4>\n
use<\/code> ile ba\u015flayan bir JavaScript fonksiyonudur. \u00d6rne\u011fin, useState<\/code>, useEffect<\/code>, useContext<\/code> gibi. Bu isimlendirme kural\u0131, React’in \u00e7al\u0131\u015fma zaman\u0131n\u0131n (runtime) bir fonksiyonun Hook olup olmad\u0131\u011f\u0131n\u0131 anlamas\u0131na yard\u0131mc\u0131 olur ve ayn\u0131 zamanda geli\u015ftiricilere de bir ipucu verir.<\/p>\nHooks Kurallar\u0131<\/h4>\n
Sadece React Fonksiyon Bile\u015fenlerinde \u00c7a\u011f\u0131r\u0131n<\/h5>\n
\n1. React fonksiyon bile\u015fenlerinin en \u00fcst seviyesinde.
\n2. \u00d6zel Hooks’lar\u0131n en \u00fcst seviyesinde.<\/p>\nEn \u00dcst Seviyede \u00c7a\u011f\u0131r\u0131n<\/h5>\n
if<\/code> blo\u011fu i\u00e7inde) veya d\u00f6ng\u00fclerin i\u00e7inde bir Hook \u00e7a\u011f\u0131rmamal\u0131s\u0131n\u0131z.<\/p>\n\/\/ Yanl\u0131\u015f: Hooks'u ko\u015fullu olarak \u00e7a\u011f\u0131r\u0131yorsunuz\nfunction MyComponent(props) {\n if (props.isLoggedIn) {\n const [name, setName] = useState('Guest'); \/\/ Hata!\n }\n \/\/ ...\n}\n\n\/\/ Do\u011fru: Hooks'u her zaman en \u00fcst seviyede \u00e7a\u011f\u0131r\u0131yorsunuz\nfunction MyComponent(props) {\n const [name, setName] = useState('Guest'); \/\/ Do\u011fru\n\n if (props.isLoggedIn) {\n \/\/ ... mant\u0131k ...\n }\n \/\/ ...\n}<\/code><\/pre>\nTemel Hooks’lar: Durum ve Ya\u015fam D\u00f6ng\u00fcs\u00fc Y\u00f6netimi<\/h3>\n
useState<\/code> ve useEffect<\/code>.<\/p>\nuseState<\/code>: Durum Y\u00f6netimi<\/h4>\nuseState<\/code>, bir fonksiyonel bile\u015fene durum eklemenizi sa\u011flayan bir Hook’tur. S\u0131n\u0131f bile\u015fenlerindeki this.state<\/code> ve this.setState<\/code>‘in fonksiyonel bile\u015fenlerdeki kar\u015f\u0131l\u0131\u011f\u0131d\u0131r.<\/p>\nKullan\u0131m \u015eekli ve \u00d6rnek<\/h5>\n
useState<\/code> Hook’u, durum de\u011fi\u015fkeni ve bu durumu g\u00fcncelleyecek bir fonksiyon i\u00e7eren bir dizi d\u00f6nd\u00fcr\u00fcr.<\/p>\nimport React, { useState } from 'react';\n\nfunction Counter() {\n \/\/ count<\/code> durum de\u011fi\u015fkeni, setCount<\/code> ise g\u00fcncelleyici fonksiyondur.\n \/\/ Ba\u015flang\u0131\u00e7 de\u011feri 0'd\u0131r.\n const [count, setCount] = useState(0);\n\n return (\n