{"id":35481,"date":"2025-11-30T06:40:49","date_gmt":"2025-11-30T03:40:49","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35481"},"modified":"2025-11-30T06:40:49","modified_gmt":"2025-11-30T03:40:49","slug":"react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/","title":{"rendered":"React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi"},"content":{"rendered":"<p><body><\/p>\n<h2>React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi<\/h2>\n<p>React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Uzun bir s\u00fcre boyunca, React bile\u015fenleri olu\u015fturman\u0131n iki ana yolu vard\u0131: s\u0131n\u0131f bile\u015fenleri (class components) ve fonksiyonel bile\u015fenler (functional components). S\u0131n\u0131f bile\u015fenleri, state ve ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131 gibi g\u00fc\u00e7l\u00fc \u00f6zellikler sunarken, fonksiyonel bile\u015fenler ba\u015flang\u0131\u00e7ta yaln\u0131zca &#8220;sunum&#8221; (presentational) bile\u015fenleri olarak kabul ediliyordu ve state veya ya\u015fam d\u00f6ng\u00fcs\u00fc mant\u0131\u011f\u0131na sahip olam\u0131yorlard\u0131. Ancak React Hooks&#8217;un tan\u0131t\u0131lmas\u0131yla bu durum k\u00f6kten de\u011fi\u015fti. Hooks, fonksiyonel bile\u015fenlere state ve di\u011fer React \u00f6zelliklerini kullanma yetene\u011fi kazand\u0131rarak, React geli\u015ftirme paradigmas\u0131nda \u00f6nemli bir de\u011fi\u015fime yol a\u00e7t\u0131.<\/p>\n<p>Bu makalede, mevcut React s\u0131n\u0131f bile\u015fenlerinizi fonksiyonel bile\u015fenlere React Hooks kullanarak nas\u0131l d\u00f6n\u00fc\u015ft\u00fcrece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz. D\u00f6n\u00fc\u015f\u00fcm\u00fcn nedenlerini, temel Hooks&#8217;un kullan\u0131m\u0131n\u0131 ve geli\u015fmi\u015f senaryolar\u0131 ele alarak, kodunuzu daha modern, okunabilir ve s\u00fcrd\u00fcr\u00fclebilir hale getirmeniz i\u00e7in kapsaml\u0131 bir rehber sunaca\u011f\u0131z.<\/p>\n<h2>1. Neden D\u00f6n\u00fc\u015ft\u00fcrmeliyiz?<\/h2>\n<p>S\u0131n\u0131f bile\u015fenleri hala ge\u00e7erli ve \u00e7al\u0131\u015f\u0131r durumda olsa da, React ekibi ve topluluk, yeni projelerde fonksiyonel bile\u015fenleri ve Hooks&#8217;u kullanmay\u0131 te\u015fvik etmektedir. Bunun arkas\u0131nda yatan bir\u00e7ok g\u00fc\u00e7l\u00fc neden bulunmaktad\u0131r:<\/p>\n<h3>Daha Az Kod ve Daha Az Karma\u015f\u0131kl\u0131k<\/h3>\n<p>S\u0131n\u0131f bile\u015fenleri, <code>constructor<\/code>, <code>super()<\/code>, <code>this<\/code> ba\u011flam\u0131, <code>render()<\/code> metodu ve ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131 gibi bir\u00e7ok boilerplate kod gerektirir. Fonksiyonel bile\u015fenler ve Hooks, bu yap\u0131lar\u0131n \u00e7o\u011funu ortadan kald\u0131rarak daha az, daha temiz ve daha \u00f6zl\u00fc kod yazman\u0131z\u0131 sa\u011flar. <code>this<\/code> ba\u011flam\u0131 ile ilgili sorunlar ve bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in gereken <code>bind<\/code> i\u015flemleri veya arrow function kullan\u0131mlar\u0131 ortadan kalkar.<\/p>\n<h3>Daha Kolay Okunabilirlik ve Anla\u015f\u0131labilirlik<\/h3>\n<p>Fonksiyonel bile\u015fenler, saf JavaScript fonksiyonlar\u0131 gibi davrand\u0131klar\u0131 i\u00e7in okunmas\u0131 ve anla\u015f\u0131lmas\u0131 daha kolayd\u0131r. Mant\u0131k, ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131na da\u011f\u0131lmak yerine, Hooks sayesinde ilgili state veya etki (effect) ile bir arada tutulabilir. Bu, bir bile\u015fenin ne yapt\u0131\u011f\u0131n\u0131 h\u0131zl\u0131ca kavramay\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<h3>Daha \u0130yi Yeniden Kullan\u0131labilirlik (Custom Hooks)<\/h3>\n<p>Hooks&#8217;un en b\u00fcy\u00fck avantajlar\u0131ndan biri, \u00f6zel Hook&#8217;lar (Custom Hooks) olu\u015fturma yetene\u011fidir. Bu sayede, stateful mant\u0131\u011f\u0131 bile\u015fenler aras\u0131nda kolayca payla\u015fabilir ve yeniden kullanabilirsiniz. S\u0131n\u0131f bile\u015fenlerinde bu t\u00fcr bir mant\u0131k payla\u015f\u0131m\u0131 genellikle Y\u00fcksek Dereceli Bile\u015fenler (Higher-Order Components &#8211; HOCs) veya Render Props gibi daha karma\u015f\u0131k kal\u0131plar gerektiriyordu. \u00d6zel Hook&#8217;lar, bu kal\u0131plar\u0131 basitle\u015ftirir ve daha esnek bir yap\u0131 sunar.<\/p>\n<h3>Test Edilebilirlik<\/h3>\n<p>Saf fonksiyonlar olduklar\u0131 i\u00e7in, fonksiyonel bile\u015fenler ve Hook&#8217;lar daha kolay test edilebilir. Ba\u011f\u0131ml\u0131l\u0131klar\u0131 daha a\u00e7\u0131k ve izole edilebilir oldu\u011fu i\u00e7in unit test yazmak genellikle daha basittir.<\/p>\n<h3>Gelecek Odakl\u0131l\u0131k<\/h3>\n<p>React ekibi, Hooks&#8217;a b\u00fcy\u00fck yat\u0131r\u0131m yapmaktad\u0131r ve gelecekteki \u00f6zelliklerin \u00e7o\u011funun Hooks etraf\u0131nda in\u015fa edilmesi beklenmektedir. Projelerinizi Hooks&#8217;a d\u00f6n\u00fc\u015ft\u00fcrmek, kod taban\u0131n\u0131z\u0131 modernle\u015ftirmek ve React ekosistemindeki en son geli\u015fmelerden yararlanmaya haz\u0131r hale getirmek anlam\u0131na gelir.<\/p>\n<h3>Potansiyel Performans \u0130yile\u015ftirmeleri<\/h3>\n<p><code>React.memo<\/code>, <code>useMemo<\/code> ve <code>useCallback<\/code> gibi Hooks ile fonksiyonel bile\u015fenlerde performans optimizasyonlar\u0131 yapmak daha do\u011frudan ve etkilidir. S\u0131n\u0131f bile\u015fenlerindeki <code>shouldComponentUpdate<\/code> veya <code>PureComponent<\/code>&#8216;a benzer veya onlardan daha g\u00fc\u00e7l\u00fc kontrol mekanizmalar\u0131 sunarlar.<\/p>\n<h2>2. D\u00f6n\u00fc\u015f\u00fcm Temelleri: State ve Lifecycle Metodlar\u0131<\/h2>\n<p>Bir s\u0131n\u0131f bile\u015fenini fonksiyonel bile\u015fene d\u00f6n\u00fc\u015ft\u00fcrmenin temel ad\u0131mlar\u0131, state y\u00f6netimi ve ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131n\u0131n Hooks kar\u015f\u0131l\u0131klar\u0131n\u0131 bulmaktan ge\u00e7er.<\/p>\n<h3>Ba\u015flang\u0131\u00e7 Noktas\u0131: Basit Bir S\u0131n\u0131f Bile\u015feni<\/h3>\n<p>D\u00f6n\u00fc\u015f\u00fcm s\u00fcrecini g\u00f6stermek i\u00e7in basit bir saya\u00e7 (counter) bile\u015feni ile ba\u015flayal\u0131m:<\/p>\n<pre><code class=\"language-jsx\">import React, { Component } from 'react';\n\nclass Counter extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0,\n    };\n    this.increment = this.increment.bind(this);\n  }\n\n  increment() {\n    this.setState(prevState => ({\n      count: prevState.count + 1,\n    }));\n  }\n\n  render() {\n    return (\n      <div>\n        <p>Saya\u00e7: {this.state.count}<\/p>\n        <button onClick={this.increment}>Artt\u0131r<\/button>\n      <\/div>\n    );\n  }\n}\n\nexport default Counter;<\/code><\/pre>\n<p>Bu s\u0131n\u0131f bile\u015fenini ad\u0131m ad\u0131m fonksiyonel bile\u015fene d\u00f6n\u00fc\u015ft\u00fcrelim.<\/p>\n<h3>State Y\u00f6netimi: <code>this.state<\/code> ve <code>this.setState()<\/code> -> <code>useState<\/code><\/h3>\n<p><code>useState<\/code> Hook&#8217;u, fonksiyonel bile\u015fenlere state eklemenin yoludur. Bir s\u0131n\u0131f bile\u015fenindeki <code>this.state<\/code> ve <code>this.setState()<\/code>&#8216;in do\u011frudan kar\u015f\u0131l\u0131\u011f\u0131d\u0131r.<\/p>\n<p><code>useState<\/code> kullan\u0131m\u0131:<br \/>\n<code>const [stateDe\u011feri, setStateDe\u011feri] = useState(ba\u015flang\u0131\u00e7De\u011feri);<\/code><\/p>\n<p><code>useState<\/code> Hook&#8217;u bir dizi d\u00f6nd\u00fcr\u00fcr:<br \/>\n1.  <strong><code>stateDe\u011feri<\/code><\/strong>: Mevcut state de\u011feri.<br \/>\n2.  <strong><code>setStateDe\u011feri<\/code><\/strong>: State de\u011ferini g\u00fcncelleyen bir fonksiyon.<br \/>\n3.  <strong><code>ba\u015flang\u0131\u00e7De\u011feri<\/code><\/strong>: State&#8217;in ilk de\u011feri. Bu, fonksiyonel bile\u015fen ilk render edildi\u011finde yaln\u0131zca bir kez kullan\u0131l\u0131r.<\/p>\n<p>Yukar\u0131daki <code>Counter<\/code> bile\u015fenini <code>useState<\/code> ile d\u00f6n\u00fc\u015ft\u00fcrelim:<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0); \/\/ count state'ini tan\u0131mlad\u0131k\n\n  const increment = () => {\n    setCount(prevCount => prevCount + 1); \/\/ setCount ile state'i g\u00fcncelledik\n  };\n\n  return (\n    <div>\n      <p>Saya\u00e7: {count}<\/p>\n      <button onClick={increment}>Artt\u0131r<\/button>\n    <\/div>\n  );\n}\n\nexport default Counter;<\/code><\/pre>\n<p>G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, <code>constructor<\/code>, <code>super()<\/code>, <code>this.state<\/code> ve <code>this.setState()<\/code> ortadan kalkt\u0131. <code>this<\/code> ba\u011flama ihtiyac\u0131 da kalmad\u0131. <code>count<\/code> de\u011feri do\u011frudan kullan\u0131labilir hale geldi. Birden fazla state de\u011fi\u015fkeniniz varsa, her biri i\u00e7in ayr\u0131 <code>useState<\/code> \u00e7a\u011fr\u0131s\u0131 yapabilirsiniz:<\/p>\n<pre><code class=\"language-jsx\">const [name, setName] = useState('Alice');\nconst [age, setAge] = useState(30);<\/code><\/pre>\n<h3>Ya\u015fam D\u00f6ng\u00fcs\u00fc Metodlar\u0131: <code>useEffect<\/code><\/h3>\n<p>S\u0131n\u0131f bile\u015fenlerinde <code>componentDidMount<\/code>, <code>componentDidUpdate<\/code> ve <code>componentWillUnmount<\/code> gibi ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131, <code>useEffect<\/code> Hook&#8217;unun tek bir soyutlamas\u0131 alt\u0131nda birle\u015ftirilmi\u015ftir. <code>useEffect<\/code> Hook&#8217;u, bile\u015fen render edildikten sonra yan etkileri (side effects) ger\u00e7ekle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Bu yan etkiler veri \u00e7ekme, DOM manip\u00fclasyonlar\u0131, abonelikler veya zamanlay\u0131c\u0131lar olabilir.<\/p>\n<p><code>useEffect<\/code> kullan\u0131m\u0131:<br \/>\n<code>useEffect(() => { \/<em> yan etki kodu <\/em>\/ }, [ba\u011f\u0131ml\u0131l\u0131kDizisi]);<\/code><\/p>\n<p><code>useEffect<\/code> iki arg\u00fcman al\u0131r:<br \/>\n1.  <strong>Bir fonksiyon<\/strong>: Yan etkiyi i\u00e7eren kod.<br \/>\n2.  <strong>Ba\u011f\u0131ml\u0131l\u0131k Dizisi (Dependency Array)<\/strong> (iste\u011fe ba\u011fl\u0131): Bu dizi, <code>useEffect<\/code>&#8216;in ne zaman tekrar \u00e7al\u0131\u015faca\u011f\u0131n\u0131 kontrol eder.<br \/>\n    *   <strong>Bo\u015f dizi <code>[]<\/code><\/strong>: Etki sadece bile\u015fen ilk mount edildi\u011finde bir kez \u00e7al\u0131\u015f\u0131r (t\u0131pk\u0131 <code>componentDidMount<\/code> gibi).<br \/>\n    *   <strong>Dizi yok<\/strong>: Etki her render&#8217;dan sonra \u00e7al\u0131\u015f\u0131r (hem <code>componentDidMount<\/code> hem de <code>componentDidUpdate<\/code> gibi).<br \/>\n    *   <strong>De\u011fer i\u00e7eren dizi <code>[prop1, state2]<\/code><\/strong>: Etki, dizideki herhangi bir de\u011fer de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r (belirli <code>componentDidUpdate<\/code> davran\u0131\u015flar\u0131 gibi).<\/p>\n<p><code>componentWillUnmount<\/code>&#8216;a kar\u015f\u0131l\u0131k gelen temizleme (cleanup) i\u015flemi i\u00e7in, <code>useEffect<\/code> i\u00e7inde bir fonksiyon d\u00f6nd\u00fcrebilirsiniz. Bu fonksiyon, bile\u015fen unmount edildi\u011finde veya bir sonraki etki \u00e7al\u0131\u015fmadan \u00f6nce temizlik yapmak i\u00e7in \u00e7a\u011fr\u0131l\u0131r.<\/p>\n<p>\u00d6rnek: Veri \u00e7ekme (Data Fetching)<\/p>\n<p>S\u0131n\u0131f bile\u015feni:<\/p>\n<pre><code class=\"language-jsx\">import React, { Component } from 'react';\n\nclass DataFetcher extends Component {\n  state = {\n    data: null,\n    loading: true,\n  };\n\n  componentDidMount() {\n    this.fetchData();\n  }\n\n  async fetchData() {\n    try {\n      const response = await fetch('https:\/\/api.example.com\/data');\n      const data = await response.json();\n      this.setState({ data, loading: false });\n    } catch (error) {\n      console.error('Veri \u00e7ekme hatas\u0131:', error);\n      this.setState({ loading: false });\n    }\n  }\n\n  render() {\n    if (this.state.loading) return <p>Y\u00fckleniyor...<\/p>;\n    return <div>Veri: {JSON.stringify(this.state.data)}<\/div>;\n  }\n}\n\nexport default DataFetcher;<\/code><\/pre>\n<p>Fonksiyonel bile\u015fen (<code>useState<\/code> ve <code>useEffect<\/code> ile):<\/p>\n<pre><code class=\"language-jsx\">import React, { useState, useEffect } from 'react';\n\nfunction DataFetcher() {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const response = await fetch('https:\/\/api.example.com\/data');\n        const result = await response.json();\n        setData(result);\n      } catch (error) {\n        console.error('Veri \u00e7ekme hatas\u0131:', error);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchData();\n  }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi: Sadece bile\u015fen ilk mount edildi\u011finde \u00e7al\u0131\u015f\u0131r.\n\n  if (loading) return <p>Y\u00fckleniyor...<\/p>;\n  return <div>Veri: {JSON.stringify(data)}<\/div>;\n}\n\nexport default DataFetcher;<\/code><\/pre>\n<p>\u00d6rnek: Event Listener Ekleme ve Kald\u0131rma (Cleanup Function)<\/p>\n<p>S\u0131n\u0131f bile\u015feni:<\/p>\n<pre><code class=\"language-jsx\">import React, { Component } from 'react';\n\nclass WindowResizer extends Component {\n  componentDidMount() {\n    window.addEventListener('resize', this.handleResize);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this.handleResize);\n  }\n\n  handleResize = () => {\n    console.log('Pencere boyutu de\u011fi\u015fti:', window.innerWidth);\n  };\n\n  render() {\n    return <p>Pencere boyutunu konsolda izleyin.<\/p>;\n  }\n}\n\nexport default WindowResizer;<\/code><\/pre>\n<p>Fonksiyonel bile\u015fen (<code>useEffect<\/code> ile temizleme):<\/p>\n<pre><code class=\"language-jsx\">import React, { useEffect } from 'react';\n\nfunction WindowResizer() {\n  const handleResize = () => {\n    console.log('Pencere boyutu de\u011fi\u015fti:', window.innerWidth);\n  };\n\n  useEffect(() => {\n    window.addEventListener('resize', handleResize);\n\n    \/\/ Temizleme fonksiyonu (componentWillUnmount kar\u015f\u0131l\u0131\u011f\u0131)\n    return () => {\n      window.removeEventListener('resize', handleResize);\n    };\n  }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi: Sadece mount ve unmount'ta \u00e7al\u0131\u015f\u0131r.\n\n  return <p>Pencere boyutunu konsolda izleyin.<\/p>;\n}\n\nexport default WindowResizer;<\/code><\/pre>\n<h3><code>render()<\/code> Metodu -> Fonksiyon G\u00f6vdesi<\/h3>\n<p>S\u0131n\u0131f bile\u015fenlerindeki <code>render()<\/code> metodu, bile\u015fenin \u00e7\u0131kt\u0131s\u0131n\u0131 JSX olarak d\u00f6nd\u00fcr\u00fcr. Fonksiyonel bile\u015fenlerde ise, fonksiyonun kendisi do\u011frudan JSX d\u00f6nd\u00fcr\u00fcr. <code>render<\/code> metoduna gerek kalmaz.<\/p>\n<pre><code class=\"language-jsx\">\/\/ S\u0131n\u0131f Bile\u015feni\nclass MyComponent extends Component {\n  render() {\n    return <div>Merhaba<\/div>;\n  }\n}\n\n\/\/ Fonksiyonel Bile\u015fen\nfunction MyComponent() {\n  return <div>Merhaba<\/div>;\n}<\/code><\/pre>\n<h2>3. Di\u011fer S\u0131n\u0131f \u00d6zelliklerinin D\u00f6n\u00fc\u015ft\u00fcr\u00fclmesi<\/h2>\n<p>State ve ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131 temel d\u00f6n\u00fc\u015f\u00fcm ad\u0131mlar\u0131 olsa da, s\u0131n\u0131f bile\u015fenlerinin ba\u015fka \u00f6zellikleri de vard\u0131r. Bunlar\u0131 da Hooks ile nas\u0131l y\u00f6netece\u011fimize bakal\u0131m.<\/p>\n<h3>Props Y\u00f6netimi: <code>this.props<\/code> -> Fonksiyon Parametreleri<\/h3>\n<p>S\u0131n\u0131f bile\u015fenlerinde props&#8217;lara <code>this.props<\/code> ile eri\u015filirken, fonksiyonel bile\u015fenlerde props&#8217;lar do\u011frudan fonksiyonun parametresi olarak al\u0131n\u0131r. Genellikle obje destructuring kullan\u0131larak okunabilirlik art\u0131r\u0131l\u0131r.<\/p>\n<pre><code class=\"language-jsx\">\/\/ S\u0131n\u0131f Bile\u015feni\nclass Greeting extends Component {\n  render() {\n    return <p>Merhaba, {this.props.name}!<\/p>;\n  }\n}\n\n\/\/ Fonksiyonel Bile\u015fen\nfunction Greeting({ name }) { \/\/ name prop'unu destructuring ile ald\u0131k\n  return <p>Merhaba, {name}!<\/p>;\n}<\/code><\/pre>\n<h3>Metodlar: S\u0131n\u0131f Metodlar\u0131 -> Fonksiyon \u0130\u00e7indeki Fonksiyonlar veya <code>useCallback<\/code><\/h3>\n<p>S\u0131n\u0131f bile\u015fenlerindeki yard\u0131mc\u0131 metodlar, fonksiyonel bile\u015fenlerde do\u011frudan bile\u015fen fonksiyonu i\u00e7inde tan\u0131mlanabilir. E\u011fer bu metodlar, child bile\u015fenlere prop olarak aktar\u0131l\u0131yorsa ve performans optimizasyonu gerekiyorsa, <code>useCallback<\/code> Hook&#8217;u kullan\u0131labilir.<\/p>\n<pre><code class=\"language-jsx\">\/\/ S\u0131n\u0131f Bile\u015feni\nclass ButtonClicker extends Component {\n  handleClick = () => { \/\/ Arrow function ile this ba\u011flama sorunu \u00e7\u00f6z\u00fclm\u00fc\u015f\n    console.log('Butona t\u0131kland\u0131!');\n  };\n\n  render() {\n    return <button onClick={this.handleClick}>T\u0131kla<\/button>;\n  }\n}\n\n\/\/ Fonksiyonel Bile\u015fen\nimport React, { useCallback } from 'react';\n\nfunction ButtonClicker() {\n  const handleClick = () => {\n    console.log('Butona t\u0131kland\u0131!');\n  };\n\n  \/\/ E\u011fer handleClick, bir child bile\u015fene prop olarak aktar\u0131l\u0131yorsa ve gereksiz yeniden render'lar\u0131 \u00f6nlemek istiyorsak useCallback kullanabiliriz.\n  \/\/ const handleClick = useCallback(() => {\n  \/\/   console.log('Butona t\u0131kland\u0131!');\n  \/\/ }, []); \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi bo\u015f ise, fonksiyon sadece bir kez olu\u015fturulur.\n\n  return <button onClick={handleClick}>T\u0131kla<\/button>;\n}<\/code><\/pre>\n<p><code>useCallback<\/code> Hook&#8217;u, bir fonksiyonun referans\u0131n\u0131, ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece ayn\u0131 tutar. Bu, \u00f6zellikle <code>React.memo<\/code> ile optimize edilmi\u015f alt bile\u015fenlere callback prop&#8217;lar\u0131 g\u00f6nderirken gereksiz yeniden render&#8217;lar\u0131 \u00f6nlemek i\u00e7in faydal\u0131d\u0131r.<\/p>\n<h3>Refler: <code>createRef<\/code> \/ <code>this.myRef.current<\/code> -> <code>useRef<\/code><\/h3>\n<p><code>useRef<\/code> Hook&#8217;u, DOM elemanlar\u0131na veya React bile\u015fenlerine referans tutmak i\u00e7in kullan\u0131l\u0131r. Ayr\u0131ca, render&#8217;lar aras\u0131nda de\u011fi\u015fmeden kalacak mutable (de\u011fi\u015ftirilebilir) de\u011ferleri tutmak i\u00e7in de kullan\u0131labilir.<\/p>\n<pre><code class=\"language-jsx\">\/\/ S\u0131n\u0131f Bile\u015feni\nimport React, { Component, createRef } from 'react';\n\nclass TextInput extends Component {\n  constructor(props) {\n    super(props);\n    this.inputRef = createRef();\n  }\n\n  focusInput = () => {\n    this.inputRef.current.focus();\n  };\n\n  render() {\n    return (\n      <div>\n        <input type=\"text\" ref={this.inputRef} \/>\n        <button onClick={this.focusInput}>Input'a Odaklan<\/button>\n      <\/div>\n    );\n  }\n}\n\n\/\/ Fonksiyonel Bile\u015fen\nimport React, { useRef } from 'react';\n\nfunction TextInput() {\n  const inputRef = useRef(null); \/\/ useRef ile bir ref olu\u015fturduk\n\n  const focusInput = () => {\n    inputRef.current.focus(); \/\/ .current \u00f6zelli\u011fi ile DOM eleman\u0131na eri\u015ftik\n  };\n\n  return (\n    <div>\n      <input type=\"text\" ref={inputRef} \/>\n      <button onClick={focusInput}>Input'a Odaklan<\/button>\n    <\/div>\n  );\n}<\/code><\/pre>\n<h3>Context API: <code>Context.Consumer<\/code> \/ <code>static contextType<\/code> -> <code>useContext<\/code><\/h3>\n<p>React Context API, props drilling (prop&#8217;lar\u0131 derinlemesine ge\u00e7irme) sorununu \u00e7\u00f6zmek i\u00e7in kullan\u0131l\u0131r. <code>useContext<\/code> Hook&#8217;u, bir context&#8217;teki de\u011feri okumak i\u00e7in \u00e7ok daha temiz bir yol sunar.<\/p>\n<pre><code class=\"language-jsx\">\/\/ Context tan\u0131m\u0131 (ayn\u0131 kal\u0131r)\nconst ThemeContext = React.createContext('light');\n\n\/\/ S\u0131n\u0131f Bile\u015feni (Context.Consumer ile)\nclass ThemedButton extends Component {\n  render() {\n    return (\n      <ThemeContext.Consumer>\n        {theme => <button className={theme}>Temal\u0131 Buton<\/button>}\n      <\/ThemeContext.Consumer>\n    );\n  }\n}\n\n\/\/ S\u0131n\u0131f Bile\u015feni (static contextType ile - sadece tek context i\u00e7in)\nclass AnotherThemedButton extends Component {\n  static contextType = ThemeContext; \/\/ Tek bir context i\u00e7in\n  render() {\n    return <button className={this.context}>Ba\u015fka Temal\u0131 Buton<\/button>;\n  }\n}\n\n\/\/ Fonksiyonel Bile\u015fen (useContext ile)\nimport React, { useContext } from 'react';\n\nfunction ThemedButton() {\n  const theme = useContext(ThemeContext); \/\/ useContext ile context de\u011ferini ald\u0131k\n  return <button className={theme}>Temal\u0131 Buton<\/button>;\n}<\/code><\/pre>\n<h3><code>shouldComponentUpdate<\/code> \/ <code>PureComponent<\/code> -> <code>React.memo<\/code> (ve <code>useMemo<\/code>\/<code>useCallback<\/code>)<\/h3>\n<p>Performans optimizasyonu i\u00e7in s\u0131n\u0131f bile\u015fenlerinde <code>shouldComponentUpdate<\/code> metodu veya <code>PureComponent<\/code> kullan\u0131l\u0131rd\u0131. Fonksiyonel bile\u015fenlerde bunun kar\u015f\u0131l\u0131\u011f\u0131 <code>React.memo<\/code>&#8216;dur.<\/p>\n<p><code>React.memo<\/code>, bir fonksiyonel bile\u015feni sarar ve prop&#8217;lar\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece bile\u015fenin yeniden render edilmesini engeller. <code>PureComponent<\/code>&#8216;a benzer \u015fekilde, shallow comparison (s\u0131\u011f kar\u015f\u0131la\u015ft\u0131rma) yapar.<\/p>\n<pre><code class=\"language-jsx\">\/\/ S\u0131n\u0131f Bile\u015feni (PureComponent ile)\nimport React, { PureComponent } from 'react';\n\nclass MemoizedGreeting extends PureComponent {\n  render() {\n    console.log('MemoizedGreeting render edildi');\n    return <p>Merhaba, {this.props.name}<\/p>;\n  }\n}\n\n\/\/ Fonksiyonel Bile\u015fen (React.memo ile)\nimport React from 'react';\n\nfunction MemoizedGreeting({ name }) {\n  console.log('MemoizedGreeting render edildi');\n  return <p>Merhaba, {name}<\/p>;\n}\n\nexport default React.memo(MemoizedGreeting); \/\/ React.memo ile sarmal\u0131yoruz<\/code><\/pre>\n<p>E\u011fer bile\u015feninize karma\u015f\u0131k objeler veya fonksiyonlar prop olarak ge\u00e7iyorsa, <code>React.memo<\/code>&#8216;nun s\u0131\u011f kar\u015f\u0131la\u015ft\u0131rmas\u0131 yeterli olmayabilir. Bu durumda, <code>useMemo<\/code> ve <code>useCallback<\/code> Hook&#8217;lar\u0131n\u0131 kullanarak prop&#8217;lar\u0131n referans e\u015fitli\u011fini koruyabilir ve gereksiz yeniden render&#8217;lar\u0131 \u00f6nleyebilirsiniz.<\/p>\n<p>*   <strong><code>useMemo<\/code><\/strong>: Bir de\u011ferin (objenin, dizinin vb.) pahal\u0131 hesaplamas\u0131n\u0131 \u00f6nbelle\u011fe al\u0131r ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece ayn\u0131 de\u011feri d\u00f6nd\u00fcr\u00fcr.<br \/>\n*   <strong><code>useCallback<\/code><\/strong>: Bir fonksiyonun referans\u0131n\u0131 ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece ayn\u0131 tutar.<\/p>\n<pre><code class=\"language-jsx\">import React, { useState, useMemo, useCallback } from 'react';\n\nfunction ParentComponent() {\n  const [count, setCount] = useState(0);\n  const [name, setName] = useState('Alice');\n\n  \/\/ useMemo ile pahal\u0131 bir hesaplamay\u0131 \u00f6nbelle\u011fe al\n  const memoizedValue = useMemo(() => {\n    console.log('Pahal\u0131 hesaplama yap\u0131ld\u0131');\n    return count * 2;\n  }, [count]); \/\/ Sadece count de\u011fi\u015fti\u011finde yeniden hesapla\n\n  \/\/ useCallback ile bir fonksiyon referans\u0131n\u0131 \u00f6nbelle\u011fe al\n  const handleClick = useCallback(() => {\n    console.log('Butona t\u0131kland\u0131, sayac:', count);\n  }, [count]); \/\/ Sadece count de\u011fi\u015fti\u011finde fonksiyon referans\u0131n\u0131 g\u00fcncelle\n\n  return (\n    <div>\n      <p>Saya\u00e7: {count}<\/p>\n      <p>Memoized De\u011fer: {memoizedValue}<\/p>\n      <button onClick={() => setCount(count + 1)}>Saya\u00e7\u0131 Artt\u0131r<\/button>\n      <input type=\"text\" value={name} onChange={e => setName(e.target.value)} \/>\n      {\/<em> ChildComponent'e aktar\u0131lan fonksiyonun referans\u0131 de\u011fi\u015fmez, e\u011fer count de\u011fi\u015fmediyse <\/em>\/}\n      <ChildComponent onClick={handleClick} \/>\n    <\/div>\n  );\n}\n\nconst ChildComponent = React.memo(({ onClick }) => {\n  console.log('ChildComponent render edildi');\n  return <button onClick={onClick}>Child Buton<\/button>;\n});<\/code><\/pre>\n<h3>Hata Yakalama (Error Boundaries)<\/h3>\n<p>S\u0131n\u0131f bile\u015fenleri, <code>componentDidCatch<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc metodu ve <code>static getDerivedStateFromError<\/code> ile hata s\u0131n\u0131rlar\u0131 (Error Boundaries) olu\u015fturmak i\u00e7in kullan\u0131labilir. <strong>\u00d6nemli bir not:<\/strong> React&#8217;te, hata s\u0131n\u0131rlar\u0131 hala sadece s\u0131n\u0131f bile\u015fenleri ile olu\u015fturulabilir. Fonksiyonel bile\u015fenler do\u011frudan bir hata s\u0131n\u0131r\u0131 olamaz. E\u011fer projenizde hata s\u0131n\u0131rlar\u0131na ihtiyac\u0131n\u0131z varsa, bu k\u0131s\u0131mlar\u0131 s\u0131n\u0131f bile\u015feni olarak b\u0131rakman\u0131z veya ayr\u0131 s\u0131n\u0131f bile\u015fenleri olu\u015fturman\u0131z gerekecektir.<\/p>\n<h2>4. Geli\u015fmi\u015f D\u00f6n\u00fc\u015f\u00fcm Senaryolar\u0131 ve \u0130pu\u00e7lar\u0131<\/h2>\n<p>Temel Hooks&#8217;lar\u0131 anlad\u0131ktan sonra, daha karma\u015f\u0131k senaryolar\u0131 ele alabilir ve kodunuzu daha da optimize edebilirsiniz.<\/p>\n<h3><code>useReducer<\/code> ile Karma\u015f\u0131k State Y\u00f6netimi<\/h3>\n<p>E\u011fer state mant\u0131\u011f\u0131n\u0131z karma\u015f\u0131k hale geliyorsa, birden fazla <code>useState<\/code> \u00e7a\u011fr\u0131s\u0131 yerine <code>useReducer<\/code> Hook&#8217;unu kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. <code>useReducer<\/code>, <code>useState<\/code>&#8216;e bir alternatiftir ve \u00f6zellikle state&#8217;in birden fazla alt de\u011feri i\u00e7erdi\u011fi veya bir sonraki state&#8217;in \u00f6nceki state&#8217;e ba\u011fl\u0131 oldu\u011fu durumlarda daha iyi performans g\u00f6sterir. Redux&#8217;a benzer bir yap\u0131 sunar.<\/p>\n<pre><code class=\"language-jsx\">\/\/ S\u0131n\u0131f Bile\u015feni (Karma\u015f\u0131k State)\nclass TodoList extends Component {\n  state = {\n    todos: [],\n    newTodoText: '',\n  };\n\n  handleAddTodo = () => { \/<em> ... <\/em>\/ };\n  handleToggleTodo = (id) => { \/<em> ... <\/em>\/ };\n  \/\/ ... di\u011fer metodlar\n}\n\n\/\/ Fonksiyonel Bile\u015fen (useReducer ile)\nimport React, { useReducer, useState } from 'react';\n\nconst todoReducer = (state, action) => {\n  switch (action.type) {\n    case 'ADD_TODO':\n      return [\n        ...state,\n        { id: Date.now(), text: action.payload, completed: false },\n      ];\n    case 'TOGGLE_TODO':\n      return state.map(todo =>\n        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo\n      );\n    case 'REMOVE_TODO':\n      return state.filter(todo => todo.id !== action.payload);\n    default:\n      return state;\n  }\n};\n\nfunction TodoList() {\n  const [todos, dispatch] = useReducer(todoReducer, []); \/\/ reducer ve ba\u015flang\u0131\u00e7 state'i\n  const [newTodoText, setNewTodoText] = useState('');\n\n  const handleAddTodo = () => {\n    if (newTodoText.trim()) {\n      dispatch({ type: 'ADD_TODO', payload: newTodoText });\n      setNewTodoText('');\n    }\n  };\n\n  return (\n    <div>\n      <input\n        type=\"text\"\n        value={newTodoText}\n        onChange={e => setNewTodoText(e.target.value)}\n        placeholder=\"Yeni g\u00f6rev ekle\"\n      \/>\n      <button onClick={handleAddTodo}>Ekle<\/button>\n      <ul>\n        {todos.map(todo => (\n          <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>\n            {todo.text}\n            <button onClick={() => dispatch({ type: 'TOGGLE_TODO', payload: todo.id })}>\n              {todo.completed ? 'Geri Al' : 'Tamamla'}\n            <\/button>\n            <button onClick={() => dispatch({ type: 'REMOVE_TODO', payload: todo.id })}>\n              Sil\n            <\/button>\n          <\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}<\/code><\/pre>\n<h3>\u00d6zel Hook&#8217;lar Olu\u015fturma<\/h3>\n<p>Tekrar eden mant\u0131\u011f\u0131 soyutlamak ve bile\u015fenler aras\u0131nda yeniden kullanmak i\u00e7in \u00f6zel Hook&#8217;lar olu\u015fturmak, Hooks&#8217;un en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biridir. \u00d6rne\u011fin, bir API&#8217;den veri \u00e7ekme mant\u0131\u011f\u0131n\u0131 veya pencere boyutunu izleme mant\u0131\u011f\u0131n\u0131 bir \u00f6zel Hook i\u00e7ine alabilirsiniz.<\/p>\n<pre><code class=\"language-jsx\">\/\/ useWindowSize ad\u0131nda \u00f6zel bir Hook\nimport { useState, useEffect } from 'react';\n\nfunction useWindowSize() {\n  const [windowSize, setWindowSize] = useState({\n    width: window.innerWidth,\n    height: window.innerHeight,\n  });\n\n  useEffect(() => {\n    const handleResize = () => {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    };\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []); \/\/ Sadece mount ve unmount'ta \u00e7al\u0131\u015f\u0131r\n\n  return windowSize;\n}\n\n\/\/ Bu Hook'u kullanan bir bile\u015fen\nimport React from 'react';\n\/\/ import { useWindowSize } from '.\/useWindowSize'; \/\/ Ger\u00e7ek bir projede bu \u015fekilde import edilir\n\nfunction MyResponsiveComponent() {\n  const { width, height } = useWindowSize(); \/\/ \u00d6zel Hook'u kulland\u0131k\n\n  return (\n    <div>\n      <p>Pencere Geni\u015fli\u011fi: {width}px<\/p>\n      <p>Pencere Y\u00fcksekli\u011fi: {height}px<\/p>\n    <\/div>\n  );\n}<\/code><\/pre>\n<p>Bu sayede, <code>useWindowSize<\/code> Hook&#8217;unu istedi\u011finiz kadar bile\u015fende yeniden kullanabilirsiniz.<\/p>\n<h3><code>this<\/code> Ba\u011flam\u0131 ve Event Handler&#8217;lar<\/h3>\n<p>S\u0131n\u0131f bile\u015fenlerinde <code>this<\/code> ba\u011flam\u0131, \u00f6zellikle event handler&#8217;lar ile \u00e7al\u0131\u015f\u0131rken s\u0131k\u00e7a sorunlara yol a\u00e7ard\u0131. <code>this<\/code>&#8216;i do\u011fru bir \u015fekilde ba\u011flamak (\u00f6rne\u011fin <code>constructor<\/code>&#8216;da <code>this.handleClick = this.handleClick.bind(this)<\/code> veya arrow function kullanmak) gerekiyordu. Fonksiyonel bile\u015fenlerde bu sorun tamamen ortadan kalkar \u00e7\u00fcnk\u00fc fonksiyonlar kendi kapsamlar\u0131na (scope) sahiptir ve <code>this<\/code> ba\u011flam\u0131yla u\u011fra\u015fmaya gerek kalmaz. Event handler&#8217;lar do\u011frudan fonksiyon i\u00e7inde tan\u0131mlanabilir.<\/p>\n<h3>Tipik Zorluklar ve \u00c7\u00f6z\u00fcmleri<\/h3>\n<p>*   <strong>Kapan\u0131\u015flar (Closures) ve G\u00fcncel Olmayan State:<\/strong> <code>useEffect<\/code> i\u00e7inde eski state de\u011ferlerini yakalama sorunu ya\u015fanabilir. Bu genellikle <code>useEffect<\/code>&#8216;in ba\u011f\u0131ml\u0131l\u0131k dizisinin yanl\u0131\u015f kullan\u0131lmas\u0131ndan kaynaklan\u0131r. Her zaman <code>useEffect<\/code>&#8216;in i\u00e7indeki kodun ihtiya\u00e7 duydu\u011fu t\u00fcm d\u0131\u015f de\u011fi\u015fkenleri ba\u011f\u0131ml\u0131l\u0131k dizisine ekleyin. E\u011fer bir state&#8217;in g\u00fcncel de\u011ferine ihtiyac\u0131n\u0131z varsa ve <code>useEffect<\/code>&#8216;in tekrar \u00e7al\u0131\u015fmas\u0131n\u0131 istemiyorsan\u0131z, <code>useRef<\/code> kullanarak mutable bir de\u011fer tutabilir veya <code>setState<\/code>&#8216;in fonksiyonel formunu kullanabilirsiniz (\u00f6rne\u011fin <code>setCount(prevCount => prevCount + 1)<\/code>).<br \/>\n*   <strong>Gereksiz Yeniden Render&#8217;lar:<\/strong> <code>useEffect<\/code> ba\u011f\u0131ml\u0131l\u0131k dizisinin yanl\u0131\u015f kullan\u0131m\u0131 veya <code>React.memo<\/code>, <code>useCallback<\/code>, <code>useMemo<\/code> gibi optimizasyon Hook&#8217;lar\u0131n\u0131n kullan\u0131lmamas\u0131, gereksiz yeniden render&#8217;lara yol a\u00e7abilir. Ba\u011f\u0131ml\u0131l\u0131k dizisini do\u011fru ayarlay\u0131n ve performans kritik yerlerde optimizasyon Hook&#8217;lar\u0131n\u0131 kullanmay\u0131 unutmay\u0131n.<\/p>\n<h2>5. D\u00f6n\u00fc\u015f\u00fcm Stratejileri ve En \u0130yi Uygulamalar<\/h2>\n<p>B\u00fcy\u00fck bir projeyi s\u0131n\u0131f bile\u015fenlerinden fonksiyonel bile\u015fenlere d\u00f6n\u00fc\u015ft\u00fcrmek, dikkatli bir planlama gerektirebilir. \u0130\u015fte baz\u0131 stratejiler ve en iyi uygulamalar:<\/p>\n<h3>Ad\u0131m Ad\u0131m D\u00f6n\u00fc\u015f\u00fcm Yakla\u015f\u0131m\u0131<\/h3>\n<p>T\u00fcm projeyi bir kerede d\u00f6n\u00fc\u015ft\u00fcrmeye \u00e7al\u0131\u015fmak yerine, k\u00fc\u00e7\u00fck ad\u0131mlarla ilerleyin:<br \/>\n1.  <strong>Alt Bile\u015fenlerden Ba\u015flay\u0131n:<\/strong> En alt seviyedeki, en az ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olan bile\u015fenlerden ba\u015flayarak yukar\u0131 do\u011fru ilerleyin. Bu, d\u00f6n\u00fc\u015f\u00fcm\u00fc daha y\u00f6netilebilir hale getirir ve hatalar\u0131 izole etmeyi kolayla\u015ft\u0131r\u0131r.<br \/>\n2.  <strong>Yan Yana Geli\u015ftirme:<\/strong> Mevcut s\u0131n\u0131f bile\u015fenini silmeden, yeni fonksiyonel bile\u015feni yan\u0131na olu\u015fturun. Her ikisinin de ayn\u0131 \u015fekilde \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak i\u00e7in testler yaz\u0131n veya manuel olarak do\u011frulay\u0131n, ard\u0131ndan eski s\u0131n\u0131f bile\u015fenini kald\u0131r\u0131n.<br \/>\n3.  <strong>K\u00fc\u00e7\u00fck De\u011fi\u015fiklikler:<\/strong> Her d\u00f6n\u00fc\u015f\u00fcm ad\u0131m\u0131n\u0131 k\u00fc\u00e7\u00fck tutun. Bir seferde sadece bir Hook&#8217;u veya bir ya\u015fam d\u00f6ng\u00fcs\u00fc metodunu d\u00f6n\u00fc\u015ft\u00fcr\u00fcn.<\/p>\n<h3>Testleri Korumak<\/h3>\n<p>D\u00f6n\u00fc\u015f\u00fcm s\u00fcreci boyunca mevcut testlerinizin \u00e7al\u0131\u015fmaya devam etti\u011finden emin olun. M\u00fcmk\u00fcnse, d\u00f6n\u00fc\u015f\u00fcmden \u00f6nce test kapsam\u0131n\u0131 art\u0131r\u0131n. D\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcn\u00fcz bile\u015fenler i\u00e7in yeni testler yazarken, fonksiyonel bile\u015fenlerin test edilebilirli\u011finin daha kolay oldu\u011funu g\u00f6receksiniz.<\/p>\n<h3>Kod \u0130ncelemesi<\/h3>\n<p>D\u00f6n\u00fc\u015ft\u00fcr\u00fclen kodunuzu ekip arkada\u015flar\u0131n\u0131zla inceleyin. Bu, hatalar\u0131 erken yakalamaya ve en iyi uygulamalar\u0131n takip edildi\u011finden emin olmaya yard\u0131mc\u0131 olur.<\/p>\n<h3>Karma Projelerde Yakla\u015f\u0131m<\/h3>\n<p>B\u00fcy\u00fck ve eski projelerde, t\u00fcm s\u0131n\u0131f bile\u015fenlerini d\u00f6n\u00fc\u015ft\u00fcrmek pratik olmayabilir. Hem s\u0131n\u0131f hem de fonksiyonel bile\u015fenlerin bir arada bulunabilece\u011fi karma bir yakla\u015f\u0131m benimseyebilirsiniz. Yeni \u00f6zellikler veya bile\u015fenler her zaman fonksiyonel olarak yaz\u0131lmal\u0131, eski s\u0131n\u0131f bile\u015fenleri ise zamanla, ihtiya\u00e7 duyuldu\u011funda veya yeniden fakt\u00f6rleme f\u0131rsatlar\u0131 do\u011fdu\u011funda d\u00f6n\u00fc\u015ft\u00fcr\u00fclmelidir. Tutarl\u0131l\u0131k i\u00e7in, d\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcn\u00fcz bile\u015fenlerde belirli bir kodlama stili benimseyin.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>React Hooks, fonksiyonel bile\u015fenlere state ve ya\u015fam d\u00f6ng\u00fcs\u00fc yetenekleri kazand\u0131rarak React geli\u015ftirme deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde basitle\u015ftirmi\u015f ve modernle\u015ftirmi\u015ftir. S\u0131n\u0131f bile\u015fenlerinden fonksiyonel bile\u015fenlere ge\u00e7i\u015f yapmak, kod taban\u0131n\u0131z\u0131 daha okunabilir, daha az boilerplate i\u00e7eren, daha kolay test edilebilir ve gelece\u011fe daha haz\u0131r hale getirir.<\/p>\n<p>Bu rehber, <code>useState<\/code> ile state y\u00f6netimi, <code>useEffect<\/code> ile ya\u015fam d\u00f6ng\u00fcs\u00fc metodlar\u0131, <code>useRef<\/code> ile referanslar, <code>useContext<\/code> ile Context API ve <code>React.memo<\/code>, <code>useCallback<\/code>, <code>useMemo<\/code> ile performans optimizasyonlar\u0131 gibi temel ve geli\u015fmi\u015f d\u00f6n\u00fc\u015f\u00fcm tekniklerini kapsamaktad\u0131r. <code>useReducer<\/code> ve \u00f6zel Hook&#8217;lar gibi daha g\u00fc\u00e7l\u00fc ara\u00e7lar, karma\u015f\u0131k state mant\u0131\u011f\u0131n\u0131 y\u00f6netmenize ve kod tekrar\u0131n\u0131 azaltman\u0131za olanak tan\u0131r.<\/p>\n<p>D\u00f6n\u00fc\u015f\u00fcm s\u00fcreci, \u00f6zellikle b\u00fcy\u00fck projelerde zaman al\u0131c\u0131 olabilir, ancak ad\u0131m ad\u0131m bir yakla\u015f\u0131m benimseyerek, testleri koruyarak ve en iyi uygulamalar\u0131 takip ederek bu ge\u00e7i\u015fi sorunsuz bir \u015fekilde ger\u00e7ekle\u015ftirebilirsiniz. React&#8217;in modern y\u00fcz\u00fc olan Hooks&#8217;u benimsemek, hem geli\u015ftirici deneyiminizi iyile\u015ftirecek hem de uygulamalar\u0131n\u0131z\u0131n kalitesini art\u0131racakt\u0131r. Art\u0131k s\u0131n\u0131f bile\u015fenlerinin karma\u015f\u0131kl\u0131\u011f\u0131yla u\u011fra\u015fmak yerine, odak noktan\u0131z\u0131 do\u011frudan uygulaman\u0131z\u0131n mant\u0131\u011f\u0131na ve kullan\u0131c\u0131 deneyimine kayd\u0131rabilirsiniz.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi\nReact, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan","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-35481","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 S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\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-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi\" \/>\n<meta property=\"og:description\" content=\"React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-30T03:40: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=\"18 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi\",\"datePublished\":\"2025-11-30T03:40:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/\"},\"wordCount\":2546,\"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-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/\",\"name\":\"React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-30T03:40:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi\"}]},{\"@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 S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi","og_description":"React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan","og_url":"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-30T03:40:49+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"18 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi","datePublished":"2025-11-30T03:40:49+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/"},"wordCount":2546,"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-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/","name":"React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-30T03:40:49+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-sinif-bilesenlerini-fonksiyonel-bilesenlere-react-hooks-ile-donusturme-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React S\u0131n\u0131f Bile\u015fenlerini Fonksiyonel Bile\u015fenlere React Hooks ile D\u00f6n\u00fc\u015ft\u00fcrme Rehberi"}]},{"@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\/35481","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=35481"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35481\/revisions"}],"predecessor-version":[{"id":35482,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35481\/revisions\/35482"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}