{"id":35813,"date":"2025-12-04T04:40:44","date_gmt":"2025-12-04T01:40:44","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35813"},"modified":"2025-12-04T04:40:44","modified_gmt":"2025-12-04T01:40:44","slug":"reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/","title":{"rendered":"React&#8217;te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz"},"content":{"rendered":"<p><body><\/p>\n<h2>React&#8217;te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz<\/h2>\n<p>React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in deklaratif ve bile\u015fen tabanl\u0131 bir yakla\u015f\u0131m sunan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. React uygulamalar\u0131, k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alar olan bile\u015fenlerden olu\u015fur. Bir bile\u015fenin olu\u015fturulmas\u0131ndan, g\u00fcncellenmesine ve sonunda DOM&#8217;dan kald\u0131r\u0131lmas\u0131na kadar ge\u00e7en s\u00fcre\u00e7, &#8220;ya\u015fam d\u00f6ng\u00fcs\u00fc&#8221; olarak adland\u0131r\u0131l\u0131r. Bu ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca, React belirli noktalarda tetiklenen \u00f6zel fonksiyonlar veya metotlar sa\u011flar. Bu &#8220;ya\u015fam d\u00f6ng\u00fcs\u00fc fonksiyonlar\u0131&#8221;n\u0131 anlamak ve do\u011fru bir \u015fekilde kullanmak, React uygulamalar\u0131n\u0131n performans\u0131n\u0131 optimize etmek, yan etkileri y\u00f6netmek, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek ve \u00f6ng\u00f6r\u00fclebilir davran\u0131\u015flar sergilemesini sa\u011flamak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<p>Bu makalede, React bile\u015fenlerinin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc, hem geleneksel s\u0131n\u0131f bile\u015fenleri hem de modern fonksiyonel bile\u015fenler ve React Hooks ba\u011flam\u0131nda derinlemesine inceleyece\u011fiz. Her bir ya\u015fam d\u00f6ng\u00fcs\u00fc metodunun ne zaman \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, ne i\u015fe yarad\u0131\u011f\u0131n\u0131, nas\u0131l kullan\u0131lmas\u0131 gerekti\u011fini ve yayg\u0131n hatalardan nas\u0131l ka\u00e7\u0131n\u0131laca\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n<h3>S\u0131n\u0131f Bile\u015fenlerinde Ya\u015fam D\u00f6ng\u00fcs\u00fc Metotlar\u0131<\/h3>\n<p>React&#8217;in ilk zamanlar\u0131nda ve halen bir\u00e7ok mevcut projede s\u0131n\u0131f bile\u015fenleri yayg\u0131n olarak kullan\u0131lmaktad\u0131r. S\u0131n\u0131f bile\u015fenleri, bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fcn farkl\u0131 a\u015famalar\u0131nda belirli kodlar\u0131 \u00e7al\u0131\u015ft\u0131rmam\u0131z\u0131 sa\u011flayan bir dizi \u00f6nceden tan\u0131mlanm\u0131\u015f metoda sahiptir. Bu metotlar genellikle \u00fc\u00e7 ana a\u015famaya ayr\u0131l\u0131r: Olu\u015fum (Mounting), G\u00fcncelleme (Updating) ve Ayr\u0131lma (Unmounting). Ayr\u0131ca, hatalar\u0131 y\u00f6netmek i\u00e7in \u00f6zel metotlar da bulunur.<\/p>\n<h4>1. Olu\u015fum (Mounting) A\u015famas\u0131<\/h4>\n<p>Bu a\u015fama, bir bile\u015fenin ilk kez olu\u015fturuldu\u011fu, DOM&#8217;a ba\u011fland\u0131\u011f\u0131 ve ilk render i\u015flemini ger\u00e7ekle\u015ftirdi\u011fi zamand\u0131r.<\/p>\n<h5><code>constructor(props)<\/code><\/h5>\n<p>*   <strong>Ne Zaman \u00c7al\u0131\u015f\u0131r:<\/strong> Bir bile\u015fenin React DOM&#8217;a yerle\u015ftirilmeden \u00f6nce olu\u015fturuldu\u011fu ilk and\u0131r. S\u0131n\u0131f bile\u015feninin bir \u00f6rne\u011fi olu\u015fturuldu\u011funda ilk \u00e7a\u011fr\u0131lan metottur.<br \/>\n*   <strong>Ne \u0130\u015fe Yarar:<\/strong><br \/>\n    *   <code>super(props)<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131 yaparak <code>this.props<\/code>&#8216;a eri\u015fimi sa\u011flar. Bu \u00e7a\u011fr\u0131 zorunludur.<br \/>\n    *   Bile\u015fenin ba\u015flang\u0131\u00e7 durumunu (<code>this.state<\/code>) do\u011frudan atamak i\u00e7in kullan\u0131l\u0131r. <code>this.setState()<\/code> burada \u00e7a\u011fr\u0131lmaz.<br \/>\n    *   Olay i\u015fleyicilerini <code>this<\/code> ba\u011flam\u0131na ba\u011flamak i\u00e7in kullan\u0131l\u0131r (ancak modern JavaScript ve s\u0131n\u0131f alanlar\u0131 sayesinde bu art\u0131k daha az gerekli hale gelmi\u015ftir).<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-javascript\">class MyComponent extends React.Component {\n      constructor(props) {\n        super(props);\n        this.state = {\n          sayac: 0,\n          veri: null\n        };\n        this.handleClick = this.handleClick.bind(this); \/\/ Olay i\u015fleyici ba\u011flama\n      }\n      \/\/ ...\n    }<\/code><\/pre>\n<p>*   <strong>\u00d6nemli Not:<\/strong> Yan etkiler (API \u00e7a\u011fr\u0131lar\u0131, abonelikler vb.) burada yap\u0131lmamal\u0131d\u0131r.<\/p>\n<h5><code>static getDerivedStateFromProps(props, state)<\/code><\/h5>\n<p>*   <strong>Ne Zaman \u00c7al\u0131\u015f\u0131r:<\/strong> Bir bile\u015fenin olu\u015fturulmas\u0131ndan \u00f6nce (<code>render<\/code>dan hemen \u00f6nce) ve g\u00fcncellenme s\u0131ras\u0131nda (<code>render<\/code>dan hemen \u00f6nce) \u00e7a\u011fr\u0131l\u0131r. Bu, <code>render<\/code> metodu \u00e7a\u011fr\u0131lmadan hemen \u00f6nceki son \u015fanst\u0131r.<br \/>\n*   <strong>Ne \u0130\u015fe Yarar:<\/strong> Bile\u015fenin durumunu (state) prop&#8217;lara g\u00f6re g\u00fcncellemek i\u00e7in kullan\u0131l\u0131r. Statik bir metot oldu\u011fu i\u00e7in <code>this<\/code>&#8216;e eri\u015fimi yoktur.<br \/>\n*   <strong>D\u00f6n\u00fc\u015f De\u011feri:<\/strong> Bir obje d\u00f6nd\u00fcr\u00fcrse, bu obje bile\u015fenin state&#8217;i ile birle\u015ftirilir. <code>null<\/code> d\u00f6nd\u00fcr\u00fcrse, state&#8217;te herhangi bir de\u011fi\u015fiklik yap\u0131lmaz.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-javascript\">class MyComponent extends React.Component {\n      state = {\n        internalValue: this.props.initialValue\n      };\n\n      static getDerivedStateFromProps(props, state) {\n        \/\/ E\u011fer prop de\u011fi\u015ftiyse, state'i g\u00fcncelleyelim\n        if (props.initialValue !== state.internalValue) {\n          return {\n            internalValue: props.initialValue\n          };\n        }\n        return null; \/\/ State'te de\u011fi\u015fiklik yok\n      }\n      \/\/ ...\n    }<\/code><\/pre>\n<p><em>   <strong>\u00d6nemli Not:<\/strong> Bu metot yan etkileri ger\u00e7ekle\u015ftirmek i\u00e7in <\/em>kullan\u0131lmamal\u0131d\u0131r*. Yaln\u0131zca prop&#8217;lardan state&#8217;e de\u011fer t\u00fcretmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. \u00c7o\u011fu durumda, prop&#8217;lar\u0131 state&#8217;e kopyalamak yerine do\u011frudan prop&#8217;lar\u0131 kullanmak daha iyidir.<\/p>\n<h5><code>render()<\/code><\/h5>\n<p>*   <strong>Ne Zaman \u00c7al\u0131\u015f\u0131r:<\/strong> <code>constructor<\/code> ve <code>getDerivedStateFromProps<\/code>&#8216;tan sonra, ve her g\u00fcncelleme d\u00f6ng\u00fcs\u00fcnde <code>getDerivedStateFromProps<\/code> ve <code>shouldComponentUpdate<\/code>&#8216;ten sonra \u00e7a\u011fr\u0131l\u0131r.<br \/>\n*   <strong>Ne \u0130\u015fe Yarar:<\/strong> Bile\u015fenin UI&#8217;\u0131n\u0131 olu\u015fturur ve React elementlerini d\u00f6nd\u00fcr\u00fcr. Bu metot, bile\u015fenin nas\u0131l g\u00f6r\u00fcnece\u011fini tan\u0131mlar.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-javascript\">class MyComponent extends React.Component {\n      state = { count: 0 };\n      render() {\n        return (\n          <div>\n            \n            <button onClick={() => this.setState({ count: this.state.count + 1 })}>Artt\u0131r<\/button>\n          <\/div>\n        );\n      }\n    }<\/code><\/pre>\n<p>*   <strong>\u00d6nemli Not:<\/strong> <code>render<\/code> metodu saf (pure) bir fonksiyon olmal\u0131d\u0131r. Yani, yan etkiler yaratmamal\u0131, do\u011frudan <code>setState<\/code> \u00e7a\u011f\u0131rmamal\u0131 veya DOM ile etkile\u015fime girmemelidir. Ayn\u0131 prop&#8217;lar ve state verildi\u011finde her zaman ayn\u0131 \u00e7\u0131kt\u0131y\u0131 d\u00f6nd\u00fcrmelidir.<\/p>\n<h5><code>componentDidMount()<\/code><\/h5>\n<p>*   <strong>Ne Zaman \u00c7al\u0131\u015f\u0131r:<\/strong> Bile\u015fen ilk kez DOM&#8217;a ba\u011fland\u0131ktan (mount edildikten) hemen sonra \u00e7a\u011fr\u0131l\u0131r.<br \/>\n*   <strong>Ne \u0130\u015fe Yarar:<\/strong> Bu, yan etkileri ger\u00e7ekle\u015ftirmek i\u00e7in ideal yerdir.<br \/>\n    *   API \u00e7a\u011fr\u0131lar\u0131 yaparak veri \u00e7ekme.<br \/>\n    *   DOM elemanlar\u0131na do\u011frudan eri\u015fim ve manip\u00fclasyon (\u00f6rne\u011fin, bir grafik k\u00fct\u00fcphanesi ba\u015flatma).<br \/>\n    *   Zamanlay\u0131c\u0131lar (setTimeout, setInterval) kurma.<br \/>\n    *   D\u0131\u015f kaynaklara (WebSocket, EventListener) abonelikler olu\u015fturma.<br \/>\n    *   <code>setState<\/code> \u00e7a\u011fr\u0131labilir, bu da ek bir render tetikler, ancak bu dikkatli kullan\u0131lmal\u0131d\u0131r.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-javascript\">class MyComponent extends React.Component {\n      state = { data: null };\n      componentDidMount() {\n        fetch('https:\/\/api.example.com\/data')\n          .then(response => response.json())\n          .then(data => this.setState({ data }));\n        console.log('Bile\u015fen DOM\u2019a ba\u011fland\u0131.');\n      }\n      render() {\n        return (\n          <div>\n            {this.state.data ? <p>Veri: {this.state.data.name}<\/p> : <p>Y\u00fckleniyor...<\/p>}\n          <\/div>\n        );\n      }\n    }<\/code><\/pre>\n<p>*   <strong>\u00d6nemli Not:<\/strong> <code>componentDidMount<\/code> i\u00e7inde kurulan t\u00fcm aboneliklerin veya zamanlay\u0131c\u0131lar\u0131n <code>componentWillUnmount<\/code> i\u00e7inde temizlenmesi gerekti\u011fini unutmay\u0131n.<\/p>\n<h4>2. G\u00fcncelleme (Updating) A\u015famas\u0131<\/h4>\n<p>Bir bile\u015fenin prop&#8217;lar\u0131 veya state&#8217;i de\u011fi\u015fti\u011finde tetiklenen a\u015famad\u0131r. Bu, bile\u015fenin UI&#8217;\u0131n\u0131n g\u00fcncellenmesine yol a\u00e7ar.<\/p>\n<h5><code>static getDerivedStateFromProps(props, state)<\/code><\/h5>\n<p>*   <strong>Ne Zaman \u00c7al\u0131\u015f\u0131r:<\/strong> G\u00fcncelleme a\u015famas\u0131nda da <code>render<\/code>dan hemen \u00f6nce \u00e7a\u011fr\u0131l\u0131r.<br \/>\n*   <strong>Ne \u0130\u015fe Yarar:<\/strong> Daha \u00f6nce a\u00e7\u0131kland\u0131\u011f\u0131 gibi, prop&#8217;lar de\u011fi\u015fti\u011finde state&#8217;i senkronize etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<h5><code>shouldComponentUpdate(nextProps, nextState)<\/code><\/h5>\n<p>*   <strong>Ne Zaman \u00c7al\u0131\u015f\u0131r:<\/strong> Yeni prop&#8217;lar veya state al\u0131nd\u0131\u011f\u0131nda, <code>render<\/code> metodu \u00e7a\u011fr\u0131lmadan \u00f6nce \u00e7a\u011fr\u0131l\u0131r.<br \/>\n*   <strong>Ne \u0130\u015fe Yarar:<\/strong> Bile\u015fenin yeniden render edilip edilmeyece\u011fine karar verme f\u0131rsat\u0131 verir. Varsay\u0131lan olarak <code>true<\/code> d\u00f6nd\u00fcr\u00fcr ve her zaman yeniden render olur. <code>false<\/code> d\u00f6nd\u00fcr\u00fcrseniz, bile\u015fen yeniden render edilmez ve alt bile\u015fenlerinin <code>render<\/code> metotlar\u0131 da tetiklenmez.<br \/>\n*   <strong>D\u00f6n\u00fc\u015f De\u011feri:<\/strong> <code>true<\/code> veya <code>false<\/code>.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-javascript\">class MyComponent extends React.Component {\n      state = { count: 0 };\n      shouldComponentUpdate(nextProps, nextState) {\n        \/\/ Sadece sayac de\u011fi\u015ftiyse yeniden render et\n        if (nextState.count !== this.state.count) {\n          return true;\n        }\n        return false;\n      }\n      render() {\n        console.log('MyComponent render edildi.');\n        return (\n          <div>\n            \n            <button onClick={() => this.setState({ count: this.state.count + 1 })}>Artt\u0131r<\/button>\n          <\/div>\n        );\n      }\n    }<\/code><\/pre>\n<p>*   <strong>\u00d6nemli Not:<\/strong> Bu metot, performans optimizasyonu i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r ancak dikkatli kullan\u0131lmal\u0131d\u0131r. Yanl\u0131\u015f kullan\u0131l\u0131rsa, UI g\u00fcncellemelerinin ka\u00e7\u0131r\u0131lmas\u0131na neden olabilir. Genellikle <code>React.PureComponent<\/code> veya fonksiyonel bile\u015fenlerde <code>React.memo<\/code> ile bu ihtiyac\u0131n \u00e7o\u011fu kar\u015f\u0131lan\u0131r.<\/p>\n<h5><code>render()<\/code><\/h5>\n<p>*   <strong>Ne Zaman \u00c7al\u0131\u015f\u0131r:<\/strong> <code>shouldComponentUpdate<\/code> <code>true<\/code> d\u00f6nd\u00fcrd\u00fc\u011f\u00fcnde \u00e7a\u011fr\u0131l\u0131r.<br \/>\n*   <strong>Ne \u0130\u015fe Yarar:<\/strong> G\u00fcncellenmi\u015f prop&#8217;lar ve state ile bile\u015fenin UI&#8217;\u0131n\u0131 yeniden olu\u015fturur.<\/p>\n<h5><code>getSnapshotBeforeUpdate(prevProps, prevState)<\/code><\/h5>\n<p><em>   <strong>Ne Zaman \u00c7al\u0131\u015f\u0131r:<\/strong> <code>render<\/code> \u00e7a\u011fr\u0131ld\u0131ktan ve DOM g\u00fcncellenmeden <\/em>hemen \u00f6nce* \u00e7a\u011fr\u0131l\u0131r.<br \/>\n*   <strong>Ne \u0130\u015fe Yarar:<\/strong> DOM g\u00fcncellenmeden \u00f6nceki durum hakk\u0131nda bilgi alman\u0131z\u0131 sa\u011flar (\u00f6rne\u011fin, scroll pozisyonu, bir eleman\u0131n boyutu). Bu metottan d\u00f6nen herhangi bir de\u011fer, <code>componentDidUpdate<\/code> metoduna \u00fc\u00e7\u00fcnc\u00fc bir parametre olarak iletilir.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-javascript\">class ScrollList extends React.Component {\n      listRef = React.createRef();\n\n      getSnapshotBeforeUpdate(prevProps, prevState) {\n        \/\/ E\u011fer yeni \u00f6\u011feler ekleniyorsa, scroll pozisyonunu kaydet\n        if (prevProps.list.length < this.props.list.length) {\n          const list = this.listRef.current;\n          return list.scrollHeight - list.scrollTop;\n        }\n        return null;\n      }\n\n      componentDidUpdate(prevProps, prevState, snapshot) {\n        \/\/ snapshot de\u011feri varsa, scroll pozisyonunu ayarla\n        if (snapshot !== null) {\n          const list = this.listRef.current;\n          list.scrollTop = list.scrollHeight - snapshot;\n        }\n      }\n\n      render() {\n        return (\n          <div ref={this.listRef} style={{ overflowY: 'scroll', height: '200px' }}>\n            {this.props.list.map((item, index) => (\n              <p key={index}>{item}<\/p>\n            ))}\n          <\/div>\n        );\n      }\n    }<\/code><\/pre>\n<p>*   <strong>\u00d6nemli Not:<\/strong> Bu metot nadiren kullan\u0131l\u0131r ve sadece belirli DOM \u00f6l\u00e7\u00fcmleri veya pozisyonlar\u0131 i\u00e7in gereklidir.<\/p>\n<h5><code>componentDidUpdate(prevProps, prevState, snapshot)<\/code><\/h5>\n<p><em>   <strong>Ne Zaman \u00c7al\u0131\u015f\u0131r:<\/strong> Bile\u015fen g\u00fcncellendikten ve DOM yeniden render edildikten <\/em>hemen sonra* \u00e7a\u011fr\u0131l\u0131r.<br \/>\n*   <strong>Ne \u0130\u015fe Yarar:<\/strong><br \/>\n    *   G\u00fcncellenmi\u015f DOM ile etkile\u015fim kurma (\u00f6rne\u011fin, DOM manip\u00fclasyonu).<br \/>\n    *   Prop&#8217;lardaki veya state&#8217;deki de\u011fi\u015fikliklere g\u00f6re a\u011f istekleri yapma.<br \/>\n    *   <code>setState<\/code> \u00e7a\u011fr\u0131labilir, ancak bir ko\u015ful i\u00e7inde olmal\u0131d\u0131r, aksi takdirde sonsuz d\u00f6ng\u00fcye neden olabilir.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-javascript\">class UserProfile extends React.Component {\n      state = { userData: null };\n\n      componentDidMount() {\n        this.fetchUserData(this.props.userId);\n      }\n\n      componentDidUpdate(prevProps) {\n        \/\/ Kullan\u0131c\u0131 ID de\u011fi\u015ftiyse yeni veriyi \u00e7ek\n        if (this.props.userId !== prevProps.userId) {\n          this.fetchUserData(this.props.userId);\n        }\n      }\n\n      fetchUserData = (userId) => {\n        fetch(<code>https:\/\/api.example.com\/users\/${userId}<\/code>)\n          .then(response => response.json())\n          .then(userData => this.setState({ userData }));\n      };\n\n      render() {\n        return (\n          <div>\n            {this.state.userData ? <p>Kullan\u0131c\u0131 Ad\u0131: {this.state.userData.name}<\/p> : <p>Y\u00fckleniyor...<\/p>}\n          <\/div>\n        );\n      }\n    }<\/code><\/pre>\n<p>*   <strong>\u00d6nemli Not:<\/strong> <code>componentDidUpdate<\/code> i\u00e7inde <code>setState<\/code> \u00e7a\u011f\u0131r\u0131rken, bir ko\u015ful ekleyerek sonsuz d\u00f6ng\u00fcden ka\u00e7\u0131nmak esast\u0131r.<\/p>\n<h4>3. Ayr\u0131lma (Unmounting) A\u015famas\u0131<\/h4>\n<p>Bu a\u015fama, bir bile\u015fenin DOM&#8217;dan kald\u0131r\u0131ld\u0131\u011f\u0131 zamand\u0131r.<\/p>\n<h5><code>componentWillUnmount()<\/code><\/h5>\n<p>*   <strong>Ne Zaman \u00c7al\u0131\u015f\u0131r:<\/strong> Bile\u015fen DOM&#8217;dan kald\u0131r\u0131lmak \u00fczereyken ve yok edilmeden hemen \u00f6nce \u00e7a\u011fr\u0131l\u0131r.<br \/>\n*   <strong>Ne \u0130\u015fe Yarar:<\/strong> Bile\u015fen temizlik i\u015flemleri i\u00e7in kullan\u0131l\u0131r.<br \/>\n    *   <code>componentDidMount<\/code> i\u00e7inde olu\u015fturulan zamanlay\u0131c\u0131lar\u0131 (setTimeout, setInterval) temizleme.<br \/>\n    *   Abonelikleri (WebSocket, EventListener) iptal etme.<br \/>\n    *   A\u011f isteklerini iptal etme (e\u011fer devam eden bir istek varsa).<br \/>\n    *   Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in t\u00fcm kaynaklar\u0131 serbest b\u0131rakma.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-javascript\">class TimerComponent extends React.Component {\n      state = { seconds: 0 };\n      intervalId = null;\n\n      componentDidMount() {\n        this.intervalId = setInterval(() => {\n          this.setState(prevState => ({ seconds: prevState.seconds + 1 }));\n        }, 1000);\n      }\n\n      componentWillUnmount() {\n        clearInterval(this.intervalId); \/\/ Zamanlay\u0131c\u0131y\u0131 temizle\n        console.log('Zamanlay\u0131c\u0131 temizlendi.');\n      }\n\n      render() {\n        return ;\n      }\n    }<\/code><\/pre>\n<p>*   <strong>\u00d6nemli Not:<\/strong> Bu metot, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in kritik \u00f6neme sahiptir. Temizlenmeyen kaynaklar uygulaman\u0131n performans\u0131n\u0131 d\u00fc\u015f\u00fcrebilir.<\/p>\n<h4>4. Hata Y\u00f6netimi (Error Handling) A\u015famas\u0131<\/h4>\n<p>Bu metotlar, alt bile\u015fenlerinde meydana gelen JavaScript hatalar\u0131n\u0131 yakalamak ve i\u015flemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<h5><code>static getDerivedStateFromError(error)<\/code><\/h5>\n<p>*   <strong>Ne Zaman \u00c7al\u0131\u015f\u0131r:<\/strong> Alt bile\u015fen a\u011fac\u0131nda bir hata olu\u015ftu\u011funda \u00e7a\u011fr\u0131l\u0131r.<br \/>\n*   <strong>Ne \u0130\u015fe Yarar:<\/strong> Hata durumunda bir yedek UI (fallback UI) render etmek i\u00e7in state&#8217;i g\u00fcncellemenizi sa\u011flar. Statik bir metot oldu\u011fu i\u00e7in <code>this<\/code>&#8216;e eri\u015fimi yoktur.<br \/>\n*   <strong>D\u00f6n\u00fc\u015f De\u011feri:<\/strong> State&#8217;i g\u00fcncellemek i\u00e7in bir obje d\u00f6nd\u00fcrmelidir.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-javascript\">class ErrorBoundary extends React.Component {\n      state = { hasError: false };\n\n      static getDerivedStateFromError(error) {\n        \/\/ Bir sonraki render'da yedek UI g\u00f6sterebilmek i\u00e7in state'i g\u00fcncelle\n        return { hasError: true };\n      }\n      \/\/ ...\n    }<\/code><\/pre>\n<h5><code>componentDidCatch(error, errorInfo)<\/code><\/h5>\n<p>*   <strong>Ne Zaman \u00c7al\u0131\u015f\u0131r:<\/strong> Alt bile\u015fen a\u011fac\u0131nda bir hata olu\u015ftu\u011funda \u00e7a\u011fr\u0131l\u0131r.<br \/>\n*   <strong>Ne \u0130\u015fe Yarar:<\/strong> Hata bilgilerini bir hata raporlama servisine g\u00f6ndermek gibi yan etkileri ger\u00e7ekle\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong>Parametreler:<\/strong><br \/>\n    *   <code>error<\/code>: At\u0131lan hata.<br \/>\n    *   <code>errorInfo<\/code>: Hataya neden olan bile\u015fen y\u0131\u011f\u0131n\u0131 (component stack) hakk\u0131nda bilgi i\u00e7eren bir nesne.<br \/>\n*   <strong>\u00d6rnek:<\/strong><\/p>\n<pre><code class=\"language-javascript\">class ErrorBoundary extends React.Component {\n      state = { hasError: false };\n\n      static getDerivedStateFromError(error) {\n        return { hasError: true };\n      }\n\n      componentDidCatch(error, errorInfo) {\n        \/\/ Hata raporlama servisine g\u00f6nder (\u00f6rne\u011fin, Sentry, Bugsnag)\n        console.error(\"Hata Yakaland\u0131:\", error, errorInfo);\n      }\n\n      render() {\n        if (this.state.hasError) {\n          \/\/ Yedek UI\n          return ;\n        }\n        return this.props.children;\n      }\n    }<\/code><\/pre>\n<p>*   <strong>\u00d6nemli Not:<\/strong> Hata s\u0131n\u0131rlar\u0131 (Error Boundaries) yaln\u0131zca alt bile\u015fenlerindeki hatalar\u0131 yakalar, kendilerindeki hatalar\u0131 yakalayamazlar. Ayr\u0131ca, sadece s\u0131n\u0131f bile\u015fenleri hata s\u0131n\u0131r\u0131 olabilir. Fonksiyonel bile\u015fenler hata s\u0131n\u0131r\u0131 olamaz, ancak bir hata s\u0131n\u0131r\u0131 taraf\u0131ndan sar\u0131labilirler.<\/p>\n<h3>Ya\u015fam D\u00f6ng\u00fcs\u00fc Diyagram\u0131 ve Ak\u0131\u015f<\/h3>\n<p>React s\u0131n\u0131f bile\u015fenlerinin ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131n \u00e7a\u011fr\u0131lma s\u0131ras\u0131 a\u015fa\u011f\u0131daki gibidir:<\/p>\n<p>*   <strong>Olu\u015fum (Mounting):<\/strong><br \/>\n    1.  <code>constructor()<\/code><br \/>\n    2.  <code>static getDerivedStateFromProps()<\/code><br \/>\n    3.  <code>render()<\/code><br \/>\n    4.  <code>componentDidMount()<\/code><br \/>\n*   <strong>G\u00fcncelleme (Updating):<\/strong><br \/>\n    1.  <code>static getDerivedStateFromProps()<\/code><br \/>\n    2.  <code>shouldComponentUpdate()<\/code> (e\u011fer <code>false<\/code> d\u00f6nerse, sonraki ad\u0131mlar atlan\u0131r)<br \/>\n    3.  <code>render()<\/code><br \/>\n    4.  <code>getSnapshotBeforeUpdate()<\/code><br \/>\n    5.  <code>componentDidUpdate()<\/code><br \/>\n*   <strong>Ayr\u0131lma (Unmounting):<\/strong><br \/>\n    1.  <code>componentWillUnmount()<\/code><br \/>\n*   <strong>Hata Y\u00f6netimi (Error Handling):<\/strong><br \/>\n    *   <code>static getDerivedStateFromError()<\/code><br \/>\n    *   <code>componentDidCatch()<\/code><\/p>\n<p>Bu ak\u0131\u015f\u0131 anlamak, bile\u015fenlerinizin ne zaman hangi kodu \u00e7al\u0131\u015ft\u0131raca\u011f\u0131n\u0131 tahmin etmenize ve yan etkileri do\u011fru yerlerde y\u00f6netmenize yard\u0131mc\u0131 olur.<\/p>\n<h3>Ya\u015fam D\u00f6ng\u00fcs\u00fc Metotlar\u0131n\u0131n Do\u011fru Kullan\u0131m\u0131 ve Yayg\u0131n Hatalar<\/h3>\n<p>*   <strong>Yan Etkiler:<\/strong> A\u011f istekleri, DOM manip\u00fclasyonu, abonelikler gibi yan etkiler <code>componentDidMount<\/code> ve <code>componentDidUpdate<\/code> i\u00e7inde yap\u0131lmal\u0131, temizlik i\u015flemleri ise <code>componentWillUnmount<\/code> i\u00e7inde ger\u00e7ekle\u015ftirilmelidir.<br \/>\n*   <strong><code>setState<\/code> Kullan\u0131m\u0131:<\/strong><br \/>\n    *   <code>constructor<\/code> i\u00e7inde sadece ba\u015flang\u0131\u00e7 state&#8217;i do\u011frudan atan\u0131r (<code>this.state = {}<\/code>).<br \/>\n    *   Di\u011fer t\u00fcm durumlarda <code>this.setState()<\/code> kullan\u0131lmal\u0131d\u0131r.<br \/>\n    *   <code>componentDidUpdate<\/code> i\u00e7inde <code>setState<\/code> \u00e7a\u011f\u0131r\u0131rken, sonsuz d\u00f6ng\u00fcy\u00fc \u00f6nlemek i\u00e7in bir ko\u015ful ekledi\u011finizden emin olun.<br \/>\n*   <strong><code>getDerivedStateFromProps<\/code> Dikkatli Kullan\u0131m\u0131:<\/strong> Bu metot, prop&#8217;lardaki bir de\u011fi\u015fikli\u011fe g\u00f6re state&#8217;i g\u00fcncellemek i\u00e7in \u00e7ok spesifik bir amaca hizmet eder. \u00c7o\u011fu zaman, prop&#8217;lar\u0131 do\u011frudan kullanmak veya <code>componentDidUpdate<\/code> i\u00e7inde state&#8217;i g\u00fcncellemek daha uygun olabilir. Yan etkilerden ka\u00e7\u0131n\u0131lmal\u0131d\u0131r.<br \/>\n*   <strong>Performans Optimizasyonu:<\/strong> <code>shouldComponentUpdate<\/code> manuel performans optimizasyonu i\u00e7in kullan\u0131labilir, ancak <code>React.PureComponent<\/code> veya fonksiyonel bile\u015fenlerde <code>React.memo<\/code> genellikle daha iyi ve daha g\u00fcvenli alternatiflerdir.<br \/>\n*   <strong>Bellek S\u0131z\u0131nt\u0131lar\u0131:<\/strong> <code>componentWillUnmount<\/code> i\u00e7inde zamanlay\u0131c\u0131lar\u0131, abonelikleri ve di\u011fer d\u0131\u015f kaynaklar\u0131 temizlemeyi unutmak, uygulaman\u0131zda ciddi bellek s\u0131z\u0131nt\u0131lar\u0131na neden olabilir.<\/p>\n<h3>Fonksiyonel Bile\u015fenler ve React Hooks ile Ya\u015fam D\u00f6ng\u00fcs\u00fc<\/h3>\n<p>React 16.8 ile tan\u0131t\u0131lan React Hooks, fonksiyonel bile\u015fenlere state ve ya\u015fam d\u00f6ng\u00fcs\u00fc \u00f6zelliklerini eklememizi sa\u011flad\u0131. Bu, s\u0131n\u0131f bile\u015fenlerinin sundu\u011fu bir\u00e7ok yetene\u011fi fonksiyonel bile\u015fenlerde de kullanabilmemiz anlam\u0131na geliyor ve genellikle daha temiz, daha anla\u015f\u0131l\u0131r ve yeniden kullan\u0131labilir kod yazmam\u0131za olanak tan\u0131yor. Hooks, geleneksel ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131 do\u011frudan birebir kopyalamaz, ancak onlar\u0131n i\u015flevselli\u011fini farkl\u0131 bir paradigmada sunar.<\/p>\n<h4><code>useEffect<\/code> Hook&#8217;u<\/h4>\n<p><code>useEffect<\/code> hook&#8217;u, fonksiyonel bile\u015fenlerde yan etkileri y\u00f6netmek i\u00e7in ana ara\u00e7t\u0131r. <code>componentDidMount<\/code>, <code>componentDidUpdate<\/code> ve <code>componentWillUnmount<\/code> metotlar\u0131n\u0131n i\u015flevselli\u011fini tek bir API alt\u0131nda birle\u015ftirir.<\/p>\n<p>*   <strong>Kullan\u0131m Amac\u0131:<\/strong> Veri \u00e7ekme, DOM manip\u00fclasyonu, olay dinleyicileri kurma, zamanlay\u0131c\u0131lar ba\u015flatma gibi yan etkileri ger\u00e7ekle\u015ftirmek.<br \/>\n*   <strong>Yap\u0131s\u0131:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { useEffect, useState } from 'react';\n\n    function MyComponent() {\n      const [count, setCount] = useState(0);\n\n      useEffect(() => {\n        \/\/ Bu kod, bile\u015fen ilk render edildi\u011finde ve 'count' de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r.\n        document.title = <code>Sayac: ${count}<\/code>;\n        console.log('useEffect \u00e7al\u0131\u015ft\u0131:', count);\n\n        \/\/ \u0130ste\u011fe ba\u011fl\u0131 temizlik fonksiyonu\n        return () => {\n          console.log('Temizlik fonksiyonu \u00e7al\u0131\u015ft\u0131. Eski sayac de\u011feri:', count);\n          \/\/ \u00d6rne\u011fin, olay dinleyiciyi kald\u0131rma, zamanlay\u0131c\u0131y\u0131 temizleme\n        };\n      }, [count]); \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi: 'count' de\u011fi\u015fti\u011finde efekti yeniden \u00e7al\u0131\u015ft\u0131r.\n\n      return (\n        <div>\n          <p>Sayac: {count}<\/p>\n          <button onClick={() => setCount(count + 1)}>Artt\u0131r<\/button>\n        <\/div>\n      );\n    }<\/code><\/pre>\n<p>*   <strong>Ba\u011f\u0131ml\u0131l\u0131k Dizisi (Dependency Array):<\/strong><br \/>\n    *   <strong>Bo\u015f Dizi <code>[]<\/code>:<\/strong> Efekt sadece bile\u015fen ilk kez DOM&#8217;a ba\u011fland\u0131\u011f\u0131nda (<code>componentDidMount<\/code> gibi) \u00e7al\u0131\u015f\u0131r ve ayr\u0131ld\u0131\u011f\u0131nda (<code>componentWillUnmount<\/code> gibi) temizlenir. G\u00fcncellemelerde tekrar \u00e7al\u0131\u015fmaz.<br \/>\n    *   <strong>Belirli De\u011fi\u015fkenler <code>[dep1, dep2]<\/code>:<\/strong> Efekt, bile\u015fen ilk kez ba\u011fland\u0131\u011f\u0131nda ve ba\u011f\u0131ml\u0131l\u0131k dizisindeki herhangi bir de\u011fer de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r.<br \/>\n    *   <strong>Dizi Yok (Ba\u011f\u0131ml\u0131l\u0131k Dizisi Belirtilmezse):<\/strong> Efekt, her render i\u015fleminden sonra \u00e7al\u0131\u015f\u0131r. Bu genellikle istenmeyen bir durumdur ve performans sorunlar\u0131na yol a\u00e7abilir. Genellikle bir ba\u011f\u0131ml\u0131l\u0131k dizisi belirtmek en iyi uygulamad\u0131r.<br \/>\n*   <strong>Temizlik Fonksiyonu:<\/strong> <code>useEffect<\/code> hook&#8217;u bir fonksiyon d\u00f6nd\u00fcrebilir. Bu fonksiyon, efekt bir sonraki \u00e7al\u0131\u015ft\u0131\u011f\u0131nda veya bile\u015fen DOM&#8217;dan ayr\u0131ld\u0131\u011f\u0131nda temizlik yapmak i\u00e7in kullan\u0131l\u0131r (<code>componentWillUnmount<\/code> gibi). Bu, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n<p>#### <code>useEffect<\/code> ile Geleneksel Ya\u015fam D\u00f6ng\u00fcs\u00fc Metotlar\u0131n\u0131n Kar\u015f\u0131l\u0131klar\u0131<\/p>\n<p><em>   <strong><code>componentDidMount<\/code>:<\/strong> <code>useEffect(() => { \/<\/em> kod *\/ }, [])<\/code><br \/>\n<em>   <strong><code>componentDidUpdate<\/code>:<\/strong> <code>useEffect(() => { \/<\/em> kod *\/ }, [dep1, dep2, ...])<\/code><br \/>\n<em>   <strong><code>componentWillUnmount<\/code>:<\/strong> <code>useEffect(() => { return () => { \/<\/em> temizlik kodu *\/ }; }, [])<\/code><br \/>\n<em>   <strong><code>componentDidMount<\/code> ve <code>componentDidUpdate<\/code> kombinasyonu:<\/strong> <code>useEffect(() => { \/<\/em> kod <em>\/ })<\/code> (ba\u011f\u0131ml\u0131l\u0131k dizisi yok) veya <code>useEffect(() => { \/<\/em> kod *\/ }, [dep1, dep2, ...])<\/code> (ba\u011f\u0131ml\u0131l\u0131k dizisi ile).<\/p>\n<p>#### Di\u011fer \u0130lgili Hook&#8217;lar<\/p>\n<p><code>useEffect<\/code> en temel ya\u015fam d\u00f6ng\u00fcs\u00fc benzeri hook olsa da, di\u011fer hook&#8217;lar da bile\u015fen davran\u0131\u015f\u0131n\u0131 etkiler:<\/p>\n<p>*   <strong><code>useState<\/code>:<\/strong> Bile\u015fenin state&#8217;ini y\u00f6netir. State de\u011fi\u015fti\u011finde bile\u015fen yeniden render olur.<br \/>\n*   <strong><code>useContext<\/code>:<\/strong> React&#8217;in Context API&#8217;\u0131na eri\u015fim sa\u011flar. Context de\u011fi\u015fti\u011finde bile\u015fen yeniden render olur.<br \/>\n*   <strong><code>useRef<\/code>:<\/strong> DOM elemanlar\u0131na do\u011frudan eri\u015fim sa\u011flamak veya render&#8217;lar aras\u0131nda de\u011fi\u015fmeden kalan mutable (de\u011fi\u015ftirilebilir) bir de\u011fer tutmak i\u00e7in kullan\u0131l\u0131r.<br \/>\n<em>   <strong><code>useLayoutEffect<\/code>:<\/strong> <code>useEffect<\/code>&#8216;e benzer, ancak taray\u0131c\u0131n\u0131n DOM&#8217;u boyamas\u0131ndan <\/em>\u00f6nce* senkron olarak \u00e7al\u0131\u015f\u0131r. Genellikle DOM \u00f6l\u00e7\u00fcmleri veya g\u00f6rsel olarak \u00f6nemli DOM manip\u00fclasyonlar\u0131 i\u00e7in kullan\u0131l\u0131r. Nadiren gereklidir ve dikkatli kullan\u0131lmal\u0131d\u0131r \u00e7\u00fcnk\u00fc performans\u0131 d\u00fc\u015f\u00fcrebilir.<br \/>\n*   <strong><code>useCallback<\/code> ve <code>useMemo<\/code>:<\/strong> Performans optimizasyonlar\u0131 i\u00e7in kullan\u0131l\u0131r. <code>useCallback<\/code> fonksiyonlar\u0131, <code>useMemo<\/code> ise de\u011ferleri memoize ederek gereksiz hesaplamalar\u0131 veya fonksiyon yeniden olu\u015fturmalar\u0131n\u0131 engeller, bu da <code>shouldComponentUpdate<\/code>&#8216;in fonksiyonel bile\u015fenlerdeki kar\u015f\u0131l\u0131\u011f\u0131 gibidir.<\/p>\n<p>### Hata S\u0131n\u0131rlar\u0131 (Error Boundaries) ve Hook&#8217;lar<\/p>\n<p>React Hooks, fonksiyonel bile\u015fenlere state ve yan etki y\u00f6netimi getirirken, hata s\u0131n\u0131rlar\u0131 kavram\u0131 hala s\u0131n\u0131f bile\u015fenlerine \u00f6zg\u00fcd\u00fcr. Yani, bir fonksiyonel bile\u015fen do\u011frudan bir hata s\u0131n\u0131r\u0131 olamaz. E\u011fer uygulaman\u0131zda hata s\u0131n\u0131rlar\u0131na ihtiyac\u0131n\u0131z varsa, bunlar\u0131 hala <code>static getDerivedStateFromError<\/code> ve <code>componentDidCatch<\/code> metotlar\u0131n\u0131 kullanan s\u0131n\u0131f bile\u015fenleri olarak tan\u0131mlaman\u0131z gerekir. Fonksiyonel bile\u015fenler bu hata s\u0131n\u0131rlar\u0131 i\u00e7ine al\u0131narak korunabilir.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Hata s\u0131n\u0131r\u0131 bir s\u0131n\u0131f bile\u015feni olmal\u0131d\u0131r\nclass MyErrorBoundary extends React.Component {\n  state = { hasError: false };\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    console.error(\"Hata Yakaland\u0131 (ErrorBoundary):\", error, errorInfo);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return ;\n    }\n    return this.props.children;\n  }\n}\n\n\/\/ Fonksiyonel bile\u015fen hata s\u0131n\u0131r\u0131 i\u00e7ine al\u0131nabilir\nfunction App() {\n  return (\n    <MyErrorBoundary>\n      <MyFunctionalComponentThatMightFail \/>\n    <\/MyErrorBoundary>\n  );\n}<\/code><\/pre>\n<h3>Sonu\u00e7<\/h3>\n<p>React bile\u015fenlerinin ya\u015fam d\u00f6ng\u00fcs\u00fc fonksiyonlar\u0131, uygulaman\u0131z\u0131n davran\u0131\u015f\u0131n\u0131 kontrol etmek, yan etkileri y\u00f6netmek ve performans\u0131 optimize etmek i\u00e7in temel ara\u00e7lard\u0131r. Geleneksel s\u0131n\u0131f bile\u015fenleri, <code>constructor<\/code>dan <code>componentWillUnmount<\/code>&#8216;a kadar uzanan belirli metotlarla bu ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc a\u00e7\u0131k\u00e7a tan\u0131mlarken, modern React geli\u015ftirmesi fonksiyonel bile\u015fenlere ve React Hooks&#8217;a do\u011fru kaym\u0131\u015ft\u0131r.<\/p>\n<p><code>useEffect<\/code> hook&#8217;u, <code>useState<\/code> ve di\u011fer hook&#8217;lar, fonksiyonel bile\u015fenlerde ayn\u0131 ya\u015fam d\u00f6ng\u00fcs\u00fc yeteneklerini daha esnek ve genellikle daha okunabilir bir \u015fekilde sunar. Yan etkileri y\u00f6netme, kaynaklar\u0131 temizleme ve performans optimizasyonu gibi temel prensipler her iki yakla\u015f\u0131mda da ge\u00e7erlili\u011fini korur.<\/p>\n<p>Hangi yakla\u015f\u0131m\u0131 kullan\u0131rsan\u0131z kullan\u0131n (s\u0131n\u0131f bile\u015fenleri veya fonksiyonel bile\u015fenler), React bile\u015fenlerinin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc derinlemesine anlamak, daha sa\u011flam, bak\u0131m\u0131 kolay ve performansl\u0131 uygulamalar geli\u015ftirmenin anahtar\u0131d\u0131r. \u00d6zellikle <code>useEffect<\/code>&#8216;in ba\u011f\u0131ml\u0131l\u0131k dizisini do\u011fru kullanmak ve temizlik fonksiyonlar\u0131n\u0131 unutmamak, fonksiyonel bile\u015fenlerde bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 ve beklenmeyen davran\u0131\u015flar\u0131 \u00f6nlemek i\u00e7in kritik \u00f6neme sahiptir. React ekosistemi evrildik\u00e7e, Hooks&#8217;u benimsemek ve bu yeni paradigmay\u0131 anlamak, modern React geli\u015ftiricisinin vazge\u00e7ilmez bir becerisi haline gelmi\u015ftir.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React&#8217;te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz\nReact, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in deklaratif ve bile\u015fe","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-35813","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&#039;te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz - 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\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React&#039;te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz\" \/>\n<meta property=\"og:description\" content=\"React&#039;te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in deklaratif ve bile\u015fe\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-04T01:40:44+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=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React&#8217;te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz\",\"datePublished\":\"2025-12-04T01:40:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/\"},\"wordCount\":2595,\"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\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/\",\"name\":\"React'te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-04T01:40:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React&#8217;te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz\"}]},{\"@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'te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz - 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\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/","og_locale":"tr_TR","og_type":"article","og_title":"React'te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz","og_description":"React'te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in deklaratif ve bile\u015fe","og_url":"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-04T01:40:44+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React&#8217;te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz","datePublished":"2025-12-04T01:40:44+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/"},"wordCount":2595,"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\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/","url":"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/","name":"React'te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-04T01:40:44+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/reactte-bilesen-yasam-dongusu-fonksiyonlari-derinlemesine-bir-kilavuz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React&#8217;te Bile\u015fen Ya\u015fam D\u00f6ng\u00fcs\u00fc Fonksiyonlar\u0131: Derinlemesine Bir K\u0131lavuz"}]},{"@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\/35813","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=35813"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35813\/revisions"}],"predecessor-version":[{"id":35814,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35813\/revisions\/35814"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}