{"id":31669,"date":"2025-10-12T15:31:49","date_gmt":"2025-10-12T12:31:49","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/"},"modified":"2025-10-12T15:31:49","modified_gmt":"2025-10-12T12:31:49","slug":"react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/","title":{"rendered":"React Hooks ile Durum ve Mant\u0131k Y\u00f6netimi: Zihninizi Kaybetmeden Basitle\u015ftirme"},"content":{"rendered":"<p><body><\/p>\n<p>React geli\u015ftiricileri i\u00e7in bile zaman zaman karma\u015f\u0131kla\u015fabilen durum y\u00f6netimi ve bile\u015fen mant\u0131\u011f\u0131, Hooks ile devrim niteli\u011finde bir sadelik kazan\u0131yor. Bu kapsaml\u0131 makalede, React Hooks&#8217;un ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve uygulamalar\u0131n\u0131zda nas\u0131l etkili bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Art\u0131k s\u0131n\u0131f bile\u015fenlerinin getirdi\u011fi karma\u015fadan kurtulup, daha temiz, anla\u015f\u0131l\u0131r ve bak\u0131m\u0131 kolay kodlar yazmaya haz\u0131r olun.<\/p>\n<p>React Hooks, React 16.8 s\u00fcr\u00fcm\u00fcyle birlikte tan\u0131t\u0131lan, fonksiyonel bile\u015fenlerde durum (state) ve ya\u015fam d\u00f6ng\u00fcs\u00fc \u00f6zelliklerini kullanmam\u0131za olanak tan\u0131yan \u00f6zel JavaScript fonksiyonlar\u0131d\u0131r. Geleneksel olarak, durum y\u00f6netimi ve yan etkiler (side effects) gibi \u00f6zellikler yaln\u0131zca s\u0131n\u0131f bile\u015fenlerinde kullan\u0131labilirken, Hooks bu k\u0131s\u0131tlamay\u0131 ortadan kald\u0131rd\u0131. Bu yenilik, React toplulu\u011funda b\u00fcy\u00fck bir heyecan yaratt\u0131 ve geli\u015ftirme s\u00fcre\u00e7lerimizi k\u00f6kten de\u011fi\u015ftirdi.<\/p>\n<p>Peki, Hooks neden bu kadar \u00f6nemli ve hayat\u0131m\u0131z\u0131 nas\u0131l kolayla\u015ft\u0131r\u0131yor? Temel olarak, s\u0131n\u0131f bile\u015fenlerinin getirdi\u011fi baz\u0131 zorluklar\u0131 ortadan kald\u0131r\u0131yorlar. \u00d6rne\u011fin, <code>this<\/code> anahtar kelimesinin karma\u015f\u0131k ba\u011flama mekanizmalar\u0131, s\u0131n\u0131f bile\u015fenlerinde s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir problemdi. \u00d6zellikle yeni ba\u015flayan geli\u015ftiriciler i\u00e7in <code>this<\/code>&#8216;in farkl\u0131 ba\u011flamlarda nas\u0131l davrand\u0131\u011f\u0131n\u0131 anlamak kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabiliyordu. Hooks ile birlikte fonksiyonel bile\u015fenler \u00f6n plana \u00e7\u0131kt\u0131 ve <code>this<\/code> karma\u015fas\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azald\u0131. Art\u0131k bile\u015fen mant\u0131\u011f\u0131n\u0131 \u00e7ok daha okunabilir ve y\u00f6netilebilir bir \u015fekilde, basit JavaScript fonksiyonlar\u0131 i\u00e7erisinde yazabiliyoruz. Bu durum, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131n geli\u015ftirilmesinde kod kalitesini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131yor.<\/p>\n<p>Buna ek olarak, s\u0131n\u0131f bile\u015fenlerindeki ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131 (<code>componentDidMount<\/code>, <code>componentDidUpdate<\/code>, <code>componentWillUnmount<\/code> gibi) genellikle birbiriyle alakas\u0131z mant\u0131klar\u0131 ayn\u0131 yerde bar\u0131nd\u0131rma e\u011filimindeydi. \u00d6rne\u011fin, veri \u00e7ekme i\u015flemi hem <code>componentDidMount<\/code> hem de <code>componentDidUpdate<\/code> i\u00e7inde tekrar edebiliyor, veya bir olay dinleyicisi ekleme ve kald\u0131rma mant\u0131\u011f\u0131 iki farkl\u0131 ya\u015fam d\u00f6ng\u00fcs\u00fc metoduna yay\u0131l\u0131yordu. Bu da kodun anla\u015f\u0131lmas\u0131n\u0131 ve s\u00fcrd\u00fcr\u00fclmesini zorla\u015ft\u0131r\u0131yordu. Hooks, \u00f6zellikle <code>useEffect<\/code> ile bu problemi \u00e7\u00f6zerek, ilgili mant\u0131klar\u0131 tek bir fonksiyon i\u00e7inde birle\u015ftirmemizi sa\u011fl\u0131yor. Art\u0131k veri \u00e7ekme, abonelikler veya DOM manip\u00fclasyonu gibi yan etkileri \u00e7ok daha d\u00fczenli bir \u015fekilde y\u00f6netebiliyoruz. Dolay\u0131s\u0131yla, kodunuzun farkl\u0131 par\u00e7alar\u0131na da\u011f\u0131lm\u0131\u015f mant\u0131klar yerine, ilgili mant\u0131klar\u0131 bir arada tutarak okunabilirli\u011fi ve bak\u0131m\u0131 iyile\u015ftiriyorsunuz.<\/p>\n<p>Bir di\u011fer \u00f6nemli avantaj\u0131 ise yeniden kullan\u0131labilirlik. Hooks, durum y\u00f6netimi veya yan etki mant\u0131\u011f\u0131n\u0131 bile\u015fenler aras\u0131nda kolayca payla\u015f\u0131labilir hale getiriyor. Kendi \u00f6zel Hook&#8217;lar\u0131n\u0131z\u0131 yazarak, bir kez yazd\u0131\u011f\u0131n\u0131z bir mant\u0131\u011f\u0131 birden fazla bile\u015fende hi\u00e7 tekrar etmeden kullanabilirsiniz. Bu, \u00f6zellikle ayn\u0131 veya benzer i\u015flevselli\u011fi farkl\u0131 yerlerde uygulaman\u0131z gerekti\u011finde b\u00fcy\u00fck bir zaman tasarrufu sa\u011flar ve kod tekrar\u0131n\u0131 azalt\u0131r. Bu sayede, daha mod\u00fcler, \u00f6l\u00e7eklenebilir ve temiz bir kod taban\u0131 olu\u015fturabilirsiniz. Sonu\u00e7 olarak, React Hooks, hem geli\u015ftirme verimlili\u011fini art\u0131ran hem de uygulama performans\u0131n\u0131 olumlu y\u00f6nde etkileyen g\u00fc\u00e7l\u00fc bir ara\u00e7 setidir. Bu yenilikler, modern React uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015ftir.<\/p>\n<h2>Temel Kavramlar: Class Component&#8217;lardan Fonksiyonel Component&#8217;lara Ge\u00e7i\u015f Nas\u0131l Oldu?<\/h2>\n<p>React&#8217;in ilk zamanlar\u0131nda, bile\u015fenler genellikle iki \u015fekilde tan\u0131mlan\u0131rd\u0131: fonksiyonel bile\u015fenler (stateless functional components) ve s\u0131n\u0131f bile\u015fenleri (class components). Fonksiyonel bile\u015fenler, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, sadece prop&#8217;lar\u0131 al\u0131p JSX d\u00f6nd\u00fcren basit JavaScript fonksiyonlar\u0131yd\u0131. Ancak durum y\u00f6netimi veya ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131 gibi daha geli\u015fmi\u015f \u00f6zelliklere ihtiya\u00e7 duyuldu\u011funda, s\u0131n\u0131f bile\u015fenleri kullanmak zorunluydu. S\u0131n\u0131f bile\u015fenleri, <code>React.Component<\/code> s\u0131n\u0131f\u0131ndan miras al\u0131r ve kendi i\u00e7inde durumlar\u0131n\u0131 (<code>this.state<\/code>) ve \u00e7e\u015fitli ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131 (<code>componentDidMount<\/code>, <code>componentDidUpdate<\/code> vb.) bar\u0131nd\u0131r\u0131rd\u0131. Bu yap\u0131, ba\u015flang\u0131\u00e7ta g\u00fc\u00e7l\u00fc g\u00f6r\u00fcnse de, zamanla baz\u0131 zorluklar\u0131 beraberinde getirdi.<\/p>\n<p>S\u0131n\u0131f bile\u015fenlerinin en belirgin zorluklar\u0131ndan biri, <code>this<\/code> anahtar kelimesinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamakt\u0131. JavaScript&#8217;teki <code>this<\/code>, \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 ba\u011flama g\u00f6re de\u011fi\u015fir ve bu durum, \u00f6zellikle olay y\u00f6neticileri i\u00e7inde veya callback fonksiyonlar\u0131 aras\u0131nda <code>this<\/code>&#8216;i do\u011fru \u015fekilde ba\u011flamak i\u00e7in s\u00fcrekli olarak <code>.bind(this)<\/code> kullanma veya arrow fonksiyonlar\u0131 tercih etme gereklili\u011fi yarat\u0131rd\u0131. Bu, kodu hem uzat\u0131r hem de potansiyel hatalara yol a\u00e7abilirdi. Ayr\u0131ca, s\u0131n\u0131f bile\u015fenlerinde ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131n kullan\u0131m\u0131 da bir di\u011fer karma\u015f\u0131kl\u0131k kayna\u011f\u0131yd\u0131. \u00d6rne\u011fin, bir bile\u015fen y\u00fcklendi\u011finde (mount) veri \u00e7ekme, g\u00fcncellendi\u011finde (update) ek bir i\u015flem yapma veya bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda (unmount) temizlik yapma gibi farkl\u0131 mant\u0131klar, ayr\u0131 ayr\u0131 metodlar i\u00e7inde yaz\u0131l\u0131rd\u0131. Ancak \u00e7o\u011fu zaman, bu metodlar aras\u0131nda birbiriyle ili\u015fkili mant\u0131klar da\u011f\u0131l\u0131rd\u0131. \u00d6rne\u011fin, bir veri \u00e7ekme i\u015flemi <code>componentDidMount<\/code>&#8216;ta ba\u015flat\u0131l\u0131rken, ayn\u0131 veriyi ba\u015fka bir prop de\u011fi\u015fti\u011finde yeniden \u00e7ekme mant\u0131\u011f\u0131 <code>componentDidUpdate<\/code>&#8216;te yaz\u0131lmak zorundayd\u0131. Bu, ayn\u0131 mant\u0131\u011f\u0131n farkl\u0131 yerlere yay\u0131lmas\u0131na ve kodun okunabilirli\u011finin azalmas\u0131na neden oluyordu.<\/p>\n<p>\u0130\u015fte bu noktada React Hooks devreye girdi ve fonksiyonel bile\u015fenlere s\u0131n\u0131f bile\u015fenlerinin g\u00fcc\u00fcn\u00fc kazand\u0131rd\u0131. Hooks, temelde bir bile\u015fenin durumuna ve ya\u015fam d\u00f6ng\u00fcs\u00fcne &#8220;tak\u0131lman\u0131z\u0131&#8221; sa\u011flayan fonksiyonlard\u0131r. Bu sayede, art\u0131k durum y\u00f6netimi (<code>useState<\/code> ile) ve yan etkiler (<code>useEffect<\/code> ile) gibi \u00f6zellikleri do\u011frudan fonksiyonel bile\u015fenler i\u00e7inde kullanabiliyoruz. Bu ge\u00e7i\u015f, geli\u015ftiricilere s\u0131n\u0131f bile\u015fenlerinin getirdi\u011fi karma\u015fadan kurtulma ve daha basit, daha temiz bir s\u00f6zdizimi ile \u00e7al\u0131\u015fma f\u0131rsat\u0131 sundu. \u00d6rne\u011fin, <code>this.state = {}<\/code> ve <code>this.setState({})<\/code> gibi ifadeler yerine, <code>const [state, setState] = useState(initialValue)<\/code> gibi daha modern ve anla\u015f\u0131l\u0131r bir yap\u0131 kullanmaya ba\u015flad\u0131k. Benzer \u015fekilde, ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131n yerini <code>useEffect<\/code> ald\u0131, bu da ilgili yan etki mant\u0131\u011f\u0131n\u0131 tek bir yerde toplamam\u0131z\u0131 sa\u011flad\u0131. Fonksiyonel bile\u015fenlerin do\u011fas\u0131 gere\u011fi daha saf ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131, Hooks ile birle\u015fince React geli\u015ftirmesini \u00e7ok daha keyifli ve verimli hale getirdi. Bu sayede, daha k\u00fc\u00e7\u00fck, daha odakl\u0131 ve daha kolay test edilebilir bile\u015fenler olu\u015fturmak m\u00fcmk\u00fcn hale geldi. \u00d6zellikle b\u00fcy\u00fck projelerde, bu mod\u00fcler yap\u0131, ekip i\u00e7i i\u015fbirli\u011fini ve kodun bak\u0131m\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131rmaktad\u0131r.<\/p>\n<h2>En Temel Hook&#8217;lar: useState ve useEffect ile Tan\u0131\u015f\u0131n<\/h2>\n<p>React Hooks d\u00fcnyas\u0131na ad\u0131m atarken kar\u015f\u0131la\u015faca\u011f\u0131m\u0131z ilk ve en temel iki Hook, <code>useState<\/code> ve <code>useEffect<\/code>&#8216;tir. Bu iki Hook, fonksiyonel bile\u015fenlerimize durum y\u00f6netimi ve yan etki yetenekleri kazand\u0131rarak, s\u0131n\u0131f bile\u015fenlerinin sundu\u011fu g\u00fcc\u00fc \u00e7ok daha basit ve anla\u015f\u0131l\u0131r bir \u015fekilde sunar.<\/p>\n<h3>useState() ile Durum Y\u00f6netimi Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n<p><code>useState<\/code>, fonksiyonel bile\u015fenlerde yerel durumu y\u00f6netmek i\u00e7in kullan\u0131lan bir Hook&#8217;tur. S\u0131n\u0131f bile\u015fenlerindeki <code>this.state<\/code> ve <code>this.setState<\/code>&#8216;in yerini al\u0131r ancak \u00e7ok daha yal\u0131n bir kullan\u0131m sunar. <code>useState<\/code> fonksiyonunu \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131zda, size iki elemanl\u0131 bir dizi d\u00f6nd\u00fcr\u00fcr: mevcut durum de\u011feri ve bu durumu g\u00fcncelleyecek bir fonksiyon. Bu dizi par\u00e7alama (array destructuring) \u00f6zelli\u011fi sayesinde, durum de\u011fi\u015fkenine ve onu g\u00fcncelleyecek fonksiyona istedi\u011fimiz isimleri verebiliriz. \u00d6rne\u011fin, bir say\u0131c\u0131 uygulamas\u0131 yapmak istedi\u011fimizde, bunu \u015fu \u015fekilde kullanabiliriz:<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\nimport React, { useState } from 'react';\n\nfunction Sayac() {\n  \/\/ 'sayi' mevcut durum de\u011feri, 'setSayi' ise onu g\u00fcncelleyecek fonksiyon\n  \/\/ Ba\u015flang\u0131\u00e7 de\u011feri olarak 0 verildi.\n  const [sayi, setSayi] = useState(0);\n\n  return (\n    <div>\n      <p>Mevcut Say\u0131: {sayi}<\/p>\n      <button onClick={() => setSayi(sayi + 1)}>Artt\u0131r<\/button>\n      <button onClick={() => setSayi(sayi - 1)}>Azalt<\/button>\n    <\/div>\n  );\n}\n\nexport default Sayac;\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Yukar\u0131daki \u00f6rnekte, <code>useState(0)<\/code> \u00e7a\u011fr\u0131s\u0131 bize <code>sayi<\/code> (ba\u015flang\u0131\u00e7ta 0) ve <code>setSayi<\/code> fonksiyonunu verir. Butonlara t\u0131kland\u0131\u011f\u0131nda, <code>setSayi<\/code> fonksiyonu \u00e7a\u011fr\u0131larak <code>sayi<\/code> de\u011feri g\u00fcncellenir ve React, bile\u015feni yeniden render eder. <code>useState<\/code> ile bir nesne veya dizi gibi daha karma\u015f\u0131k durumlar\u0131 da y\u00f6netebilirsiniz. Ancak \u00f6nemli bir nokta, bir nesne veya diziyi g\u00fcncellerken do\u011frudan mutasyon yapmaktan ka\u00e7\u0131nmak ve her zaman yeni bir nesne\/dizi d\u00f6nd\u00fcrmektir. Aksi takdirde, React durumun de\u011fi\u015fti\u011fini alg\u0131layamayabilir ve bile\u015feni yeniden render etmeyebilir. \u00d6rne\u011fin, bir nesneyi g\u00fcncellerken spread operat\u00f6r\u00fcn\u00fc (<code>...<\/code>) kullanmak yayg\u0131n bir yakla\u015f\u0131md\u0131r:<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\nimport React, { useState } from 'react';\n\nfunction KullaniciProfili() {\n  const [kullanici, setKullanici] = useState({ ad: 'Ali', soyad: 'Veli', yas: 30 });\n\n  const yasiDegistir = () => {\n    setKullanici(prevKullanici => ({\n      ...prevKullanici, \/\/ \u00d6nceki t\u00fcm \u00f6zellikleri kopyala\n      yas: prevKullanici.yas + 1 \/\/ Sadece 'yas' \u00f6zelli\u011fini g\u00fcncelle\n    }));\n  };\n\n  return (\n    <div>\n      <p>Ad: {kullanici.ad}<\/p>\n      <p>Soyad: {kullanici.soyad}<\/p>\n      <p>Ya\u015f: {kullanici.yas}<\/p>\n      <button onClick={yasiDegistir}>Ya\u015f\u0131 Art\u0131r<\/button>\n    <\/div>\n  );\n}\n\nexport default KullaniciProfili;\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Bu yakla\u015f\u0131m, mevcut durumun g\u00fcvenli bir kopyas\u0131n\u0131 olu\u015fturarak yaln\u0131zca gerekli de\u011fi\u015fiklikleri uygulaman\u0131z\u0131 sa\u011flar. Dolay\u0131s\u0131yla, <code>useState<\/code> ile \u00e7al\u0131\u015f\u0131rken immutability (de\u011fi\u015ftirilemezlik) prensibini ak\u0131lda tutmak performans ve beklenen davran\u0131\u015f a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir.<\/p>\n<h3>useEffect() ile Yan Etkileri Y\u00f6netme ve Ya\u015fam D\u00f6ng\u00fcs\u00fcn\u00fc Sim\u00fcle Etme<\/h3>\n<p><code>useEffect<\/code>, fonksiyonel bile\u015fenlerde yan etkileri (side effects) y\u00f6netmek i\u00e7in tasarlanm\u0131\u015f g\u00fc\u00e7l\u00fc bir Hook'tur. Yan etkiler, bir bile\u015fenin UI's\u0131n\u0131n d\u0131\u015f\u0131nda ger\u00e7ekle\u015fen ve di\u011fer sistemleri etkileyebilecek i\u015flemlerdir. Bunlar aras\u0131nda veri \u00e7ekme (data fetching), DOM manip\u00fclasyonu, abonelikler (subscriptions), zamanlay\u0131c\u0131lar (timers) ve taray\u0131c\u0131 API'lar\u0131n\u0131 kullanma gibi i\u015flemler bulunur. <code>useEffect<\/code>, s\u0131n\u0131f bile\u015fenlerindeki <code>componentDidMount<\/code>, <code>componentDidUpdate<\/code> ve <code>componentWillUnmount<\/code> metodlar\u0131n\u0131n i\u015flevselli\u011fini tek bir API alt\u0131nda birle\u015ftirir.<\/p>\n<p><code>useEffect<\/code> iki arg\u00fcman al\u0131r: bir callback fonksiyonu ve iste\u011fe ba\u011fl\u0131 olarak bir ba\u011f\u0131ml\u0131l\u0131klar dizisi. Callback fonksiyonu, yan etkiyi i\u00e7eren kodu bar\u0131nd\u0131r\u0131r. Ba\u011f\u0131ml\u0131l\u0131klar dizisi (dependency array) ise, bu yan etkinin ne zaman yeniden \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131n\u0131 kontrol eder. E\u011fer ba\u011f\u0131ml\u0131l\u0131klar dizisi bo\u015f bir dizi <code>[]<\/code> ise, <code>useEffect<\/code> yaln\u0131zca bile\u015fen ilk y\u00fcklendi\u011finde (mount) bir kez \u00e7al\u0131\u015f\u0131r ve s\u0131n\u0131f bile\u015fenlerindeki <code>componentDidMount<\/code>'a benzer bir davran\u0131\u015f sergiler. E\u011fer ba\u011f\u0131ml\u0131l\u0131klar dizisi hi\u00e7 verilmezse, <code>useEffect<\/code> her render i\u015fleminden sonra \u00e7al\u0131\u015f\u0131r. E\u011fer dizide belirli de\u011fi\u015fkenler varsa, bu de\u011fi\u015fkenlerden herhangi biri de\u011fi\u015fti\u011finde <code>useEffect<\/code> yeniden \u00e7al\u0131\u015f\u0131r. Bu sayede, yan etkileri yaln\u0131zca gerekti\u011finde tetikleyerek performans optimizasyonu yapabiliriz. \u00d6rne\u011fin, harici bir API'dan veri \u00e7ekme i\u015flemi:<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\nimport React, { useState, useEffect } from 'react';\n\nfunction VeriCekme() {\n  const [veri, setVeri] = useState(null);\n  const [yukleniyor, setYukleniyor] = useState(true);\n  const [hata, setHata] = useState(null);\n\n  \/\/ useEffect, bile\u015fen ilk y\u00fcklendi\u011finde bir kez \u00e7al\u0131\u015facak\n  \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi bo\u015f oldu\u011fu i\u00e7in (componentDidMount benzeri)\n  useEffect(() => {\n    fetch('https:\/\/jsonplaceholder.typicode.com\/posts\/1')\n      .then(response => {\n        if (!response.ok) {\n          throw new Error('Veri \u00e7ekme hatas\u0131!');\n        }\n        return response.json();\n      })\n      .then(data => {\n        setVeri(data);\n        setYukleniyor(false);\n      })\n      .catch(error => {\n        setHata(error);\n        setYukleniyor(false);\n      });\n  }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi\n\n  if (yukleniyor) return <p>Veriler y\u00fckleniyor...<\/p>;\n  if (hata) return <p>Hata: {hata.message}<\/p>;\n\n  return (\n    <div>\n      <h3>G\u00f6nderi Ba\u015fl\u0131\u011f\u0131: {veri.title}<\/h3>\n      <p>{veri.body}<\/p>\n    <\/div>\n  );\n}\n\nexport default VeriCekme;\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p><code>useEffect<\/code>'in bir di\u011fer \u00f6nemli \u00f6zelli\u011fi ise temizlik fonksiyonudur (cleanup function). E\u011fer <code>useEffect<\/code> i\u00e7inde bir abonelik ba\u015flatt\u0131ysan\u0131z, bir zamanlay\u0131c\u0131 kurduysan\u0131z veya bir olay dinleyicisi eklediyseniz, bile\u015fen DOM'dan kald\u0131r\u0131ld\u0131\u011f\u0131nda (unmount) veya yan etki yeniden \u00e7al\u0131\u015ft\u0131r\u0131lmadan \u00f6nce bu kaynaklar\u0131 temizlemeniz gerekir. Aksi takdirde, haf\u0131za s\u0131z\u0131nt\u0131lar\u0131 veya istenmeyen davran\u0131\u015flar meydana gelebilir. Bunu yapmak i\u00e7in, <code>useEffect<\/code>'in callback fonksiyonundan bir fonksiyon d\u00f6nd\u00fcr\u00fcrs\u00fcn\u00fcz. Bu d\u00f6nd\u00fcr\u00fclen fonksiyon, temizlik i\u015flevini ger\u00e7ekle\u015ftirir.<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\nimport React, { useState, useEffect } from 'react';\n\nfunction PencereBoyutu() {\n  const [genislik, setGenislik] = useState(window.innerWidth);\n\n  useEffect(() => {\n    const handleResize = () => setGenislik(window.innerWidth);\n\n    window.addEventListener('resize', handleResize);\n\n    \/\/ Temizlik fonksiyonu: Bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda olay dinleyicisini kald\u0131r\u0131r\n    return () => {\n      window.removeEventListener('resize', handleResize);\n    };\n  }, []); \/\/ Sadece ilk render'da \u00e7al\u0131\u015f\u0131r\n\n  return (\n    <p>Pencere Geni\u015fli\u011fi: {genislik}px<\/p>\n  );\n}\n\nexport default PencereBoyutu;\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Bu \u00f6rnekte, <code>useEffect<\/code> bir olay dinleyicisi ekler ve d\u00f6nd\u00fcr\u00fclen fonksiyon, bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda bu dinleyiciyi kald\u0131rarak kaynaklar\u0131 serbest b\u0131rak\u0131r. <code>useState<\/code> ve <code>useEffect<\/code>, React Hooks'un temel ta\u015flar\u0131d\u0131r ve modern React uygulamalar\u0131n\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011funda kullan\u0131l\u0131r. Bu Hook'lar\u0131 ustaca kullanarak, daha temiz, daha anla\u015f\u0131l\u0131r ve bak\u0131m\u0131 kolay fonksiyonel bile\u015fenler olu\u015fturabilirsiniz.<\/p>\n<h2>Ger\u00e7ek D\u00fcnya Senaryosu: Bir To-Do Uygulamas\u0131 ile Hooks G\u00fcc\u00fcn\u00fc Ke\u015ffedin<\/h2>\n<p>Teorik bilgiler harika, ancak React Hooks'un ger\u00e7ek d\u00fcnyadaki g\u00fcc\u00fcn\u00fc anlaman\u0131n en iyi yolu, pratik bir \u00f6rnek \u00fczerinden gitmektir. \u015eimdi basit bir To-Do listesi uygulamas\u0131 olu\u015fturarak <code>useState<\/code> ve <code>useEffect<\/code> gibi temel Hook'lar\u0131 nas\u0131l bir araya getirebilece\u011fimizi g\u00f6relim. Bu uygulama, kullan\u0131c\u0131lar\u0131n yeni g\u00f6revler eklemesini, mevcut g\u00f6revleri tamamland\u0131 olarak i\u015faretlemesini ve g\u00f6revleri silmesini sa\u011flayacak.<\/p>\n<div class=\"expert-tip\">\n      Uzman \u0130pucu: Karma\u015f\u0131k state yap\u0131lar\u0131 yerine, state'i k\u00fc\u00e7\u00fck ve izole par\u00e7alara ay\u0131rmak kodunuzu daha y\u00f6netilebilir hale getirir. \u00d6rne\u011fin, To-Do listesini tek bir nesne olarak tutmak yerine, her To-Do \u00f6\u011fesini kendi ba\u015f\u0131na bir nesne olarak ve t\u00fcm listeyi bir dizi olarak tutmak daha mant\u0131kl\u0131d\u0131r.\n    <\/div>\n<h3>To-Do Uygulamas\u0131 \u0130\u00e7in Temel Yap\u0131 ve useState Kullan\u0131m\u0131<\/h3>\n<p>\u0130lk olarak, uygulamam\u0131z\u0131n temel bile\u015fenini ve gerekli durum de\u011fi\u015fkenlerini tan\u0131mlayal\u0131m. \u0130ki ana duruma ihtiyac\u0131m\u0131z olacak: yeni bir g\u00f6rev eklemek i\u00e7in kullan\u0131lacak giri\u015f alan\u0131 de\u011feri (<code>yeniGorev<\/code>) ve t\u00fcm g\u00f6revleri tutan bir dizi (<code>gorevler<\/code>). Her g\u00f6rev nesnesi bir <code>id<\/code>, <code>metin<\/code> ve <code>tamamlandi<\/code> durumu i\u00e7erecek.<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\nimport React, { useState, useEffect } from 'react';\n\nfunction TodoUygulamasi() {\n  \/\/ Yeni g\u00f6rev giri\u015f alan\u0131 i\u00e7in state\n  const [yeniGorev, setYeniGorev] = useState('');\n  \/\/ G\u00f6revlerin listesi i\u00e7in state. Ba\u015flang\u0131\u00e7ta bo\u015f bir dizi.\n  const [gorevler, setGorevler] = useState([]);\n\n  \/\/ localStorage'dan g\u00f6revleri y\u00fcklemek i\u00e7in useEffect\n  useEffect(() => {\n    const kaydedilmisGorevler = JSON.parse(localStorage.getItem('gorevler'));\n    if (kaydedilmisGorevler) {\n      setGorevler(kaydedilmisGorevler);\n    }\n  }, []); \/\/ Sadece bile\u015fen y\u00fcklendi\u011finde bir kez \u00e7al\u0131\u015f\u0131r\n\n  \/\/ G\u00f6revler her de\u011fi\u015fti\u011finde localStorage'a kaydetmek i\u00e7in useEffect\n  useEffect(() => {\n    localStorage.setItem('gorevler', JSON.stringify(gorevler));\n  }, [gorevler]); \/\/ 'gorevler' state'i de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r\n\n  \/\/ Yeni g\u00f6rev ekleme fonksiyonu\n  const gorevEkle = (e) => {\n    e.preventDefault(); \/\/ Formun varsay\u0131lan g\u00f6nderimini engelle\n    if (yeniGorev.trim() === '') return; \/\/ Bo\u015f g\u00f6rev eklenmesini engelle\n\n    const yeniGorevObj = {\n      id: Date.now(), \/\/ Benzersiz bir ID olu\u015ftur\n      metin: yeniGorev,\n      tamamlandi: false,\n    };\n    setGorevler(prevGorevler => [...prevGorevler, yeniGorevObj]);\n    setYeniGorev(''); \/\/ Giri\u015f alan\u0131n\u0131 temizle\n  };\n\n  \/\/ G\u00f6rev tamamlama durumunu de\u011fi\u015ftirme fonksiyonu\n  const gorevTamamlandiToggle = (id) => {\n    setGorevler(prevGorevler =>\n      prevGorevler.map(gorev =>\n        gorev.id === id ? { ...gorev, tamamlandi: !gorev.tamamlandi } : gorev\n      )\n    );\n  };\n\n  \/\/ G\u00f6rev silme fonksiyonu\n  const gorevSil = (id) => {\n    setGorevler(prevGorevler => prevGorevler.filter(gorev => gorev.id !== id));\n  };\n\n  return (\n    <div className=\"todo-container\">\n      <h1>Yap\u0131lacaklar Listesi<\/h1>\n      <form onSubmit={gorevEkle}>\n        <input\n          type=\"text\"\n          value={yeniGorev}\n          onChange={(e) => setYeniGorev(e.target.value)}\n          placeholder=\"Yeni g\u00f6rev ekle...\"\n        \/>\n        <button type=\"submit\">Ekle<\/button>\n      <\/form>\n      <ul className=\"todo-list\">\n        {gorevler.map((gorev) => (\n          <li key={gorev.id} className={gorev.tamamlandi ? 'tamamlandi' : ''}>\n            <span onClick={() => gorevTamamlandiToggle(gorev.id)}>\n              {gorev.metin}\n            <\/span>\n            <button onClick={() => gorevSil(gorev.id)}>Sil<\/button>\n          <\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default TodoUygulamasi;\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Yukar\u0131daki kod blo\u011funda, <code>useState<\/code> Hook'unu iki farkl\u0131 ama\u00e7 i\u00e7in kulland\u0131k: biri form giri\u015fi (<code>yeniGorev<\/code>) i\u00e7in, di\u011feri ise To-Do \u00f6\u011feleri listesini (<code>gorevler<\/code>) tutmak i\u00e7in. <code>gorevEkle<\/code>, <code>gorevTamamlandiToggle<\/code> ve <code>gorevSil<\/code> fonksiyonlar\u0131, <code>setGorevler<\/code> fonksiyonunu kullanarak <code>gorevler<\/code> state'ini g\u00fcvenli bir \u015fekilde g\u00fcnceller. \u00d6zellikle <code>gorevTamamlandiToggle<\/code> fonksiyonunda, <code>map<\/code> metodunu kullanarak ilgili g\u00f6revin <code>tamamlandi<\/code> \u00f6zelli\u011fini de\u011fi\u015ftiriyoruz ve yeni bir dizi d\u00f6nd\u00fcrerek immutability prensibine uyuyoruz. Ayn\u0131 \u015fekilde, <code>gorevSil<\/code> fonksiyonu da <code>filter<\/code> metodu ile yeni bir dizi olu\u015fturarak istenmeyen g\u00f6revi listeden \u00e7\u0131kar\u0131yor. Bu, React'in de\u011fi\u015fiklikleri alg\u0131lamas\u0131 ve UI'\u0131 do\u011fru bir \u015fekilde g\u00fcncellemesi i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<h3>useEffect ile Veri Saklama ve Y\u00fckleme<\/h3>\n<p>Uygulamam\u0131z\u0131n kapan\u0131p a\u00e7\u0131ld\u0131\u011f\u0131nda g\u00f6revleri kaybetmemesi i\u00e7in <code>localStorage<\/code>'\u0131 kullanal\u0131m. Bu i\u015flem, tipik bir yan etki \u00f6rne\u011fidir ve <code>useEffect<\/code> i\u00e7in m\u00fckemmel bir kullan\u0131m alan\u0131d\u0131r. \u0130lk <code>useEffect<\/code> Hook'u, bile\u015fen ilk y\u00fcklendi\u011finde <code>localStorage<\/code>'dan daha \u00f6nce kaydedilmi\u015f g\u00f6revleri \u00e7eker ve <code>gorevler<\/code> state'ini bu verilerle ba\u015flat\u0131r. \u0130kinci <code>useEffect<\/code> Hook'u ise, <code>gorevler<\/code> state'i her de\u011fi\u015fti\u011finde (yani yeni bir g\u00f6rev eklendi\u011finde, tamamland\u0131\u011f\u0131nda veya silindi\u011finde) g\u00f6revlerin g\u00fcncel listesini <code>localStorage<\/code>'a kaydeder.<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-css\">\n\/* TodoUygulamasi i\u00e7in basit CSS *\/\n.todo-container {\n  max-width: 600px;\n  margin: 50px auto;\n  padding: 20px;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n  font-family: Arial, sans-serif;\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n}\n\nform {\n  display: flex;\n  margin-bottom: 20px;\n}\n\nform input {\n  flex-grow: 1;\n  padding: 10px;\n  border: 1px solid #eee;\n  border-radius: 4px;\n  margin-right: 10px;\n}\n\nform button {\n  padding: 10px 15px;\n  background-color: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\nform button:hover {\n  background-color: #0056b3;\n}\n\n.todo-list {\n  list-style: none;\n  padding: 0;\n}\n\n.todo-list li {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px;\n  border-bottom: 1px solid #eee;\n}\n\n.todo-list li:last-child {\n  border-bottom: none;\n}\n\n.todo-list li span {\n  flex-grow: 1;\n  cursor: pointer;\n  padding: 5px; \/* T\u0131klama alan\u0131n\u0131 geni\u015fletmek i\u00e7in *\/\n}\n\n.todo-list li.tamamlandi span {\n  text-decoration: line-through;\n  color: #888;\n}\n\n.todo-list li button {\n  background-color: #dc3545;\n  color: white;\n  border: none;\n  padding: 5px 10px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\n.todo-list li button:hover {\n  background-color: #c82333;\n}\n\n\/* Mobil uyumluluk i\u00e7in medya sorgusu *\/\n@media (max-width: 768px) {\n  .todo-container {\n    margin: 20px;\n    padding: 15px;\n  }\n  form {\n    flex-direction: column;\n  }\n  form input {\n    margin-right: 0;\n    margin-bottom: 10px;\n  }\n}\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Bu basit To-Do uygulamas\u0131, <code>useState<\/code> ve <code>useEffect<\/code>'in g\u00fcc\u00fcn\u00fc ve esnekli\u011fini g\u00f6stermektedir. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, Hooks sayesinde durum y\u00f6netimi ve yan etkileri y\u00f6netmek, s\u0131n\u0131f bile\u015fenlerine k\u0131yasla \u00e7ok daha temiz ve sezgisel bir hale gelmi\u015ftir. \u00d6zellikle <code>useEffect<\/code>'in ba\u011f\u0131ml\u0131l\u0131k dizisi, yan etkilerin ne zaman \u00e7al\u0131\u015faca\u011f\u0131n\u0131 hassas bir \u015fekilde kontrol etmemizi sa\u011flayarak gereksiz yeniden render i\u015flemlerini ve performans sorunlar\u0131n\u0131 \u00f6nler. Ayr\u0131ca, bu yap\u0131, kodun bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r ve gelecekte yeni \u00f6zellikler eklemek i\u00e7in sa\u011flam bir temel sunar. To-Do uygulamas\u0131n\u0131 geli\u015ftirirken, her bir Hook'un belirli bir g\u00f6revi oldu\u011funu ve bu g\u00f6revleri ba\u011f\u0131ms\u0131z olarak ele alman\u0131n kodun genel kalitesini nas\u0131l art\u0131rd\u0131\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a g\u00f6rebilirsiniz.<\/p>\n<h2>Di\u011fer \u00d6nemli Hook'lar: useContext, useRef ve useMemo ile Performans\u0131 Art\u0131r\u0131n<\/h2>\n<p>React Hooks, sadece <code>useState<\/code> ve <code>useEffect<\/code> ile s\u0131n\u0131rl\u0131 de\u011fildir. React ekosisteminde geli\u015ftiricilere sunulan bir dizi ba\u015fka g\u00fc\u00e7l\u00fc Hook daha bulunmaktad\u0131r. Bu Hook'lar, uygulamalar\u0131n\u0131zdaki daha karma\u015f\u0131k senaryolar\u0131 ele alman\u0131za, bile\u015fenler aras\u0131 veri payla\u015f\u0131m\u0131n\u0131 basitle\u015ftirmenize ve performans\u0131 optimize etmenize yard\u0131mc\u0131 olur. \u015eimdi bu \u00f6nemli Hook'lardan baz\u0131lar\u0131na daha yak\u0131ndan bakal\u0131m: <code>useContext<\/code>, <code>useRef<\/code> ve <code>useMemo<\/code>.<\/p>\n<h3>useContext() ile Veri Payla\u015f\u0131m\u0131n\u0131 Kolayla\u015ft\u0131r\u0131n<\/h3>\n<p>B\u00fcy\u00fck uygulamalarda, verileri bir \u00fcst bile\u015fenden alt bile\u015fenlere prop'lar arac\u0131l\u0131\u011f\u0131yla iletmek bazen \"prop drilling\" olarak adland\u0131r\u0131lan bir soruna yol a\u00e7abilir. Yani, bir veri \u00e7ok derin bir alt bile\u015fene ula\u015fana kadar bir\u00e7ok ara bile\u015fen \u00fczerinden prop olarak ge\u00e7mek zorunda kal\u0131r. Bu durum, kodu okunmas\u0131 ve bak\u0131m\u0131 zor hale getirir. <code>useContext<\/code> Hook'u, bu problemi React Context API ile birle\u015ftirerek \u00e7\u00f6zer. Context API, uygulaman\u0131z\u0131n farkl\u0131 yerlerinde global olarak eri\u015filebilen verileri olu\u015fturman\u0131za olanak tan\u0131r ve <code>useContext<\/code> bu verilere fonksiyonel bile\u015fenler i\u00e7inde eri\u015fmenizi sa\u011flar.<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\nimport React, { createContext, useContext, useState } from 'react';\n\n\/\/ 1. Bir Context olu\u015fturun\nconst TemaContext = createContext(null);\n\n\/\/ 2. Bir Provider bile\u015feni olu\u015fturun\nfunction TemaSaglayici({ children }) {\n  const [tema, setTema] = useState('light'); \/\/ 'light' veya 'dark'\n\n  const temaDegistir = () => {\n    setTema(prevTema => (prevTema === 'light' ? 'dark' : 'light'));\n  };\n\n  return (\n    \/\/ 'tema' de\u011ferini ve 'temaDegistir' fonksiyonunu alt bile\u015fenlere sa\u011flar\n    <TemaContext.Provider value={{ tema, temaDegistir }}>\n      {children}\n    <\/TemaContext.Provider>\n  );\n}\n\n\/\/ 3. Context'i kullanan bir bile\u015fen\nfunction AracCubugu() {\n  \/\/ useContext ile TemaContext'teki de\u011fere eri\u015f\n  const { tema, temaDegistir } = useContext(TemaContext);\n\n  return (\n    <div style={{ background: tema === 'light' ? '#eee' : '#333', color: tema === 'light' ? '#333' : '#eee', padding: '10px' }}>\n      <p>Mevcut Tema: {tema}<\/p>\n      <button onClick={temaDegistir}>Temay\u0131 De\u011fi\u015ftir<\/button>\n    <\/div>\n  );\n}\n\n\/\/ Uygulamay\u0131 birle\u015ftiren ana bile\u015fen\nfunction Uygulama() {\n  return (\n    <TemaSaglayici>\n      <AracCubugu \/>\n      <p style={{ textAlign: 'center', marginTop: '20px' }}>Bu da uygulama i\u00e7eri\u011fi.<\/p>\n    <\/TemaSaglayici>\n  );\n}\n\nexport default Uygulama;\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Bu \u00f6rnekte, <code>TemaContext<\/code> ad\u0131nda bir ba\u011flam olu\u015fturduk. <code>TemaSaglayici<\/code> bile\u015feni, bu ba\u011flam\u0131 kullanarak <code>tema<\/code> ve <code>temaDegistir<\/code> de\u011ferlerini t\u00fcm alt bile\u015fenlerine sa\u011flar. <code>AracCubugu<\/code> bile\u015feni ise, <code>useContext(TemaContext)<\/code> Hook'unu kullanarak bu de\u011ferlere do\u011frudan eri\u015fir. Bu sayede, <code>AracCubugu<\/code>'nun <code>tema<\/code> ve <code>temaDegistir<\/code>'e eri\u015febilmesi i\u00e7in ara bile\u015fenlere prop ge\u00e7i\u015fi yapmam\u0131za gerek kalmaz. <code>useContext<\/code>, \u00f6zellikle kimlik do\u011frulama durumu, dil tercihleri veya tema ayarlar\u0131 gibi global verilerin y\u00f6netimi i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h3>useRef() ile DOM'a Do\u011frudan Eri\u015fin veya De\u011ferleri Kal\u0131c\u0131 Olarak Saklay\u0131n<\/h3>\n<p><code>useRef<\/code> Hook'u, DOM elementlerine do\u011frudan referanslar olu\u015fturman\u0131z\u0131 veya render'lar aras\u0131nda de\u011fi\u015fmeyecek kal\u0131c\u0131 de\u011ferler saklaman\u0131z\u0131 sa\u011flar. S\u0131n\u0131f bile\u015fenlerindeki instance de\u011fi\u015fkenlerine (<code>this.myVariable<\/code>) benzer bir i\u015flev g\u00f6r\u00fcr ancak fonksiyonel bile\u015fenlerde daha Hooks dostu bir yoldur. <code>useRef<\/code>, geriye bir <code>.current<\/code> \u00f6zelli\u011fi olan bir nesne d\u00f6nd\u00fcr\u00fcr. Bu <code>.current<\/code> \u00f6zelli\u011fi, referans verilen DOM elementine veya saklanan de\u011fere eri\u015fmek i\u00e7in kullan\u0131l\u0131r. <code>useRef<\/code>'in de\u011feri g\u00fcncellendi\u011finde bile\u015fen yeniden render olmaz, bu da onu \u00f6zellikle performans a\u00e7\u0131s\u0131ndan hassas durumlarda veya UI g\u00fcncellemesi gerektirmeyen de\u011ferler i\u00e7in ideal hale getirir.<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\nimport React, { useRef } from 'react';\n\nfunction FokusGiris() {\n  const inputRef = useRef(null);\n\n  const giriseFokusla = () => {\n    \/\/ .current \u00f6zelli\u011fini kullanarak input elementine do\u011frudan eri\u015f\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div>\n      <input type=\"text\" ref={inputRef} \/>\n      <button onClick={giriseFokusla}>Giri\u015fe Fokusla<\/button>\n    <\/div>\n  );\n}\n\nexport default FokusGiris;\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Yukar\u0131daki \u00f6rnekte, bir input elementine <code>inputRef<\/code> ad\u0131nda bir referans atad\u0131k. Butona t\u0131kland\u0131\u011f\u0131nda, <code>giriseFokusla<\/code> fonksiyonu <code>inputRef.current.focus()<\/code> \u00e7a\u011fr\u0131s\u0131 ile input alan\u0131na do\u011frudan odaklan\u0131r. <code>useRef<\/code>, ayr\u0131ca zamanlay\u0131c\u0131 ID'leri veya di\u011fer referans de\u011ferleri gibi, bir bile\u015fenin ya\u015fam s\u00fcresi boyunca ayn\u0131 kalmas\u0131 gereken ancak render'lar\u0131 tetiklememesi gereken de\u011ferleri saklamak i\u00e7in de kullan\u0131labilir.<\/p>\n<h3>useMemo() ve useCallback() ile Performans\u0131 Art\u0131r\u0131n<\/h3>\n<p>React uygulamalar\u0131nda performans optimizasyonu kritik \u00f6neme sahiptir. \u00d6zellikle hesaplamas\u0131 pahal\u0131 fonksiyonlar\u0131n veya s\u0131k\u00e7a yeniden olu\u015fturulan fonksiyonlar\u0131n gereksiz yere \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131, uygulaman\u0131n yava\u015flamas\u0131na neden olabilir. \u0130\u015fte bu noktada <code>useMemo<\/code> ve <code>useCallback<\/code> Hook'lar\u0131 devreye girer. Bu iki Hook, \"memoization\" prensibini kullanarak, belirli de\u011ferlerin veya fonksiyonlar\u0131n yaln\u0131zca ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\u011finde yeniden hesaplanmas\u0131n\u0131 sa\u011flar.<\/p>\n<p><code>useMemo<\/code>, hesaplamas\u0131 maliyetli bir de\u011feri \u00f6nbelle\u011fe almak i\u00e7in kullan\u0131l\u0131r. Callback fonksiyonunuzun sonucunu bir sonraki render'da yeniden kullan\u0131r, bu sayede ayn\u0131 ba\u011f\u0131ml\u0131l\u0131klar i\u00e7in ayn\u0131 hesaplaman\u0131n tekrar yap\u0131lmas\u0131n\u0131 engeller. \u00d6zellikle b\u00fcy\u00fck listeleri filtreleme veya karma\u015f\u0131k veri d\u00f6n\u00fc\u015f\u00fcmleri gibi durumlarda performans\u0131 art\u0131rabilir.<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\nimport React, { useState, useMemo } from 'react';\n\nfunction HesaplamaComponenti() {\n  const [sayi, setSayi] = useState(0);\n  const [tekrar, setTekrar] = useState(0);\n\n  \/\/ Maliyetli bir hesaplama fonksiyonu\n  const pahaliHesaplama = (num) => {\n    console.log('Pahal\u0131 hesaplama \u00e7al\u0131\u015ft\u0131...');\n    let result = 0;\n    for (let i = 0; i < 1000000000; i++) {\n      result += num;\n    }\n    return result;\n  };\n\n  \/\/ useMemo ile pahal\u0131 hesaplamay\u0131 \u00f6nbelle\u011fe al\n  \/\/ Sadece 'sayi' de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015f\u0131r\n  const memoizeEdilmisDeger = useMemo(() => pahaliHesaplama(sayi), [sayi]);\n\n  return (\n    <div>\n      <p>Say\u0131: {sayi}<\/p>\n      <button onClick={() => setSayi(sayi + 1)}>Say\u0131y\u0131 Art\u0131r<\/button>\n      <p>Tekrar Say\u0131s\u0131: {tekrar}<\/p>\n      <button onClick={() => setTekrar(tekrar + 1)}>Tekrar\u0131 Art\u0131r<\/button>\n      <p>Hesaplanan De\u011fer (Sadece Say\u0131 De\u011fi\u015fti\u011finde Yeniden Hesapland\u0131): {memoizeEdilmisDeger}<\/p>\n    <\/div>\n  );\n}\n\nexport default HesaplamaComponenti;\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Bu \u00f6rnekte, <code>memoizeEdilmisDeger<\/code> yaln\u0131zca <code>sayi<\/code> state'i de\u011fi\u015fti\u011finde yeniden hesaplan\u0131r. <code>tekrar<\/code> state'i de\u011fi\u015fti\u011finde (ki bu da bile\u015feni yeniden render eder), <code>pahaliHesaplama<\/code> fonksiyonu gereksiz yere tekrar \u00e7al\u0131\u015fmaz, \u00e7\u00fcnk\u00fc <code>useMemo<\/code> \u00f6nceki sonucu kullan\u0131r.<\/p>\n<p><code>useCallback<\/code> ise, <code>useMemo<\/code>'ya benzer ancak bir de\u011feri de\u011fil, bir fonksiyonu \u00f6nbelle\u011fe al\u0131r. \u00d6zellikle alt bile\u015fenlere prop olarak ge\u00e7irilen fonksiyonlar\u0131n gereksiz yere yeniden olu\u015fturulmas\u0131n\u0131 engellemek i\u00e7in kullan\u0131l\u0131r. Bu, <code>React.memo<\/code> ile optimize edilmi\u015f alt bile\u015fenlerin gereksiz yere yeniden render olmas\u0131n\u0131 engeller, \u00e7\u00fcnk\u00fc fonksiyon referans\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece alt bile\u015fenler kendilerini g\u00fcncel olarak alg\u0131lamazlar.<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\nimport React, { useState, useCallback } from 'react';\n\n\/\/ Sadece prop'lar\u0131 de\u011fi\u015fti\u011finde render olan bir alt bile\u015fen\nconst ButonComponenti = React.memo(({ onClick, children }) => {\n  console.log('ButonComponenti render edildi:', children);\n  return <button onClick={onClick}>{children}<\/button>;\n});\n\nfunction ParentComponent() {\n  const [sayac, setSayac] = useState(0);\n  const [inputDegeri, setInputDegeri] = useState('');\n\n  \/\/ Sadece sayac de\u011fi\u015fti\u011finde yeniden olu\u015fturulacak fonksiyon\n  const handleTiklama = useCallback(() => {\n    setSayac(prevSayac => prevSayac + 1);\n  }, []); \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi bo\u015f, bu fonksiyon ilk render'da bir kez olu\u015fturulur\n\n  return (\n    <div>\n      <input\n        type=\"text\"\n        value={inputDegeri}\n        onChange={(e) => setInputDegeri(e.target.value)}\n        placeholder=\"Bir \u015feyler yaz\u0131n...\"\n      \/>\n      <p>Saya\u00e7: {sayac}<\/p>\n      {\/* inputDegeri de\u011fi\u015fse bile ButonComponenti yeniden render olmaz\n          \u00e7\u00fcnk\u00fc handleTiklama fonksiyon referans\u0131 de\u011fi\u015fmiyor *\/}\n      <ButonComponenti onClick={handleTiklama}>Sayac\u0131 Artt\u0131r<\/ButonComponenti>\n    <\/div>\n  );\n}\n\nexport default ParentComponent;\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Bu \u00f6rnekte, <code>ButonComponenti<\/code>, <code>React.memo<\/code> ile optimize edildi\u011fi i\u00e7in yaln\u0131zca prop'lar\u0131 de\u011fi\u015fti\u011finde yeniden render olur. <code>handleTiklama<\/code> fonksiyonunu <code>useCallback<\/code> ile sarmalad\u0131\u011f\u0131m\u0131z i\u00e7in, <code>inputDegeri<\/code> state'i de\u011fi\u015fti\u011finde (ParentComponent yeniden render oldu\u011funda bile) <code>handleTiklama<\/code> fonksiyonunun referans\u0131 ayn\u0131 kal\u0131r. Bu da <code>ButonComponenti<\/code>'nin gereksiz yere yeniden render olmas\u0131n\u0131 engeller, b\u00f6ylece performans art\u0131\u015f\u0131 sa\u011flan\u0131r. Bu Hook'lar, React uygulamalar\u0131n\u0131z\u0131n daha \u00f6l\u00e7eklenebilir ve daha performansl\u0131 olmas\u0131na yard\u0131mc\u0131 olur, ancak yaln\u0131zca ger\u00e7ekten ihtiya\u00e7 duyuldu\u011funda kullan\u0131lmalar\u0131 gerekti\u011fini unutmamak \u00f6nemlidir. A\u015f\u0131r\u0131 kullan\u0131m, bazen gereksiz karma\u015f\u0131kl\u0131\u011fa yol a\u00e7abilir.<\/p>\n<h2>Kendi \u00d6zel Hook'lar\u0131n\u0131z\u0131 Yazmak: Tekrar Kullan\u0131labilir Mant\u0131k Nas\u0131l Olu\u015fturulur?<\/h2>\n<p>React Hooks'un en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, kendi \u00f6zel Hook'lar\u0131n\u0131z\u0131 (Custom Hooks) yazabilme yetene\u011fidir. \u00d6zel Hook'lar, bile\u015fenler aras\u0131nda tekrar kullan\u0131labilir durumu (stateful logic) soyutlaman\u0131za ve payla\u015fman\u0131za olanak tan\u0131yan JavaScript fonksiyonlar\u0131d\u0131r. Bu, uygulaman\u0131zdaki kod tekrar\u0131n\u0131 azaltman\u0131n, bile\u015fen mant\u0131\u011f\u0131n\u0131 daha mod\u00fcler hale getirmenin ve kod taban\u0131n\u0131z\u0131n bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131rman\u0131n harika bir yoludur. Temel olarak, bir \u00f6zel Hook, di\u011fer Hook'lar\u0131 (<code>useState<\/code>, <code>useEffect<\/code>, <code>useContext<\/code> vb.) i\u00e7inde \u00e7a\u011f\u0131ran ve belirli bir i\u015flevselli\u011fi kaps\u00fclleyen bir fonksiyondur.<\/p>\n<h3>\u00d6zel Hook Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h3>\n<p>\u00d6zel Hook'lar, \"use\" \u00f6nekiyle ba\u015flayan (\u00f6rne\u011fin, <code>useFenomenalVeriCekme<\/code> veya <code>useToggle<\/code> gibi) ve tipik olarak di\u011fer React Hook'lar\u0131n\u0131 \u00e7a\u011f\u0131ran fonksiyonlard\u0131r. Kendi durumunu, yan etkilerini ve di\u011fer Hook'lar\u0131n yeteneklerini kendi i\u00e7inde bar\u0131nd\u0131rabilir. Bir \u00f6zel Hook'u kullanman\u0131z\u0131n ba\u015fl\u0131ca nedenleri \u015funlard\u0131r:<\/p>\n<ol>\n<li><strong>Mant\u0131k Tekrar\u0131n\u0131 Azaltma:<\/strong> Birden fazla bile\u015fende ayn\u0131 veya benzer mant\u0131\u011f\u0131 kullanman\u0131z gerekti\u011finde, bu mant\u0131\u011f\u0131 bir \u00f6zel Hook i\u00e7inde kaps\u00fclleyerek kod tekrar\u0131n\u0131 \u00f6nlersiniz.<\/li>\n<li><strong>Daha Temiz Bile\u015fenler:<\/strong> \u00d6zel Hook'lar sayesinde bile\u015fenlerinizdeki mant\u0131k daha sade hale gelir, sadece UI'\u0131 render etme sorumlulu\u011funu ta\u015f\u0131r. \u0130\u015f mant\u0131\u011f\u0131, \u00f6zel Hook i\u00e7inde soyutlan\u0131r.<\/li>\n<li><strong>Kolay Test Edilebilirlik:<\/strong> Kaps\u00fcllenmi\u015f mant\u0131k, ayr\u0131 bir fonksiyon oldu\u011fu i\u00e7in test edilmesi daha kolayd\u0131r.<\/li>\n<li><strong>Bak\u0131m Kolayl\u0131\u011f\u0131:<\/strong> Bir mant\u0131kta de\u011fi\u015fiklik yapman\u0131z gerekti\u011finde, bunu sadece \u00f6zel Hook i\u00e7inde yapman\u0131z yeterli olur ve bu de\u011fi\u015fiklik Hook'u kullanan t\u00fcm bile\u015fenlere yay\u0131l\u0131r.<\/li>\n<\/ol>\n<h3>Basit Bir \u00d6zel Hook Olu\u015fturma: useToggle \u00d6rne\u011fi<\/h3>\n<p>\u015eimdi, boolean bir de\u011feri a\u00e7\u0131p kapatmak i\u00e7in kullanabilece\u011fimiz basit bir <code>useToggle<\/code> Hook'u olu\u015ftural\u0131m. Bu Hook, bir a\u00e7ma\/kapama durumunu ve bu durumu de\u011fi\u015ftirecek bir fonksiyonu d\u00f6nd\u00fcrecektir.<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\nimport React, { useState, useCallback } from 'react';\n\n\/\/ \u00d6zel Hook tan\u0131m\u0131: useToggle\nfunction useToggle(initialValue = false) {\n  const [value, setValue] = useState(initialValue);\n\n  \/\/ De\u011feri tersine \u00e7evirecek fonksiyonu useCallback ile memoize et\n  \/\/ Bu sayede, bu fonksiyon referans\u0131 her render'da de\u011fi\u015fmez\n  const toggle = useCallback(() => {\n    setValue(prevValue => !prevValue);\n  }, []); \/\/ Ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fmedi\u011fi s\u00fcrece referans\u0131 ayn\u0131 kal\u0131r\n\n  return [value, toggle];\n}\n\n\/\/ \u00d6zel Hook'u kullanan bir bile\u015fen \u00f6rne\u011fi\nfunction GorunurlukKontrol() {\n  const [isVisible, toggleVisibility] = useToggle(true); \/\/ Ba\u015flang\u0131\u00e7 de\u011feri true\n\n  return (\n    <div>\n      <button onClick={toggleVisibility}>\n        {isVisible ? 'Gizle' : 'G\u00f6ster'}\n      <\/button>\n      {isVisible && <p>Bu metin \u015fimdi g\u00f6r\u00fcn\u00fcyor!<\/p>}\n    <\/div>\n  );\n}\n\nexport default GorunurlukKontrol;\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Bu \u00f6rnekte, <code>useToggle<\/code> fonksiyonu, i\u00e7inde <code>useState<\/code> Hook'unu kullanarak bir <code>value<\/code> ve <code>setValue<\/code> d\u00f6nd\u00fcr\u00fcr. Ayr\u0131ca, <code>toggle<\/code> fonksiyonunu <code>useCallback<\/code> ile sarmalayarak, <code>toggle<\/code> fonksiyon referans\u0131n\u0131n bile\u015fenin her render'\u0131nda de\u011fi\u015fmesini engelledik. Bu, performans optimizasyonu a\u00e7\u0131s\u0131ndan \u00f6nemli bir yakla\u015f\u0131md\u0131r, \u00f6zellikle <code>toggle<\/code> fonksiyonunu alt bile\u015fenlere prop olarak ge\u00e7iriyorsan\u0131z. <code>GorunurlukKontrol<\/code> bile\u015feni, <code>useToggle<\/code> Hook'unu \u00e7a\u011f\u0131rarak <code>isVisible<\/code> durumuna ve <code>toggleVisibility<\/code> fonksiyonuna kolayca eri\u015fir. Bu sayede, a\u00e7ma\/kapama mant\u0131\u011f\u0131 bile\u015fenin kendisinden soyutlanm\u0131\u015f ve tekrar kullan\u0131labilir hale gelmi\u015ftir.<\/p>\n<h3>Daha Karma\u015f\u0131k Bir \u00d6zel Hook: useFormInput \u00d6rne\u011fi<\/h3>\n<p>Form giri\u015flerini y\u00f6netmek de \u00f6zel Hook'lar i\u00e7in s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir senaryodur. Bir giri\u015f alan\u0131n\u0131n de\u011ferini ve de\u011fi\u015fim olay\u0131n\u0131 y\u00f6neten bir <code>useFormInput<\/code> Hook'u olu\u015ftural\u0131m:<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\nimport React, { useState } from 'react';\n\n\/\/ \u00d6zel Hook tan\u0131m\u0131: useFormInput\nfunction useFormInput(initialValue) {\n  const [value, setValue] = useState(initialValue);\n\n  const handleChange = (e) => {\n    setValue(e.target.value);\n  };\n\n  \/\/ Hem de\u011feri hem de onChange prop'unu d\u00f6nd\u00fcr\u00fcyoruz\n  return {\n    value,\n    onChange: handleChange,\n  };\n}\n\n\/\/ \u00d6zel Hook'u kullanan bir bile\u015fen \u00f6rne\u011fi\nfunction KullaniciFormu() {\n  const isim = useFormInput('Jane');\n  const soyisim = useFormInput('Doe');\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    alert(<code>Ho\u015f Geldiniz, ${isim.value} ${soyisim.value}!<\/code>);\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <label>\n        Ad:\n        <input type=\"text\" {...isim} \/> {\/* spread operat\u00f6r\u00fc ile value ve onChange'i aktar *\/}\n      <\/label>\n      <br \/>\n      <label>\n        Soyad:\n        <input type=\"text\" {...soyisim} \/>\n      <\/label>\n      <br \/>\n      <button type=\"submit\">G\u00f6nder<\/button>\n      <p>Giri\u015fler: {isim.value} {soyisim.value}<\/p>\n    <\/form>\n  );\n}\n\nexport default KullaniciFormu;\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Bu <code>useFormInput<\/code> Hook'u, her bir form giri\u015fi i\u00e7in ayr\u0131 ayr\u0131 <code>useState<\/code> ve <code>handleChange<\/code> fonksiyonlar\u0131n\u0131 tan\u0131mlama ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r. <code>KullaniciFormu<\/code> bile\u015feni, bu Hook'u birden \u00e7ok kez \u00e7a\u011f\u0131rarak farkl\u0131 giri\u015f alanlar\u0131n\u0131 y\u00f6netebilir ve kod tekrar\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. <code>{...isim}<\/code> spread operat\u00f6r\u00fc sayesinde, input elementine hem <code>value<\/code> hem de <code>onChange<\/code> prop'lar\u0131 otomatik olarak aktar\u0131l\u0131r, bu da kodun daha temiz ve okunabilir olmas\u0131n\u0131 sa\u011flar. \u00d6zellikle b\u00fcy\u00fck formlarla \u00e7al\u0131\u015f\u0131rken bu t\u00fcr bir \u00f6zel Hook, geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131rabilir ve hata yapma olas\u0131l\u0131\u011f\u0131n\u0131z\u0131 azaltabilir.<\/p>\n<div class=\"expert-tip\">\n      Uzman \u0130pucu: \u00d6zel Hook'lar\u0131n\u0131z\u0131 tasarlarken, ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 do\u011fru bir \u015fekilde tan\u0131mlamak \u00f6nemlidir. Ba\u011f\u0131ml\u0131l\u0131k dizilerini bo\u015f b\u0131rakmak veya gereksiz de\u011ferler eklemek, Hook'unuzun beklenen \u015fekilde \u00e7al\u0131\u015fmamas\u0131na veya gereksiz yeniden hesaplamalara yol a\u00e7abilir. Her zaman Hook'unuzun i\u00e7inde kullan\u0131lan t\u00fcm d\u0131\u015f de\u011fi\u015fkenleri (prop'lar, state de\u011ferleri, di\u011fer Hook'lardan gelen fonksiyonlar) ba\u011f\u0131ml\u0131l\u0131k dizisine ekledi\u011finizden emin olun.\n    <\/div>\n<p>\u00d6zel Hook'lar, React geli\u015ftirme d\u00fcnyas\u0131nda g\u00fc\u00e7l\u00fc bir soyutlama arac\u0131d\u0131r. Kendi \u00f6zel Hook'lar\u0131n\u0131z\u0131 olu\u015fturarak, uygulaman\u0131z\u0131n farkl\u0131 yerlerinde kullan\u0131labilecek genel ve yeniden kullan\u0131labilir mant\u0131k par\u00e7alar\u0131 in\u015fa edebilirsiniz. Bu, React bile\u015fenlerinizi daha okunabilir, bak\u0131m\u0131 daha kolay ve daha verimli hale getirmenin anahtar\u0131d\u0131r.<\/p>\n<h2>\u0130leri D\u00fczey \u0130pu\u00e7lar\u0131: Performans Optimizasyonu ve Daha Fazlas\u0131<\/h2>\n<p>React Hooks'u kullanmaya ba\u015flad\u0131\u011f\u0131n\u0131zda, uygulaman\u0131z\u0131n performans\u0131n\u0131 daha da optimize etmek ve geli\u015ftirme deneyiminizi zenginle\u015ftirmek i\u00e7in baz\u0131 ileri d\u00fczey ipu\u00e7lar\u0131n\u0131 ve teknikleri bilmek faydal\u0131 olacakt\u0131r. Bu ipu\u00e7lar\u0131, daha b\u00fcy\u00fck ve karma\u015f\u0131k React uygulamalar\u0131nda ortaya \u00e7\u0131kabilecek sorunlar\u0131 \u00f6ng\u00f6rmenize ve \u00e7\u00f6zmenize yard\u0131mc\u0131 olabilir.<\/p>\n<h3>1. useMemo ve useCallback'i Ak\u0131ll\u0131ca Kullan\u0131n<\/h3>\n<p>Yukar\u0131da bahsetti\u011fimiz <code>useMemo<\/code> ve <code>useCallback<\/code>, performans optimizasyonu i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. Ancak, her yerde ve her zaman kullan\u0131lmalar\u0131 gerekti\u011fi anlam\u0131na gelmez. Gereksiz yere bu Hook'lar\u0131 kullanmak, kodunuzu daha karma\u015f\u0131k hale getirebilir ve memoization'\u0131n (\u00f6nbelle\u011fe alma) getirdi\u011fi faydadan daha fazla maliyet yaratabilir. Ne zaman kullanmal\u0131s\u0131n\u0131z?<\/p>\n<ul>\n<li><strong>Maliyetli Hesaplamalar:<\/strong> Bir fonksiyonun sonucu pahal\u0131 bir i\u015flemden ge\u00e7iyorsa ve bu i\u015flem her render'da tekrarlan\u0131yorsa <code>useMemo<\/code> kullan\u0131n.<\/li>\n<li><strong>Referans E\u015fitli\u011fi Gerektiren Durumlar:<\/strong> Bir fonksiyonu veya nesneyi <code>React.memo<\/code> ile sarmalanm\u0131\u015f alt bile\u015fenlere prop olarak ge\u00e7iriyorsan\u0131z, gereksiz yeniden render'lar\u0131 \u00f6nlemek i\u00e7in <code>useCallback<\/code> veya <code>useMemo<\/code> kullan\u0131n. Aksi takdirde, fonksiyon referans\u0131 her render'da de\u011fi\u015fece\u011fi i\u00e7in alt bile\u015fenler her zaman yeniden render olacakt\u0131r.<\/li>\n<li><strong><code>useEffect<\/code> Ba\u011f\u0131ml\u0131l\u0131klar\u0131:<\/strong> <code>useEffect<\/code> Hook'unun ba\u011f\u0131ml\u0131l\u0131k dizisinde bir fonksiyon veya nesne kullan\u0131yorsan\u0131z, o fonksiyonu <code>useCallback<\/code> ile veya nesneyi <code>useMemo<\/code> ile sarmalayarak gereksiz <code>useEffect<\/code> \u00e7al\u0131\u015ft\u0131rmalar\u0131n\u0131 engelleyebilirsiniz.<\/li>\n<\/ul>\n<div class=\"expert-tip\">\n      Unutmay\u0131n: \u00c7o\u011fu durumda, k\u00fc\u00e7\u00fck bir fonksiyonun veya de\u011fi\u015fkenin memoize edilmesi, React'in varsay\u0131lan h\u0131zl\u0131 diffing algoritmas\u0131ndan daha fazla fayda sa\u011flamayabilir. \u00d6nce performans sorununu tespit edin, sonra optimize edin.\n    <\/div>\n<h3>2. useReducer ile Karma\u015f\u0131k Durumlar\u0131 Y\u00f6netme<\/h3>\n<p><code>useState<\/code>, basit durum y\u00f6netimi i\u00e7in harika olsa da, e\u011fer durumunuz \u00e7ok say\u0131da alt de\u011fer i\u00e7eriyorsa veya bir sonraki durum, \u00f6nceki duruma ba\u011fl\u0131 olarak karma\u015f\u0131k mant\u0131kla hesaplan\u0131yorsa, <code>useReducer<\/code> Hook'u daha uygun bir alternatif olabilir. <code>useReducer<\/code>, Redux gibi bir durum y\u00f6netim k\u00fct\u00fcphanesinin temelindeki reducer desenini React'e ta\u015f\u0131r. Size bir durum nesnesi ve bir <code>dispatch<\/code> fonksiyonu d\u00f6nd\u00fcr\u00fcr. <code>dispatch<\/code> fonksiyonunu \u00e7a\u011f\u0131rarak \"eylemler\" g\u00f6nderirsiniz ve bu eylemler, durumun nas\u0131l g\u00fcncellenece\u011fini belirleyen bir reducer fonksiyonu taraf\u0131ndan i\u015flenir.<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\nimport React, { useReducer } from 'react';\n\n\/\/ Reducer fonksiyonu: durum ve eylemi al\u0131r, yeni durumu d\u00f6nd\u00fcr\u00fcr\nconst sayacReducer = (state, action) => {\n  switch (action.type) {\n    case 'ARTTIR':\n      return { count: state.count + 1 };\n    case 'AZALT':\n      return { count: state.count - 1 };\n    case 'SIFIRLA':\n      return { count: 0 };\n    default:\n      return state;\n  }\n};\n\nfunction SayacReducer() {\n  \/\/ useReducer Hook'u: reducer, ba\u015flang\u0131\u00e7 durumu\n  const [state, dispatch] = useReducer(sayacReducer, { count: 0 });\n\n  return (\n    <div>\n      <p>Say\u0131: {state.count}<\/p>\n      <button onClick={() => dispatch({ type: 'ARTTIR' })}>Artt\u0131r<\/button>\n      <button onClick={() => dispatch({ type: 'AZALT' })}>Azalt<\/button>\n      <button onClick={() => dispatch({ type: 'SIFIRLA' })}>S\u0131f\u0131rla<\/button>\n    <\/div>\n  );\n}\n\nexport default SayacReducer;\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p><code>useReducer<\/code>, \u00f6zellikle durum g\u00fcncellemelerinin ard\u0131\u015f\u0131k olmas\u0131 veya birden fazla durum de\u011ferinin birbiriyle ili\u015fkili olmas\u0131 gereken durumlarda kodunuzu daha organize ve test edilebilir hale getirir. Bu, ayn\u0131 zamanda, <code>useContext<\/code> ile birle\u015ftirildi\u011finde global durum y\u00f6netimi i\u00e7in de g\u00fc\u00e7l\u00fc bir model sunar.<\/p>\n<h3>3. Kendi \u00d6zel Hook'lar\u0131n\u0131zda Global Durum ve Yan Etki Y\u00f6netimi<\/h3>\n<p>\u00d6zel Hook'lar, basit mant\u0131klar\u0131 soyutlaman\u0131n yan\u0131 s\u0131ra, daha karma\u015f\u0131k durum ve yan etki y\u00f6netimi desenlerini de kaps\u00fclleyebilir. \u00d6rne\u011fin, bir veri \u00e7ekme (data fetching) mant\u0131\u011f\u0131n\u0131 tamam\u0131yla bir \u00f6zel Hook i\u00e7inde saklayabilirsiniz. Bu Hook, y\u00fckleme durumu (loading state), hata durumu (error state) ve \u00e7ekilen veri (data) gibi t\u00fcm ilgili durumlar\u0131 kendi i\u00e7inde y\u00f6netebilir. Ayr\u0131ca, bu Hook'lar, <code>useContext<\/code> ile birle\u015ferek uygulaman\u0131z\u0131n farkl\u0131 yerlerinde global olarak kullan\u0131labilecek durum ve eylemleri sa\u011flayabilir. Bu sayede, uygulaman\u0131z\u0131n her yerinde ayn\u0131 veri \u00e7ekme davran\u0131\u015f\u0131n\u0131 veya ayarlar\u0131 tutarl\u0131 bir \u015fekilde kullanabilirsiniz.<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-jsx\">\n\/\/ useFetch.js\nimport { useState, useEffect } from 'react';\n\nfunction useFetch(url) {\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(url);\n        if (!response.ok) {\n          throw new Error(<code>HTTP Hata: ${response.status}<\/code>);\n        }\n        const json = await response.json();\n        setData(json);\n      } catch (e) {\n        setError(e);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchData();\n  }, [url]); \/\/ URL de\u011fi\u015fti\u011finde yeniden veri \u00e7ek\n\n  return { data, loading, error };\n}\n\nexport default useFetch;\n\n\/\/ Uygulama i\u00e7inde kullan\u0131m\u0131\n\/\/ import useFetch from '.\/useFetch';\n\/\/ function PostList() {\n\/\/   const { data: posts, loading, error } = useFetch('https:\/\/jsonplaceholder.typicode.com\/posts');\n\n\/\/   if (loading) return <p>G\u00f6nderiler y\u00fckleniyor...<\/p>;\n\/\/   if (error) return <p>Hata: {error.message}<\/p>;\n\n\/\/   return (\n\/\/     <ul>\n\/\/       {posts.map(post => (\n\/\/         <li key={post.id}>{post.title}<\/li>\n\/\/       ))}\n\/\/     <\/ul>\n\/\/   );\n\/\/ }\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Yukar\u0131daki <code>useFetch<\/code> \u00f6zel Hook'u, herhangi bir URL'den veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 soyutlar. Bu Hook'u, uygulaman\u0131zdaki herhangi bir bile\u015fende kullanarak veri \u00e7ekme i\u015flemini kolayca ger\u00e7ekle\u015ftirebilirsiniz. Bu, hem kod tekrar\u0131n\u0131 azalt\u0131r hem de veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 merkezile\u015ftirerek daha tutarl\u0131 bir hata y\u00f6netimi ve y\u00fckleme durumu g\u00f6sterimi sa\u011flar.<\/p>\n<h3>4. CSS ve Mobil Uyumluluk \u0130pu\u00e7lar\u0131<\/h3>\n<p>React Hooks do\u011frudan CSS ile ilgili olmasa da, modern React uygulamalar\u0131n\u0131n mobil uyumlu olmas\u0131 esast\u0131r. React ile geli\u015ftirme yaparken, stil verme y\u00f6ntemleri aras\u0131nda CSS mod\u00fclleri, Styled Components veya Tailwind CSS gibi k\u00fct\u00fcphaneler pop\u00fclerdir. Ancak, temel prensip olan medya sorgular\u0131 (media queries) ve esnek layout'lar her zaman ge\u00e7erlidir. \u00d6rne\u011fin, CSS'inizde \u015fu \u015fekilde bir medya sorgusu kullanarak farkl\u0131 ekran boyutlar\u0131na g\u00f6re d\u00fczeninizi ayarlayabilirsiniz:<\/p>\n<div class=\"code-example\">\n<pre><code class=\"language-css\">\n.container {\n  padding: 20px;\n  max-width: 960px;\n  margin: 0 auto;\n}\n\n@media (max-width: 768px) {\n  .container {\n    padding: 15px;\n  }\n  .sidebar {\n    display: none; \/* K\u00fc\u00e7\u00fck ekranlarda sidebar'\u0131 gizle *\/\n  }\n  .main-content {\n    width: 100%; \/* Ana i\u00e7eri\u011fi tam geni\u015flik yap *\/\n  }\n}\n\n@media (max-width: 480px) {\n  .button {\n    font-size: 14px;\n    padding: 8px 12px;\n  }\n}\n    <\/pre>\n<p><\/code>\n    <\/div>\n<p>Hooks'un getirdi\u011fi mod\u00fcler yap\u0131 sayesinde, belirli bir bile\u015fenin mobil davran\u0131\u015f\u0131n\u0131 y\u00f6neten Hook'lar bile yazabilirsiniz. \u00d6rne\u011fin, <code>useWindowSize<\/code> gibi bir \u00f6zel Hook, pencere boyutunu izleyebilir ve bile\u015fenlerinizin bu boyutlara g\u00f6re dinamik olarak stil veya d\u00fczen de\u011fi\u015ftirmesini sa\u011flayabilir. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftiren ve uygulaman\u0131z\u0131 farkl\u0131 cihazlarda daha eri\u015filebilir k\u0131lan \u00f6nemli bir yakla\u015f\u0131md\u0131r. Sonu\u00e7 olarak, bu ileri d\u00fczey ipu\u00e7lar\u0131 ve teknikler, React Hooks ile geli\u015ftirdi\u011finiz uygulamalar\u0131n sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda performansl\u0131, bak\u0131m\u0131 kolay ve kullan\u0131c\u0131 dostu olmas\u0131n\u0131 sa\u011flayacakt\u0131r. Hooks, modern web geli\u015ftirme ihtiya\u00e7lar\u0131na yan\u0131t veren g\u00fc\u00e7l\u00fc ve esnek bir ara\u00e7 setidir.<\/p>\n<h2>Sonu\u00e7: React Hooks Gelece\u011fi ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>React Hooks, React geli\u015ftirme paradigmas\u0131n\u0131 k\u00f6kten de\u011fi\u015ftiren, daha temiz, daha i\u015flevsel ve daha esnek kod yazmam\u0131z\u0131 sa\u011flayan devrim niteli\u011finde bir \u00f6zelliktir. Bu makale boyunca, Hooks'un temel prensiplerinden ba\u015flayarak (<code>useState<\/code> ve <code>useEffect<\/code>), ger\u00e7ek d\u00fcnya uygulamalar\u0131na (To-Do listesi), daha geli\u015fmi\u015f Hook'lara (<code>useContext<\/code>, <code>useRef<\/code>, <code>useMemo<\/code>) ve kendi \u00f6zel Hook'lar\u0131n\u0131z\u0131 olu\u015fturman\u0131n g\u00fcc\u00fcne kadar geni\u015f bir yelpazeyi ele ald\u0131k. G\u00f6rd\u00fck ki Hooks, s\u0131n\u0131f bile\u015fenlerinin getirdi\u011fi karma\u015fay\u0131 (<code>this<\/code> ba\u011flama, ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131n da\u011f\u0131lmas\u0131) ortadan kald\u0131rarak, fonksiyonel programlaman\u0131n sade ve g\u00fc\u00e7l\u00fc y\u00f6nlerini React'e entegre ediyor. Bu sayede, bile\u015fen mant\u0131\u011f\u0131n\u0131 daha kolay anla\u015f\u0131l\u0131r ve test edilebilir bir \u015fekilde soyutlayabiliyoruz.<\/p>\n<p>\u00d6zellikle <code>useEffect<\/code>'in getirdi\u011fi yan etki y\u00f6netimindeki iyile\u015fmeler, s\u0131n\u0131f bile\u015fenlerindeki ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131n kar\u0131\u015f\u0131k do\u011fas\u0131na bir \u00e7\u00f6z\u00fcm sunuyor. Art\u0131k ilgili mant\u0131klar\u0131 bir arada tutarak kodun daha d\u00fczenli olmas\u0131n\u0131 sa\u011fl\u0131yoruz. \u00d6zel Hook'lar ise, tekrar kullan\u0131labilir mant\u0131k par\u00e7alar\u0131 olu\u015fturman\u0131n ve kod tekrar\u0131n\u0131 azaltman\u0131n anahtar\u0131d\u0131r; bu da b\u00fcy\u00fck ve \u00f6l\u00e7eklenebilir uygulamalar i\u00e7in vazge\u00e7ilmez bir \u00f6zelliktir. React toplulu\u011fu, Hooks'u h\u0131zla benimsemi\u015f ve \u00e7evresinde zengin bir ekosistem geli\u015ftirmi\u015ftir, bu da Hooks'un uzun vadeli gelece\u011finin parlak oldu\u011funu g\u00f6stermektedir. React'in gelecekteki yenilikleri (\u00f6rne\u011fin Concurrent Mode ve Suspense) Hooks ile daha da uyumlu hale gelecektir, bu da Hooks'un \u00f6nemini daha da art\u0131racakt\u0131r.<\/p>\n<p>\u00d6zetle, React Hooks, sadece bir \"\u00f6zellik\" olman\u0131n \u00f6tesinde, React'in gelecekteki geli\u015fim y\u00f6n\u00fcn\u00fc \u015fekillendiren temel bir paradigmad\u0131r. Onlar\u0131 anlamak ve etkili bir \u015fekilde kullanmak, her React geli\u015ftiricisi i\u00e7in modern uygulamalar in\u015fa etmenin olmazsa olmaz bir par\u00e7as\u0131 haline gelmi\u015ftir. Bu ara\u00e7lar\u0131 ustal\u0131kla kullanarak, daha h\u0131zl\u0131, daha g\u00fcvenilir ve bak\u0131m\u0131 daha kolay web uygulamalar\u0131 geli\u015ftirebilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<ul>\n<li>\n        <strong>S: React Hooks'u mevcut s\u0131n\u0131f bile\u015fenleriyle birlikte kullanabilir miyim?<\/strong><\/p>\n<p>C: Evet, kesinlikle! React Hooks'u mevcut s\u0131n\u0131f bile\u015fenleriyle ayn\u0131 projede sorunsuz bir \u015fekilde kullanabilirsiniz. React ekibi, Hooks'u ad\u0131m ad\u0131m ge\u00e7i\u015fi kolayla\u015ft\u0131rmak i\u00e7in tasarlad\u0131. Bir s\u0131n\u0131f bile\u015fenini tamamen fonksiyonel bir bile\u015fene d\u00f6n\u00fc\u015ft\u00fcrmek zorunda de\u011filsiniz. Yeni \u00f6zellikler veya bile\u015fenler eklerken Hooks'u kullanmaya ba\u015flayabilir, zamanla eski s\u0131n\u0131f bile\u015fenlerinizi d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz.<\/p>\n<\/li>\n<li>\n        <strong>S: Hangi Hook'u ne zaman kullanmal\u0131y\u0131m?<\/strong><\/p>\n<p>C: Temelde:<\/p>\n<ul>\n<li><code>useState<\/code>: Basit, yerel durumlar\u0131 (string, number, boolean, array, object) y\u00f6netmek i\u00e7in.<\/li>\n<li><code>useEffect<\/code>: Yan etkileri (veri \u00e7ekme, DOM manip\u00fclasyonu, olay dinleyicileri, abonelikler, zamanlay\u0131c\u0131lar) y\u00f6netmek i\u00e7in. Ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131 (mount, update, unmount) sim\u00fcle eder.<\/li>\n<li><code>useContext<\/code>: Prop drilling'i \u00f6nlemek ve global verilere (tema, kullan\u0131c\u0131 bilgisi) kolayca eri\u015fmek i\u00e7in.<\/li>\n<li><code>useRef<\/code>: DOM elementlerine do\u011frudan eri\u015fmek veya render'lar aras\u0131nda de\u011fi\u015fmeyecek kal\u0131c\u0131 de\u011ferler saklamak i\u00e7in.<\/li>\n<li><code>useMemo<\/code> ve <code>useCallback<\/code>: Performans optimizasyonu i\u00e7in, pahal\u0131 hesaplamalar\u0131 (<code>useMemo<\/code>) veya fonksiyon referanslar\u0131n\u0131 (<code>useCallback<\/code>) \u00f6nbelle\u011fe almak i\u00e7in.<\/li>\n<li><code>useReducer<\/code>: Karma\u015f\u0131k durum mant\u0131\u011f\u0131n\u0131 y\u00f6netmek veya Redux benzeri bir desenle \u00e7al\u0131\u015fmak i\u00e7in.<\/li>\n<li>Kendi \u00d6zel Hook'lar\u0131n\u0131z: Tekrar kullan\u0131labilir mant\u0131klar\u0131 (veri \u00e7ekme, form y\u00f6netimi, pencere boyutu izleme vb.) soyutlamak ve payla\u015fmak i\u00e7in.<\/li>\n<\/ul>\n<\/li>\n<li>\n        <strong>S: Hooks'u kullan\u0131rken dikkat etmem gereken temel kurallar nelerdir?<\/strong><\/p>\n<p>C: React Hooks'un iki ana kural\u0131 vard\u0131r:<\/p>\n<ol>\n<li><strong>Sadece React Fonksiyonlar\u0131n\u0131n En \u00dcst Seviyesinde \u00c7a\u011f\u0131r\u0131n:<\/strong> Hooks'u d\u00f6ng\u00fclerin, ko\u015fullar\u0131n veya i\u00e7 i\u00e7e fonksiyonlar\u0131n i\u00e7inde \u00e7a\u011f\u0131rmay\u0131n. Her zaman bir React fonksiyon bile\u015feninin veya \u00f6zel bir Hook'un en \u00fcst seviyesinde \u00e7a\u011f\u0131r\u0131n. Bu, React'in Hook'lar\u0131 do\u011fru s\u0131rada izlemesini sa\u011flar.<\/li>\n<li><strong>Sadece React Fonksiyonlar\u0131ndan \u00c7a\u011f\u0131r\u0131n:<\/strong> Hooks'u sadece fonksiyonel React bile\u015fenlerinden veya di\u011fer \u00f6zel Hook'lardan \u00e7a\u011f\u0131rabilirsiniz. S\u0131radan JavaScript fonksiyonlar\u0131ndan Hooks'u \u00e7a\u011f\u0131ramazs\u0131n\u0131z.<\/li>\n<\/ol>\n<p>        Bu kurallar, Hooks'un tutarl\u0131 bir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 ve React'in bile\u015fenlerinizin durumunu do\u011fru bir \u015fekilde y\u00f6netmesini sa\u011flamak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<\/li>\n<li>\n        <strong>S: Hooks s\u0131n\u0131f bile\u015fenlerinin yerini tamamen alacak m\u0131?<\/strong><\/p>\n<p>C: React ekibi, s\u0131n\u0131f bile\u015fenlerini React'ten kald\u0131rma planlar\u0131 olmad\u0131\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a belirtmi\u015ftir. Mevcut s\u0131n\u0131f bile\u015fenleri \u00e7al\u0131\u015fmaya devam edecek ve bak\u0131mlar\u0131 yap\u0131lacakt\u0131r. Ancak, yeni projelerde veya mevcut projelerde yeni \u00f6zellikler geli\u015ftirirken fonksiyonel bile\u015fenler ve Hooks kullanmak, React'in \u00f6nerilen yoludur. Hooks, React'in gelece\u011fi i\u00e7in tasarlanm\u0131\u015f bir yakla\u015f\u0131m oldu\u011fundan, yeni geli\u015ftiricilerin bu paradigmay\u0131 benimsemesi \u00f6nemlidir.<\/p>\n<\/li>\n<\/ul>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React geli\u015ftiricileri i\u00e7in bile zaman zaman karma\u015f\u0131kla\u015fabilen durum y\u00f6netimi ve bile\u015fen mant\u0131\u011f\u0131, Hooks ile devrim niteli\u011finde bir sadelik&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-31669","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Hooks ile Durum ve Mant\u0131k Y\u00f6netimi: Zihninizi Kaybetmeden Basitle\u015ftirme<\/title>\n<meta name=\"description\" content=\"React geli\u015ftiricileri i\u00e7in bile zaman zaman karma\u015f\u0131kla\u015fabilen durum y\u00f6netimi ve bile\u015fen mant\u0131\u011f\u0131, Hooks ile devrim niteli\u011finde bir sadelik kazan\u0131yor. Bu kapsaml\u0131 makalede, React Hooks&#039;un ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve uygulamalar\u0131n\u0131zda nas\u0131l etkili bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Art\u0131k s\u0131n\u0131f bile\u015fenlerinin getirdi\u011fi karma\u015fadan kurtulup, daha temiz, anla\u015f\u0131l\u0131r ve bak\u0131m\u0131 kolay kodlar yazmaya haz\u0131r olun.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Hooks ile Durum ve Mant\u0131k Y\u00f6netimi: Zihninizi Kaybetmeden Basitle\u015ftirme\" \/>\n<meta property=\"og:description\" content=\"React geli\u015ftiricileri i\u00e7in bile zaman zaman karma\u015f\u0131kla\u015fabilen durum y\u00f6netimi ve bile\u015fen mant\u0131\u011f\u0131, Hooks ile devrim niteli\u011finde bir sadelik kazan\u0131yor. Bu kapsaml\u0131 makalede, React Hooks&#039;un ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve uygulamalar\u0131n\u0131zda nas\u0131l etkili bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Art\u0131k s\u0131n\u0131f bile\u015fenlerinin getirdi\u011fi karma\u015fadan kurtulup, daha temiz, anla\u015f\u0131l\u0131r ve bak\u0131m\u0131 kolay kodlar yazmaya haz\u0131r olun.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-12T12:31:49+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"35 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Hooks ile Durum ve Mant\u0131k Y\u00f6netimi: Zihninizi Kaybetmeden Basitle\u015ftirme\",\"datePublished\":\"2025-10-12T12:31:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/\"},\"wordCount\":5596,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/\",\"name\":\"React Hooks ile Durum ve Mant\u0131k Y\u00f6netimi: Zihninizi Kaybetmeden Basitle\u015ftirme\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-12T12:31:49+00:00\",\"description\":\"React geli\u015ftiricileri i\u00e7in bile zaman zaman karma\u015f\u0131kla\u015fabilen durum y\u00f6netimi ve bile\u015fen mant\u0131\u011f\u0131, Hooks ile devrim niteli\u011finde bir sadelik kazan\u0131yor. Bu kapsaml\u0131 makalede, React Hooks'un ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve uygulamalar\u0131n\u0131zda nas\u0131l etkili bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Art\u0131k s\u0131n\u0131f bile\u015fenlerinin getirdi\u011fi karma\u015fadan kurtulup, daha temiz, anla\u015f\u0131l\u0131r ve bak\u0131m\u0131 kolay kodlar yazmaya haz\u0131r olun.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Hooks ile Durum ve Mant\u0131k Y\u00f6netimi: Zihninizi Kaybetmeden Basitle\u015ftirme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Hooks ile Durum ve Mant\u0131k Y\u00f6netimi: Zihninizi Kaybetmeden Basitle\u015ftirme","description":"React geli\u015ftiricileri i\u00e7in bile zaman zaman karma\u015f\u0131kla\u015fabilen durum y\u00f6netimi ve bile\u015fen mant\u0131\u011f\u0131, Hooks ile devrim niteli\u011finde bir sadelik kazan\u0131yor. Bu kapsaml\u0131 makalede, React Hooks'un ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve uygulamalar\u0131n\u0131zda nas\u0131l etkili bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Art\u0131k s\u0131n\u0131f bile\u015fenlerinin getirdi\u011fi karma\u015fadan kurtulup, daha temiz, anla\u015f\u0131l\u0131r ve bak\u0131m\u0131 kolay kodlar yazmaya haz\u0131r olun.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/","og_locale":"tr_TR","og_type":"article","og_title":"React Hooks ile Durum ve Mant\u0131k Y\u00f6netimi: Zihninizi Kaybetmeden Basitle\u015ftirme","og_description":"React geli\u015ftiricileri i\u00e7in bile zaman zaman karma\u015f\u0131kla\u015fabilen durum y\u00f6netimi ve bile\u015fen mant\u0131\u011f\u0131, Hooks ile devrim niteli\u011finde bir sadelik kazan\u0131yor. Bu kapsaml\u0131 makalede, React Hooks'un ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve uygulamalar\u0131n\u0131zda nas\u0131l etkili bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Art\u0131k s\u0131n\u0131f bile\u015fenlerinin getirdi\u011fi karma\u015fadan kurtulup, daha temiz, anla\u015f\u0131l\u0131r ve bak\u0131m\u0131 kolay kodlar yazmaya haz\u0131r olun.","og_url":"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-12T12:31:49+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"35 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Hooks ile Durum ve Mant\u0131k Y\u00f6netimi: Zihninizi Kaybetmeden Basitle\u015ftirme","datePublished":"2025-10-12T12:31:49+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/"},"wordCount":5596,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/","url":"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/","name":"React Hooks ile Durum ve Mant\u0131k Y\u00f6netimi: Zihninizi Kaybetmeden Basitle\u015ftirme","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-12T12:31:49+00:00","description":"React geli\u015ftiricileri i\u00e7in bile zaman zaman karma\u015f\u0131kla\u015fabilen durum y\u00f6netimi ve bile\u015fen mant\u0131\u011f\u0131, Hooks ile devrim niteli\u011finde bir sadelik kazan\u0131yor. Bu kapsaml\u0131 makalede, React Hooks'un ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu ve uygulamalar\u0131n\u0131zda nas\u0131l etkili bir \u015fekilde kullanabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Art\u0131k s\u0131n\u0131f bile\u015fenlerinin getirdi\u011fi karma\u015fadan kurtulup, daha temiz, anla\u015f\u0131l\u0131r ve bak\u0131m\u0131 kolay kodlar yazmaya haz\u0131r olun.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-hooks-ile-durum-ve-mantik-yonetimi-zihninizi-kaybetmeden-basitlestirme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Hooks ile Durum ve Mant\u0131k Y\u00f6netimi: Zihninizi Kaybetmeden Basitle\u015ftirme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31669","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=31669"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31669\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}