{"id":30963,"date":"2025-10-04T02:32:03","date_gmt":"2025-10-03T23:32:03","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/"},"modified":"2025-10-04T02:32:03","modified_gmt":"2025-10-03T23:32:03","slug":"react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/","title":{"rendered":"React Geli\u015ftirmenizi H\u0131zland\u0131r\u0131n: En Faydal\u0131 50 React Snippet"},"content":{"rendered":"<p><body><\/p>\n<p>React projelerinde tekrarlayan kod yazmaktan s\u0131k\u0131ld\u0131n\u0131z m\u0131? Kodlama h\u0131z\u0131n\u0131z\u0131 art\u0131racak ve geli\u015ftirme s\u00fcrecinizi sorunsuz hale getirecek 50 kullan\u0131\u015fl\u0131 React snippet&#8217;\u0131 ile tan\u0131\u015fmaya haz\u0131r olun. Bu makale, her seviyeden geli\u015ftiriciye pratik \u00e7\u00f6z\u00fcmler sunuyor.<\/p>\n<p>Modern web geli\u015ftirme d\u00fcnyas\u0131nda h\u0131z ve verimlilik, ba\u015far\u0131 i\u00e7in vazge\u00e7ilmez iki unsurdur. \u00d6zellikle React gibi bile\u015fen tabanl\u0131 k\u00fct\u00fcphanelerle \u00e7al\u0131\u015f\u0131rken, s\u00fcrekli olarak ayn\u0131 kal\u0131plar\u0131 tekrarlamak hem zaman al\u0131c\u0131 hem de yorucu olabilir. \u0130\u015fte tam bu noktada, \u201csnippet\u201d ad\u0131 verilen k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir kod par\u00e7ac\u0131klar\u0131 devreye giriyor. Peki, React snippet&#8217;lar\u0131 neden bu kadar de\u011ferli ve geli\u015ftirme ak\u0131\u015f\u0131n\u0131zda nas\u0131l devrim yaratabilir?<\/p>\n<p>React snippet&#8217;lar\u0131, genellikle s\u0131k kullan\u0131lan React kal\u0131plar\u0131n\u0131, Hook&#8217;lar\u0131, bile\u015fen yap\u0131lar\u0131n\u0131 veya yard\u0131mc\u0131 i\u015flevleri tek bir komutla otomatik olarak olu\u015fturan k\u0131sa kod \u015fablonlar\u0131d\u0131r. Bir d\u00fc\u011fmeye basarak veya birka\u00e7 karakter yazarak, saatler s\u00fcrecek manuel kodlamadan kurtulabilir ve uygulaman\u0131z\u0131n temelini h\u0131zla olu\u015fturabilirsiniz. Bu, sadece yaz\u0131m hatalar\u0131n\u0131 azaltmakla kalmaz, ayn\u0131 zamanda projelerinizde tutarl\u0131 bir kodlama standard\u0131 sa\u011flaman\u0131za da yard\u0131mc\u0131 olur. \u00d6rne\u011fin, bir <code>useState<\/code> Hook&#8217;u tan\u0131mlamak i\u00e7in her seferinde <code translate=\"no\">import React, { useState } from 'react';<\/code>, <code translate=\"no\">const [state, setState] = useState(initialValue);<\/code> gibi sat\u0131rlar\u0131 yazmak yerine, basit bir k\u0131sayol ile bunlar\u0131 an\u0131nda olu\u015fturabilirsiniz. Bu t\u00fcr otomasyonlar, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k React uygulamalar\u0131 geli\u015ftirirken paha bi\u00e7ilmez bir avantaj sunar.<\/p>\n<p>Bu makale boyunca, React&#8217;in temel yap\u0131 ta\u015flar\u0131ndan ileri seviye Hook&#8217;lar\u0131na, veri y\u00f6netiminden performans optimizasyonuna kadar bir\u00e7ok alanda size yard\u0131mc\u0131 olacak en faydal\u0131 snippet&#8217;lar\u0131 ke\u015ffedece\u011fiz. Yeni ba\u015flayanlar i\u00e7in React&#8217;in temel kavramlar\u0131na h\u0131zl\u0131 bir giri\u015f yaparak ba\u015flayacak, ard\u0131ndan deneyimli geli\u015ftiricilerin bile g\u00f6zden ka\u00e7\u0131rm\u0131\u015f olabilece\u011fi ileri d\u00fczey tekniklere odaklanaca\u011f\u0131z. Amac\u0131m\u0131z, sadece kod \u00f6rnekleri sunmak de\u011fil, ayn\u0131 zamanda bu snippet&#8217;lar\u0131 kendi projelerinizde nas\u0131l etkin bir \u015fekilde kullanabilece\u011finize dair pratik bilgiler ve ger\u00e7ek d\u00fcnya senaryolar\u0131 sunmakt\u0131r. Bu sayede, React geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131r\u0131rken ayn\u0131 zamanda daha temiz, daha s\u00fcrd\u00fcr\u00fclebilir ve daha performansl\u0131 uygulamalar in\u015fa etmenize yard\u0131mc\u0131 olmay\u0131 hedefliyoruz.<\/p>\n<p>React, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in tercih edilen en pop\u00fcler JavaScript k\u00fct\u00fcphanelerinden biridir. Temel olarak, kullan\u0131c\u0131 aray\u00fczlerini (UI) bildirimsel bir yakla\u015f\u0131mla olu\u015fturman\u0131z\u0131 sa\u011flar. Bu da, uygulaman\u0131z\u0131n belirli bir anda nas\u0131l g\u00f6r\u00fcnmesi gerekti\u011fini tan\u0131mlad\u0131\u011f\u0131n\u0131zda, React&#8217;in altta yatan DOM manip\u00fclasyonlar\u0131n\u0131 otomatik olarak halletmesi anlam\u0131na gelir. React&#8217;in kalbinde &#8220;bile\u015fenler&#8221; (components) bulunur. Bu bile\u015fenler, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir kod par\u00e7alar\u0131d\u0131r ve kendi mant\u0131klar\u0131n\u0131 ve g\u00f6r\u00fcn\u00fcmlerini kaps\u00fcllerler. \u00d6rne\u011fin, bir &#8220;Button&#8221; bile\u015feni, bir &#8220;Navbar&#8221; bile\u015feni veya bir &#8220;UserProfile&#8221; bile\u015feni d\u00fc\u015f\u00fcnebilirsiniz. Bu bile\u015fenler, JSX ad\u0131 verilen JavaScript s\u00f6zdizimi uzant\u0131s\u0131yla yaz\u0131l\u0131r. JSX, JavaScript i\u00e7inde HTML benzeri yap\u0131lar yazman\u0131za olanak tan\u0131r ve bu da kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc tan\u0131mlamay\u0131 sezgisel hale getirir. \u00d6rne\u011fin: <\/p>\n<pre><code class=\"language-jsx\">function Merhaba({ isim }) {\n  return <h1>Merhaba, {isim}!<\/h1>;\n}\n<\/pre>\n<p><\/code> Bu \u00f6rnekte, <code translate=\"no\">Merhaba<\/code> adl\u0131 bir fonksiyonel bile\u015fen g\u00f6r\u00fcyoruz. <code translate=\"no\">isim<\/code> bir \"prop\"tur, yani \u00fcst bile\u015fenden bu bile\u015fene aktar\u0131lan veridir. Bile\u015fenlerin durumu (state) ise, zamanla de\u011fi\u015febilen ve bile\u015fenin yeniden render edilmesine neden olabilen dahili verilerdir. React Hook'lar\u0131 (<code translate=\"no\">useState<\/code>, <code translate=\"no\">useEffect<\/code> vb.) bu durumu ve di\u011fer React \u00f6zelliklerini fonksiyonel bile\u015fenlerde kullanman\u0131n yolunu sunar. \u015eimdi, bu temel yap\u0131 ta\u015flar\u0131n\u0131 daha verimli kullanmam\u0131z\u0131 sa\u011flayacak pratik snippet'lara dalal\u0131m.<\/p>\n<h2>Temel React Hook'lar\u0131 ile Verimli Kodlama: useState ve useEffect'in G\u00fcc\u00fc<\/h2>\n<p>React'in Hook'lar\u0131, fonksiyonel bile\u015fenlerde durum (state) ve ya\u015fam d\u00f6ng\u00fcs\u00fc \u00f6zelliklerini kullanmam\u0131z\u0131 sa\u011flayarak geli\u015ftirme \u015feklimizde devrim yaratt\u0131. <code translate=\"no\">useState<\/code> ve <code translate=\"no\">useEffect<\/code>, bu Hook'lar\u0131n temelini olu\u015fturur ve g\u00fcnl\u00fck React geli\u015ftirme prati\u011fimizin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Bu b\u00f6l\u00fcmde, bu temel Hook'lar\u0131 daha h\u0131zl\u0131 ve hatas\u0131z bir \u015fekilde entegre etmenizi sa\u011flayacak snippet'lar\u0131 inceleyece\u011fiz.<\/p>\n<h3>useState Snippet'lar\u0131: Bile\u015fen Durumunu Kolayca Y\u00f6netin<\/h3>\n<p><code translate=\"no\">useState<\/code>, bir fonksiyonel bile\u015fende durum eklemenizi sa\u011flayan Hook'tur. Bir de\u011feri ve bu de\u011feri g\u00fcncelleyecek bir fonksiyonu d\u00f6nd\u00fcr\u00fcr. \u0130\u015fte tipik bir <code translate=\"no\">useState<\/code> kullan\u0131m senaryosu i\u00e7in snippet:<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0); \/\/ SFN: stateFunctionNumber\n  \/\/ const [data, setData] = useState({}); \/\/ SFO: stateFunctionObject\n  \/\/ const [items, setItems] = useState([]); \/\/ SFA: stateFunctionArray\n  \/\/ const [isVisible, setIsVisible] = useState(false); \/\/ SFB: stateFunctionBoolean\n\n  const increment = () => {\n    setCount(prevCount => prevCount + 1);\n  };\n\n  return (\n    <div>\n      <p>Saya\u00e7: {count}<\/p>\n      <button onClick={increment}>Art\u0131r<\/button>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu snippet, bir say\u0131sal durum (<code translate=\"no\">count<\/code>) ve onu g\u00fcncellemek i\u00e7in bir fonksiyon (<code translate=\"no\">setCount<\/code>) tan\u0131mlar. \u00c7o\u011fu IDE uzant\u0131s\u0131 (\u00f6rne\u011fin VS Code i\u00e7in \"ES7 React\/Redux\/GraphQL\/React-Native snippets\"), <code translate=\"no\">usf<\/code> yaz\u0131p Tab tu\u015funa basarak benzer bir yap\u0131y\u0131 otomatik olarak olu\u015fturman\u0131za olanak tan\u0131r. <code translate=\"no\">useState<\/code> ile ilgili di\u011fer faydal\u0131 snippet'lar, ba\u015flang\u0131\u00e7 de\u011feri olarak nesneler, diziler veya boolean de\u011ferleri tan\u0131mlaman\u0131za yard\u0131mc\u0131 olabilir. \u00d6rne\u011fin, bir boolean durumu i\u00e7in <code translate=\"no\">usb<\/code> (useStateBoolean), bir nesne i\u00e7in <code translate=\"no\">uso<\/code> (useStateObject) gibi k\u0131sayollar mevcuttur. Bu sayede, her seferinde tam s\u00f6zdizimini yazmak yerine, sadece birka\u00e7 tu\u015f darbesiyle ihtiyac\u0131n\u0131z olan durum tan\u0131m\u0131n\u0131 h\u0131zl\u0131ca olu\u015fturabilirsiniz.<\/p>\n<h3>useEffect Snippet'lar\u0131: Yan Etkileri Verimli \u015eekilde Y\u00f6netin<\/h3>\n<p><code translate=\"no\">useEffect<\/code> Hook'u, bile\u015fen ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131n (\u00f6rne\u011fin <code translate=\"no\">componentDidMount<\/code>, <code translate=\"no\">componentDidUpdate<\/code>, <code translate=\"no\">componentWillUnmount<\/code>) fonksiyonel bile\u015fenlerdeki kar\u015f\u0131l\u0131\u011f\u0131d\u0131r. Veri \u00e7ekme, DOM manip\u00fclasyonlar\u0131 veya aboneliklerin ayarlanmas\u0131 gibi \"yan etkileri\" y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. \u0130\u015fte temel bir <code translate=\"no\">useEffect<\/code> snippet'\u0131:<\/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  const [error, setError] = useState(null);\n\n  useEffect(() => { \/\/ USEF: useEffect function\n    const fetchData = async () => {\n      try {\n        const response = await fetch('https:\/\/api.example.com\/items');\n        if (!response.ok) {\n          throw new Error(<code>HTTP error! status: ${response.status}<\/code>);\n        }\n        const result = await response.json();\n        setData(result);\n      } catch (e) {\n        setError(e);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchData();\n\n    \/\/ Opsiyonel temizleme fonksiyonu (componentWillUnmount)\n    return () => {\n      \/\/ \u00d6rne\u011fin, bir aboneli\u011fi temizle\n      console.log('Bile\u015fen ayr\u0131ld\u0131, temizlik yap\u0131l\u0131yor...');\n    };\n  }, []); \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi bo\u015f oldu\u011fu i\u00e7in sadece bir kere \u00e7al\u0131\u015f\u0131r (componentDidMount)\n\n  if (loading) return <p>Veriler y\u00fckleniyor...<\/p>;\n  if (error) return <p>Hata: {error.message}<\/p>;\n\n  return (\n    <div>\n      <h2>\u00c7ekilen Veriler<\/h2>\n      <pre>{JSON.stringify(data, null, 2)}<\/pre>\n<\/p><\/div>\n<p>  );<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Bu snippet, bir API'den veri \u00e7ekme ve y\u00fckleme\/hata durumlar\u0131n\u0131 y\u00f6netme senaryosunu g\u00f6stermektedir. <code translate=\"no\">useEffect<\/code>'in ba\u011f\u0131ml\u0131l\u0131k dizisi (ikinci arg\u00fcman\u0131) olduk\u00e7a \u00f6nemlidir. Bo\u015f bir dizi <code translate=\"no\">[]<\/code> ile, efektin yaln\u0131zca bile\u015fenin ilk render'\u0131nda \u00e7al\u0131\u015fmas\u0131n\u0131 (<code>componentDidMount<\/code> benzeri) sa\u011flars\u0131n\u0131z. E\u011fer ba\u011f\u0131ml\u0131l\u0131klar\u0131 eklerseniz, bu ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde efekt yeniden \u00e7al\u0131\u015f\u0131r (<code>componentDidUpdate<\/code> benzeri). Temizleme fonksiyonu ise bile\u015fen DOM'dan kald\u0131r\u0131ld\u0131\u011f\u0131nda (<code>componentWillUnmount<\/code> benzeri) \u00e7al\u0131\u015f\u0131r ve bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in \u00f6nemlidir. <code translate=\"no\">usef<\/code> veya <code translate=\"no\">useEffect<\/code> gibi k\u0131sayollar, bu yap\u0131y\u0131 saniyeler i\u00e7inde olu\u015fturman\u0131za olanak tan\u0131r. Ayr\u0131ca, belirli bir duruma veya prop'a ba\u011fl\u0131 olarak \u00e7al\u0131\u015fan <code translate=\"no\">useEffect<\/code> i\u00e7in de h\u0131zl\u0131 snippet'lar bulmak m\u00fcmk\u00fcnd\u00fcr, bu da \u00f6zellikle performans optimizasyonu veya belirli ko\u015fullarda yan etkileri tetikleme ihtiyac\u0131nda b\u00fcy\u00fck kolayl\u0131k sa\u011flar.<\/p>\n<div class=\"expert-tip\">\n        Uzman \u0130pucu: Temizleme fonksiyonunu asla unutmay\u0131n! \u00d6zellikle harici kaynaklara (WebSocket, olay dinleyicileri) abone oluyorsan\u0131z, bellekte s\u0131z\u0131nt\u0131 olu\u015fmas\u0131n\u0131 engellemek i\u00e7in <code translate=\"no\">useEffect<\/code>'in return fonksiyonunda bu abonelikleri kald\u0131rd\u0131\u011f\u0131n\u0131zdan emin olun.\n    <\/div>\n<h3>Vaka Analizi: Dinamik Ba\u015fl\u0131kl\u0131 Bir Saya\u00e7 Bile\u015feni<\/h3>\n<p>Hem <code translate=\"no\">useState<\/code> hem de <code translate=\"no\">useEffect<\/code>'i kullanarak dinamik bir ba\u015fl\u0131k ve saya\u00e7 i\u00e7eren bir bile\u015fen geli\u015ftirelim. Bu senaryo, kullan\u0131c\u0131 etkile\u015fimine g\u00f6re durumun nas\u0131l de\u011fi\u015fti\u011fini ve bu de\u011fi\u015fimin yan etkiler arac\u0131l\u0131\u011f\u0131yla taray\u0131c\u0131 ba\u015fl\u0131\u011f\u0131n\u0131 nas\u0131l g\u00fcncelledi\u011fini g\u00f6sterir.<\/p>\n<pre><code class=\"language-jsx\">import React, { useState, useEffect } from 'react';\n\nfunction DynamicCounter() {\n  const [count, setCount] = useState(0);\n  const [isCounting, setIsCounting] = useState(false);\n\n  \/\/ Sayac\u0131n de\u011fi\u015fti\u011finde taray\u0131c\u0131 ba\u015fl\u0131\u011f\u0131n\u0131 g\u00fcncelleme\n  useEffect(() => {\n    document.title = <code>Saya\u00e7: ${count}<\/code>;\n  }, [count]); \/\/ count de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015f\u0131r\n\n  \/\/ Sayac\u0131 otomatik art\u0131rma\/durdurma\n  useEffect(() => {\n    let intervalId;\n    if (isCounting) {\n      intervalId = setInterval(() => {\n        setCount(prevCount => prevCount + 1);\n      }, 1000);\n    }\n    return () => {\n      if (intervalId) {\n        clearInterval(intervalId);\n      }\n    };\n  }, [isCounting]); \/\/ isCounting de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015f\u0131r\n\n  return (\n    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', maxWidth: '400px', margin: '20px auto' }}>\n      <h2>Dinamik Saya\u00e7<\/h2>\n      <p>Mevcut Say\u0131: <strong>{count}<\/strong><\/p>\n      <button onClick={() => setCount(prevCount => prevCount + 1)} style={{ marginRight: '10px', padding: '10px 15px', borderRadius: '5px', border: 'none', backgroundColor: '#4CAF50', color: 'white', cursor: 'pointer' }}>\n        Man\u00fcel Art\u0131r\n      <\/button>\n      <button onClick={() => setIsCounting(!isCounting)} style={{ padding: '10px 15px', borderRadius: '5px', border: 'none', backgroundColor: isCounting ? '#f44336' : '#2196F3', color: 'white', cursor: 'pointer' }}>\n        {isCounting ? 'Durdur' : 'Otomatik Ba\u015flat'}\n      <\/button>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, ilk <code translate=\"no\">useEffect<\/code>, <code translate=\"no\">count<\/code> durumu de\u011fi\u015fti\u011finde <code translate=\"no\">document.title<\/code>'\u0131 g\u00fcnceller. \u0130kinci <code translate=\"no\">useEffect<\/code> ise, <code translate=\"no\">isCounting<\/code> durumuna ba\u011fl\u0131 olarak bir interval ba\u015flat\u0131r veya temizler. Bu, hem duruma ba\u011fl\u0131 yan etkileri hem de temizleme fonksiyonlar\u0131n\u0131n nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 net bir \u015fekilde g\u00f6stermektedir. Bu t\u00fcr bir bile\u015feni h\u0131zl\u0131ca olu\u015fturmak i\u00e7in <code translate=\"no\">usf<\/code>, <code translate=\"no\">usef<\/code> gibi snippet'lar\u0131 kullanarak ba\u015flang\u0131\u00e7 kodunu saniyeler i\u00e7inde haz\u0131r hale getirebilirsiniz.<\/p>\n<h2>\u0130leri Seviye Hook'lar ve Performans Optimizasyonu: useMemo, useCallback ve useRef ile \u00c7al\u0131\u015fmak<\/h2>\n<p>React uygulamalar\u0131n\u0131z\u0131n performans\u0131, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. \u00d6zellikle b\u00fcy\u00fck ve veri yo\u011fun uygulamalarda, gereksiz yeniden render (re-render) i\u015flemlerini minimize etmek, uygulaman\u0131z\u0131n ak\u0131c\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. React, bu t\u00fcr optimizasyonlar i\u00e7in <code translate=\"no\">useMemo<\/code>, <code translate=\"no\">useCallback<\/code> ve <code translate=\"no\">useRef<\/code> gibi ileri seviye Hook'lar sunar. Bu b\u00f6l\u00fcmde, bu Hook'lar\u0131n ne i\u015fe yarad\u0131\u011f\u0131n\u0131 ve onlarla birlikte kullanabilece\u011finiz pratik snippet'lar\u0131 ele alaca\u011f\u0131z.<\/p>\n<h3>useMemo ile Pahal\u0131 Hesaplamalar\u0131 \u00d6n Belle\u011fe Al\u0131n<\/h3>\n<p><code translate=\"no\">useMemo<\/code> Hook'u, pahal\u0131ya mal olan bir hesaplaman\u0131n sonucunu \u00f6n belle\u011fe alman\u0131z\u0131 (memoize etmenizi) sa\u011flar. Yaln\u0131zca ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\u011finde yeniden hesaplama yapar. Bu, \u00f6zellikle b\u00fcy\u00fck veri k\u00fcmeleri \u00fczerinde filtreleme, s\u0131ralama veya karma\u015f\u0131k d\u00f6n\u00fc\u015ft\u00fcrme i\u015flemleri yaparken performans\u0131 art\u0131rabilir. Bir <code translate=\"no\">useMemo<\/code> snippet'\u0131 genellikle \u015fu \u015fekildedir:<\/p>\n<pre><code class=\"language-jsx\">import React, { useMemo, useState } from 'react';\n\nfunction ProductList({ products, filterTerm }) {\n  const [searchTerm, setSearchTerm] = useState(filterTerm || '');\n\n  \/\/ useMemo ile filtrelenmi\u015f \u00fcr\u00fcn listesini \u00f6n belle\u011fe al\n  const filteredProducts = useMemo(() => { \/\/ UM: useMemo\n    console.log('\u00dcr\u00fcnler filtreleniyor...'); \/\/ Sadece ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fince \u00e7al\u0131\u015f\u0131r\n    return products.filter(product =>\n      product.name.toLowerCase().includes(searchTerm.toLowerCase())\n    );\n  }, [products, searchTerm]); \/\/ products veya searchTerm de\u011fi\u015fti\u011finde yeniden hesapla\n\n  return (\n    <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px', maxWidth: '600px', margin: '20px auto' }}>\n      <h3>\u00dcr\u00fcn Listesi<\/h3>\n      <input\n        type=\"text\"\n        placeholder=\"\u00dcr\u00fcn Ara...\"\n        value={searchTerm}\n        onChange={(e) => setSearchTerm(e.target.value)}\n        style={{ width: '100%', padding: '10px', marginBottom: '20px', borderRadius: '4px', border: '1px solid #ccc' }}\n      \/>\n      <ul style={{ listStyle: 'none', padding: 0 }}>\n        {filteredProducts.map(product => (\n          <li key={product.id} style={{ padding: '8px 0', borderBottom: '1px solid #eee' }}>\n            {product.name} - ${product.price}\n          <\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu <code translate=\"no\">useMemo<\/code> snippet'\u0131, <code translate=\"no\">products<\/code> veya <code translate=\"no\">searchTerm<\/code> de\u011fi\u015fmedi\u011fi s\u00fcrece filtreleme i\u015flemini tekrar \u00e7al\u0131\u015ft\u0131rmaz. Bu sayede, bile\u015fen yeniden render edildi\u011finde (\u00f6rne\u011fin ba\u015fka bir durum de\u011fi\u015fti\u011finde) gereksiz CPU d\u00f6ng\u00fcleri harcanmaz. <code translate=\"no\">um<\/code> gibi bir k\u0131sayol, bu yap\u0131y\u0131 kolayca olu\u015fturman\u0131z\u0131 sa\u011flar.<\/p>\n<h3>useCallback ile Fonksiyonlar\u0131 \u00d6n Belle\u011fe Al\u0131n<\/h3>\n<p><code translate=\"no\">useCallback<\/code> Hook'u, <code translate=\"no\">useMemo<\/code>'ya benzer ancak bir fonksiyonu \u00f6n belle\u011fe almak i\u00e7in kullan\u0131l\u0131r. Bu, \u00f6zellikle alt bile\u015fenlere prop olarak ge\u00e7irilen fonksiyonlar\u0131n gereksiz yere yeniden olu\u015fturulmas\u0131n\u0131 engeller. Bu durum, <code translate=\"no\">React.memo<\/code> ile optimize edilmi\u015f alt bile\u015fenlerin bile\u015fen prop'u de\u011fi\u015fmedi\u011fi s\u00fcrece yeniden render edilmesini engellemeye yard\u0131mc\u0131 olur. \u0130\u015fte bir <code translate=\"no\">useCallback<\/code> \u00f6rne\u011fi:<\/p>\n<pre><code class=\"language-jsx\">import React, { useState, useCallback } from 'react';\n\n\/\/ Alt bile\u015fen (React.memo ile optimize edilmi\u015f)\nconst ChildComponent = React.memo(({ onClick }) => {\n  console.log('ChildComponent render edildi');\n  return <button onClick={onClick}>\u00c7ocuk Butonu<\/button>;\n});\n\nfunction ParentComponent() {\n  const [count, setCount] = useState(0);\n  const [text, setText] = useState('');\n\n  const handleClick = useCallback(() => { \/\/ UC: useCallback\n    setCount(prevCount => prevCount + 1);\n  }, []); \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi bo\u015f oldu\u011fu i\u00e7in bu fonksiyon sadece bir kere olu\u015fur\n\n  const handleTextChange = (e) => {\n    setText(e.target.value);\n  };\n\n  return (\n    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', maxWidth: '400px', margin: '20px auto' }}>\n      <h3>Parent Component<\/h3>\n      <p>Saya\u00e7: {count}<\/p>\n      <input type=\"text\" value={text} onChange={handleTextChange} style={{ marginBottom: '15px', padding: '8px', width: '100%', borderRadius: '4px', border: '1px solid #ddd' }} \/>\n      <ChildComponent onClick={handleClick} \/>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, <code translate=\"no\">handleClick<\/code> fonksiyonu <code translate=\"no\">useCallback<\/code> ile \u00f6n belle\u011fe al\u0131nm\u0131\u015ft\u0131r. <code translate=\"no\">ParentComponent<\/code> yeniden render edildi\u011finde (\u00f6rne\u011fin <code translate=\"no\">text<\/code> durumu de\u011fi\u015fti\u011finde), <code translate=\"no\">handleClick<\/code> fonksiyonunun referans\u0131 de\u011fi\u015fmez. Bu sayede, <code translate=\"no\">React.memo<\/code> ile optimize edilmi\u015f <code translate=\"no\">ChildComponent<\/code> gereksiz yere yeniden render edilmez. <code translate=\"no\">ucall<\/code> veya <code translate=\"no\">usecallback<\/code> gibi k\u0131sayollar bu yap\u0131y\u0131 h\u0131zl\u0131ca olu\u015fturur.<\/p>\n<h3>useRef ile DOM Elementlerine ve De\u011fi\u015fken De\u011ferlere Eri\u015fin<\/h3>\n<p><code translate=\"no\">useRef<\/code> Hook'u, do\u011frudan DOM elemanlar\u0131na eri\u015fmek veya bile\u015fen render'lar\u0131 aras\u0131nda kal\u0131c\u0131 olan de\u011fi\u015fken bir de\u011feri tutmak i\u00e7in kullan\u0131l\u0131r. <code translate=\"no\">useState<\/code>'den farkl\u0131 olarak, <code translate=\"no\">useRef<\/code> de\u011feri de\u011fi\u015fti\u011finde bile\u015fenin yeniden render edilmesine neden olmaz. \u0130\u015fte bir <code translate=\"no\">useRef<\/code> kullan\u0131m senaryosu:<\/p>\n<pre><code class=\"language-jsx\">import React, { useRef } from 'react';\n\nfunction FocusInput() {\n  const inputRef = useRef(null); \/\/ URF: useRef\n\n  const focusInput = () => {\n    inputRef.current.focus(); \/\/ DOM elementine do\u011frudan eri\u015fim\n  };\n\n  return (\n    <div style={{ padding: '20px', border: '1px solid #eee', borderRadius: '8px', maxWidth: '300px', margin: '20px auto' }}>\n      <h3>Input'u Odakla<\/h3>\n      <input type=\"text\" ref={inputRef} style={{ padding: '8px', width: '100%', marginBottom: '15px', borderRadius: '4px', border: '1px solid #ccc' }} \/>\n      <button onClick={focusInput} style={{ padding: '10px 15px', borderRadius: '5px', border: 'none', backgroundColor: '#007bff', color: 'white', cursor: 'pointer' }}>\n        Input'a Odaklan\n      <\/button>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu snippet'ta, <code translate=\"no\">inputRef<\/code> de\u011fi\u015fkeni bir <code translate=\"no\">input<\/code> eleman\u0131na ba\u011flan\u0131r. <code translate=\"no\">focusInput<\/code> fonksiyonu \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, <code translate=\"no\">inputRef.current.focus()<\/code> ile do\u011frudan DOM eleman\u0131na eri\u015filerek ona odaklan\u0131l\u0131r. <code translate=\"no\">ur<\/code> gibi k\u0131sayollar, <code translate=\"no\">useRef<\/code> tan\u0131mlamalar\u0131n\u0131 h\u0131zland\u0131r\u0131r.<\/p>\n<div class=\"expert-tip\">\n        Uzman \u0130pucu: <code translate=\"no\">useRef<\/code>'i sadece DOM manip\u00fclasyonlar\u0131 i\u00e7in de\u011fil, ayn\u0131 zamanda bile\u015fen render'lar\u0131 aras\u0131nda kal\u0131c\u0131 olmas\u0131 gereken ancak yeniden render tetiklememesi gereken de\u011ferleri (\u00f6rne\u011fin, bir zamanlay\u0131c\u0131 ID'si) depolamak i\u00e7in de kullanabilirsiniz.\n    <\/div>\n<h3>Vaka Analizi: Optimize Edilmi\u015f Bir Filtreleme Bile\u015feni<\/h3>\n<p>Bir \u00fcr\u00fcn listesini filtreleyen bir bile\u015fen d\u00fc\u015f\u00fcnelim. Hem <code translate=\"no\">useMemo<\/code> hem de <code translate=\"no\">useCallback<\/code> kullanarak performans\u0131 nas\u0131l optimize edebilece\u011fimize bakal\u0131m. Bu \u00f6rnek, pahal\u0131 filtreleme i\u015flemini ve alt bile\u015fenlere ge\u00e7en callback fonksiyonunu optimize eder.<\/p>\n<pre><code class=\"language-jsx\">import React, { useState, useMemo, useCallback } from 'react';\n\nconst ProductItem = React.memo(({ product, onSelect }) => {\n  console.log(<code>ProductItem ${product.name} render edildi<\/code>);\n  return (\n    <li style={{ padding: '10px', borderBottom: '1px solid #eee', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n      {product.name} - ${product.price}\n      <button onClick={() => onSelect(product.id)} style={{ padding: '5px 10px', borderRadius: '4px', border: '1px solid #007bff', backgroundColor: 'white', color: '#007bff', cursor: 'pointer' }}>\n        Se\u00e7\n      <\/button>\n    <\/li>\n  );\n});\n\nfunction OptimizedProductFilter({ initialProducts }) {\n  const [searchTerm, setSearchTerm] = useState('');\n  const [selectedProductId, setSelectedProductId] = useState(null);\n\n  const handleSearchChange = (e) => {\n    setSearchTerm(e.target.value);\n  };\n\n  \/\/ Pahal\u0131 filtreleme i\u015flemini useMemo ile \u00f6n belle\u011fe al\n  const filteredProducts = useMemo(() => {\n    console.log('\u00dcr\u00fcnler useMemo ile filtreleniyor...');\n    if (!searchTerm) {\n      return initialProducts;\n    }\n    return initialProducts.filter(product =>\n      product.name.toLowerCase().includes(searchTerm.toLowerCase())\n    );\n  }, [initialProducts, searchTerm]); \/\/ initialProducts veya searchTerm de\u011fi\u015fti\u011finde yeniden hesapla\n\n  \/\/ onSelect fonksiyonunu useCallback ile \u00f6n belle\u011fe al\n  const handleProductSelect = useCallback((productId) => {\n    console.log(<code>\u00dcr\u00fcn se\u00e7ildi: ${productId}<\/code>);\n    setSelectedProductId(productId);\n  }, []); \/\/ Ba\u011f\u0131ml\u0131l\u0131k yok, bu fonksiyon sadece bir kere olu\u015fur\n\n  return (\n    <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px', maxWidth: '600px', margin: '20px auto' }}>\n      <h2>Optimize Edilmi\u015f \u00dcr\u00fcn Filtreleme<\/h2>\n      <input\n        type=\"text\"\n        placeholder=\"\u00dcr\u00fcn ad\u0131 ile filtrele...\"\n        value={searchTerm}\n        onChange={handleSearchChange}\n        style={{ width: '100%', padding: '10px', marginBottom: '20px', borderRadius: '4px', border: '1px solid #ccc' }}\n      \/>\n      <p>Se\u00e7ilen \u00dcr\u00fcn ID: {selectedProductId || 'Yok'}<\/p>\n      <ul style={{ listStyle: 'none', padding: 0 }}>\n        {filteredProducts.map(product => (\n          <ProductItem key={product.id} product={product} onSelect={handleProductSelect} \/>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu vaka analizinde, <code translate=\"no\">filteredProducts<\/code> listesi sadece <code translate=\"no\">initialProducts<\/code> veya <code translate=\"no\">searchTerm<\/code> de\u011fi\u015fti\u011finde yeniden hesaplan\u0131r. <code translate=\"no\">handleProductSelect<\/code> fonksiyonu ise <code translate=\"no\">useCallback<\/code> sayesinde tek bir referansa sahip olur ve <code translate=\"no\">OptimizedProductFilter<\/code> bile\u015feni yeniden render edildi\u011finde bile yeni bir fonksiyon olarak olu\u015fturulmaz. Bu da <code translate=\"no\">ProductItem<\/code> bile\u015fenlerinin, <code translate=\"no\">product<\/code> prop'u veya <code translate=\"no\">onSelect<\/code> prop'u ger\u00e7ekten de\u011fi\u015fmedi\u011fi s\u00fcrece gereksiz yere yeniden render edilmesini engeller. Bu t\u00fcr optimizasyonlar, \u00f6zellikle y\u00fczlerce veya binlerce \u00f6\u011fe i\u00e7eren listelerde ve karma\u015f\u0131k UI'larda fark yarat\u0131r.<\/p>\n<h2>Bile\u015fenler Aras\u0131 Veri Ak\u0131\u015f\u0131 ve Y\u00f6netimi: Context API ve Prop Drilling \u00c7\u00f6z\u00fcmleri<\/h2>\n<p>React uygulamalar\u0131 b\u00fcy\u00fcd\u00fck\u00e7e, bile\u015fenler aras\u0131 veri payla\u015f\u0131m\u0131 karma\u015f\u0131k hale gelebilir. \u00d6zellikle, bir verinin bir\u00e7ok katmanl\u0131 bile\u015fenden ge\u00e7erek a\u015fa\u011f\u0131ya do\u011fru aktar\u0131lmas\u0131 anlam\u0131na gelen \"prop drilling\" sorunu s\u0131k\u00e7a kar\u015f\u0131m\u0131za \u00e7\u0131kar. Bu durum, kodu okunmas\u0131 ve bak\u0131m\u0131 zor hale getirebilir. React'in <code translate=\"no\">Context API<\/code>'si, bu soruna zarif bir \u00e7\u00f6z\u00fcm sunar. Bu b\u00f6l\u00fcmde, <code translate=\"no\">Context API<\/code>'nin temelini ve onunla birlikte kullanabilece\u011finiz pratik snippet'lar\u0131 inceleyece\u011fiz.<\/p>\n<h3>Context API Temelleri: Provider ve Consumer\/useContext<\/h3>\n<p><code translate=\"no\">Context API<\/code>, verileri bile\u015fen a\u011fac\u0131nda manuel olarak prop'larla ge\u00e7meden, do\u011frudan payla\u015fman\u0131za olanak tan\u0131r. Genellikle tema tercihleri, kullan\u0131c\u0131 kimlik do\u011frulama durumu veya dil ayarlar\u0131 gibi global veriler i\u00e7in kullan\u0131l\u0131r. Bir Context olu\u015fturmak ve kullanmak i\u00e7in temel ad\u0131mlar \u015funlard\u0131r:<\/p>\n<ol>\n<li><code translate=\"no\">createContext<\/code> ile bir Context olu\u015fturun.<\/li>\n<li>Verileri sa\u011flayacak bir <code translate=\"no\">Provider<\/code> bile\u015feni kullan\u0131n.<\/li>\n<li>Verilere eri\u015fmek i\u00e7in <code translate=\"no\">useContext<\/code> Hook'unu (fonksiyonel bile\u015fenlerde) veya <code translate=\"no\">Consumer<\/code> bile\u015fenini (s\u0131n\u0131f bile\u015fenlerinde) kullan\u0131n.<\/li>\n<\/ol>\n<p>\u0130\u015fte bir tema Context'i i\u00e7in temel snippet'lar:<\/p>\n<pre><code class=\"language-jsx\">\/\/ 1. Context Olu\u015fturma (e.g., ThemeContext.js)\nimport React, { createContext, useState, useContext } from 'react';\n\nconst ThemeContext = createContext(null); \/\/ RTC: React Theme Context\n\nexport const ThemeProvider = ({ children }) => { \/\/ RTCP: React Theme Context Provider\n  const [theme, setTheme] = useState('light');\n\n  const toggleTheme = () => {\n    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));\n  };\n\n  const contextValue = { theme, toggleTheme };\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      {children}\n    <\/ThemeContext.Provider>\n  );\n};\n\n\/\/ 2. Context'i Kullanma (e.g., ThemeToggleButton.js)\nexport const useTheme = () => { \/\/ RTCC: React Theme Context Consumer (custom hook)\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n};\n<\/pre>\n<p><\/code><\/p>\n<p>Bu snippet'lar, bir tema Context'i olu\u015fturman\u0131n ve onu bir <code translate=\"no\">ThemeProvider<\/code> arac\u0131l\u0131\u011f\u0131yla uygulaman\u0131n geri kalan\u0131na sa\u011flaman\u0131n temel yap\u0131s\u0131n\u0131 g\u00f6sterir. Ayr\u0131ca, <code translate=\"no\">useTheme<\/code> ad\u0131nda basit bir custom hook olu\u015fturarak Context'e eri\u015fimi kolayla\u015ft\u0131r\u0131r. <code translate=\"no\">rtc<\/code> (React Theme Context) veya <code translate=\"no\">rcp<\/code> (React Context Provider) gibi k\u0131sayollar, bu boilerplate kodu h\u0131zla olu\u015fturman\u0131za yard\u0131mc\u0131 olabilir.<\/p>\n<h3>Vaka Analizi: Global Tema Y\u00f6netimi ile Prop Drilling'e Son<\/h3>\n<p>Bir uygulaman\u0131n tema ayar\u0131n\u0131 (a\u00e7\u0131k\/koyu mod) global olarak y\u00f6netti\u011fimizi varsayal\u0131m. Bu ayar, bir\u00e7ok farkl\u0131 bile\u015fen taraf\u0131ndan kullan\u0131lacak ve de\u011fi\u015ftirilebilecektir. <code translate=\"no\">Context API<\/code>'yi kullanarak bu durumu nas\u0131l y\u00f6netece\u011fimizi g\u00f6relim.<\/p>\n<pre><code class=\"language-jsx\">\/\/ App.js\nimport React from 'react';\nimport { ThemeProvider, useTheme } from '.\/ThemeContext'; \/\/ ThemeContext.js'den import\nimport { ReactComponent as SunIcon } from '.\/icons\/sun.svg'; \/\/ SVG ikonlar (\u00f6rnek)\nimport { ReactComponent as MoonIcon } from '.\/icons\/moon.svg'; \/\/ SVG ikonlar (\u00f6rnek)\n\n\/\/ Tema d\u00fc\u011fmesini i\u00e7eren bir alt bile\u015fen\nfunction ThemeToggleButton() {\n  const { theme, toggleTheme } = useTheme();\n\n  return (\n    <button\n      onClick={toggleTheme}\n      style={{\n        padding: '10px 15px',\n        borderRadius: '5px',\n        border: 'none',\n        backgroundColor: theme === 'light' ? '#f0f0f0' : '#333',\n        color: theme === 'light' ? '#333' : 'white',\n        cursor: 'pointer',\n        display: 'flex',\n        alignItems: 'center',\n        gap: '8px'\n      }}\n    >\n      {theme === 'light' ? <MoonIcon style={{ width: '20px', height: '20px', fill: '#333' }} \/> : <SunIcon style={{ width: '20px', height: '20px', fill: 'white' }} \/>}\n      {theme === 'light' ? 'Koyu Moda Ge\u00e7' : 'A\u00e7\u0131k Moda Ge\u00e7'}\n    <\/button>\n  );\n}\n\n\/\/ Uygulaman\u0131n ana i\u00e7eri\u011fini g\u00f6steren bir bile\u015fen\nfunction Content() {\n  const { theme } = useTheme();\n  return (\n    <div style={{\n      backgroundColor: theme === 'light' ? 'white' : '#222',\n      color: theme === 'light' ? '#333' : 'white',\n      minHeight: '200px',\n      padding: '20px',\n      borderRadius: '8px',\n      marginTop: '20px'\n    }}>\n      <p>Bu metin {theme === 'light' ? 'a\u00e7\u0131k' : 'koyu'} tema ile g\u00f6r\u00fcnt\u00fclendi.<\/p>\n    <\/div>\n  );\n}\n\n\/\/ Ana Uygulama Bile\u015feni\nfunction App() {\n  return (\n    <ThemeProvider>\n      <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '800px', margin: '40px auto', padding: '20px', border: '1px solid #ddd', borderRadius: '10px' }}>\n        <h1>Global Tema Y\u00f6netimi<\/h1>\n        <ThemeToggleButton \/>\n        <Content \/>\n        <div style={{ marginTop: '30px', paddingTop: '20px', borderTop: '1px dashed #eee', fontSize: '0.9em', color: '#666' }}>\n          <p>Bu Footer bile\u015feni de temay\u0131 kullanabilir.<\/p>\n        <\/div>\n      <\/div>\n    <\/ThemeProvider>\n  );\n}\n\nexport default App;\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, <code translate=\"no\">App<\/code> bile\u015fenini <code translate=\"no\">ThemeProvider<\/code> ile sarmalayarak, uygulaman\u0131n t\u00fcm alt bile\u015fenlerinin tema durumuna ve <code translate=\"no\">toggleTheme<\/code> fonksiyonuna eri\u015fmesini sa\u011flad\u0131k. <code translate=\"no\">ThemeToggleButton<\/code> ve <code translate=\"no\">Content<\/code> bile\u015fenleri, do\u011frudan <code translate=\"no\">useTheme<\/code> custom hook'unu kullanarak tema bilgilerine eri\u015fir. Bu, prop drilling'i tamamen ortadan kald\u0131r\u0131r ve kodu daha mod\u00fcler ve okunabilir hale getirir. Bu t\u00fcr bir yap\u0131, kullan\u0131c\u0131 ayarlar\u0131, dil tercihleri veya global bildirimler gibi verileri y\u00f6netmek i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n<div class=\"expert-tip\">\n        Uzman \u0130pucu: Context API, Redux gibi daha karma\u015f\u0131k durum y\u00f6netim k\u00fct\u00fcphanelerine hafif bir alternatif olabilir. Ancak \u00e7ok s\u0131k g\u00fcncellenen veya uygulaman\u0131n b\u00fcy\u00fck bir b\u00f6l\u00fcm\u00fcn\u00fc etkileyen karma\u015f\u0131k global durumlar i\u00e7in hala Redux gibi \u00e7\u00f6z\u00fcmler daha uygun olabilir. Context'i \"her \u015feyi\" y\u00f6netmek i\u00e7in de\u011fil, daha \u00e7ok bile\u015fen a\u011fac\u0131nda belirli bir veri t\u00fcr\u00fcn\u00fc payla\u015fmak i\u00e7in d\u00fc\u015f\u00fcn\u00fcn.\n    <\/div>\n<h2>Form Y\u00f6netimi ve Validasyon: Kullan\u0131c\u0131 Girdileriyle G\u00fcvenli Etkile\u015fim<\/h2>\n<p>React uygulamalar\u0131nda kullan\u0131c\u0131 girdilerini toplamak ve i\u015flemek i\u00e7in formlar kritik bir rol oynar. Ancak form y\u00f6netimi, \u00f6zellikle validasyon (do\u011frulama) ve durum y\u00f6netimi s\u00f6z konusu oldu\u011funda karma\u015f\u0131k hale gelebilir. React'in \"kontroll\u00fc bile\u015fenler\" (controlled components) yakla\u015f\u0131m\u0131, form girdilerini React'in durumuyla senkronize ederek bu s\u00fcreci daha y\u00f6netilebilir k\u0131lar. Bu b\u00f6l\u00fcmde, form y\u00f6netimi ve validasyon i\u00e7in en faydal\u0131 snippet'lar\u0131 ve pratik yakla\u015f\u0131mlar\u0131 inceleyece\u011fiz.<\/p>\n<h3>Kontroll\u00fc Bile\u015fenler ve Temel Form Snippet'lar\u0131<\/h3>\n<p>Kontroll\u00fc bir bile\u015fen, form eleman\u0131n\u0131n de\u011ferinin (\u00f6rne\u011fin bir <code translate=\"no\">input<\/code> veya <code translate=\"no\">textarea<\/code>) React durumu taraf\u0131ndan kontrol edildi\u011fi bile\u015fendir. De\u011fer, <code translate=\"no\">value<\/code> prop'u ile atan\u0131r ve de\u011fi\u015fiklikler <code translate=\"no\">onChange<\/code> olay\u0131 ile yakalan\u0131r, ard\u0131ndan durum g\u00fcncellenir. Bu, form verilerinin her zaman React durumunda tutuldu\u011fu anlam\u0131na gelir. \u0130\u015fte basit bir input i\u00e7in snippet:<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';\n\nfunction SimpleInputForm() {\n  const [inputValue, setInputValue] = useState(''); \/\/ USFS: useStateFormString\n\n  const handleChange = (e) => {\n    setInputValue(e.target.value);\n  };\n\n  const handleSubmit = (e) => {\n    e.preventDefault(); \/\/ Sayfan\u0131n yeniden y\u00fcklenmesini engelle\n    console.log('G\u00f6nderilen De\u011fer:', inputValue);\n    alert(<code>G\u00f6nderilen De\u011fer: ${inputValue}<\/code>);\n    setInputValue(''); \/\/ Formu s\u0131f\u0131rla\n  };\n\n  return (\n    <form onSubmit={handleSubmit} style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', maxWidth: '400px', margin: '20px auto', display: 'flex', flexDirection: 'column', gap: '15px' }}>\n      <h3>Basit Giri\u015f Formu<\/h3>\n      <label htmlFor=\"myInput\" style={{ fontWeight: 'bold' }}>\n        Ad\u0131n\u0131z:\n      <\/label>\n      <input\n        type=\"text\"\n        id=\"myInput\"\n        value={inputValue}\n        onChange={handleChange}\n        placeholder=\"Ad\u0131n\u0131z\u0131 buraya girin\"\n        style={{ padding: '10px', borderRadius: '4px', border: '1px solid #ddd', width: 'calc(100% - 22px)' }}\n      \/>\n      <button type=\"submit\" style={{ padding: '10px 15px', borderRadius: '5px', border: 'none', backgroundColor: '#28a745', color: 'white', cursor: 'pointer', alignSelf: 'flex-start' }}>\n        G\u00f6nder\n      <\/button>\n    <\/form>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu snippet, bir <code translate=\"no\">input<\/code> eleman\u0131n\u0131n de\u011ferini <code translate=\"no\">useState<\/code> ile nas\u0131l y\u00f6netilece\u011fini ve form g\u00f6nderiminin nas\u0131l ele al\u0131naca\u011f\u0131n\u0131 g\u00f6sterir. <code translate=\"no\">e.preventDefault()<\/code> kullan\u0131m\u0131, taray\u0131c\u0131n\u0131n varsay\u0131lan form g\u00f6nderme davran\u0131\u015f\u0131n\u0131 engellemek i\u00e7in kritik \u00f6neme sahiptir. <code translate=\"no\">usf<\/code> (useStateForm) veya <code translate=\"no\">form<\/code> gibi k\u0131sayollar, bir form bile\u015feninin temel yap\u0131s\u0131n\u0131 h\u0131zl\u0131ca olu\u015fturman\u0131za yard\u0131mc\u0131 olabilir.<\/p>\n<h3>Dinamik Form Alanlar\u0131 ve Validasyon Snippet'lar\u0131<\/h3>\n<p>Birden fazla form alan\u0131 oldu\u011funda, her biri i\u00e7in ayr\u0131 bir <code translate=\"no\">useState<\/code> tan\u0131mlamak yorucu olabilir. Bunun yerine, tek bir nesne durumunda t\u00fcm form verilerini tutmak daha yayg\u0131n bir yakla\u015f\u0131md\u0131r. Ayr\u0131ca, kullan\u0131c\u0131 girdilerinin belirli kurallara uygun olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in validasyon eklemek \u00f6nemlidir.<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';\n\nfunction MultiInputForm() {\n  const [formData, setFormData] = useState({ \/\/ USFO: useStateFormObject\n    username: '',\n    email: '',\n    password: ''\n  });\n  const [errors, setErrors] = useState({});\n\n  const handleChange = (e) => {\n    const { name, value } = e.target;\n    setFormData(prevData => ({\n      ...prevData,\n      [name]: value\n    }));\n    \/\/ Validasyon hatas\u0131n\u0131 an\u0131nda temizle\n    if (errors[name]) {\n      setErrors(prevErrors => {\n        const newErrors = { ...prevErrors };\n        delete newErrors[name];\n        return newErrors;\n      });\n    }\n  };\n\n  const validate = () => {\n    const newErrors = {};\n    if (!formData.username) {\n      newErrors.username = 'Kullan\u0131c\u0131 ad\u0131 gerekli.';\n    } else if (formData.username.length < 3) {\n      newErrors.username = 'Kullan\u0131c\u0131 ad\u0131 en az 3 karakter olmal\u0131.';\n    }\n    if (!formData.email) {\n      newErrors.email = 'E-posta gerekli.';\n    } else if (!\/\\S+@\\S+\\.\\S+\/.test(formData.email)) {\n      newErrors.email = 'Ge\u00e7erli bir e-posta adresi girin.';\n    }\n    if (!formData.password) {\n      newErrors.password = '\u015eifre gerekli.';\n    } else if (formData.password.length < 6) {\n      newErrors.password = '\u015eifre en az 6 karakter olmal\u0131.';\n    }\n    return newErrors;\n  };\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    const validationErrors = validate();\n    if (Object.keys(validationErrors).length > 0) {\n      setErrors(validationErrors);\n      console.log('Validasyon hatalar\u0131:', validationErrors);\n    } else {\n      console.log('Form G\u00f6nderildi:', formData);\n      alert(<code>Form G\u00f6nderildi: ${JSON.stringify(formData, null, 2)}<\/code>);\n      \/\/ Formu s\u0131f\u0131rla\n      setFormData({ username: '', email: '', password: '' });\n      setErrors({});\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit} style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px', maxWidth: '400px', margin: '20px auto', display: 'flex', flexDirection: 'column', gap: '15px' }}>\n      <h3>\u00c7oklu Giri\u015f ve Validasyon Formu<\/h3>\n\n      <div>\n        <label htmlFor=\"username\">Kullan\u0131c\u0131 Ad\u0131:<\/label>\n        <input type=\"text\" id=\"username\" name=\"username\" value={formData.username} onChange={handleChange} style={{ padding: '8px', borderRadius: '4px', border: <code>1px solid ${errors.username ? &#039;red&#039; : &#039;#ddd&#039;}<\/code>, width: 'calc(100% - 18px)' }} \/>\n        {errors.username && <p style={{ color: 'red', fontSize: '0.8em', marginTop: '5px' }}>{errors.username}<\/p>}\n      <\/div>\n\n      <div>\n        <label htmlFor=\"email\">E-posta:<\/label>\n        <input type=\"email\" id=\"email\" name=\"email\" value={formData.email} onChange={handleChange} style={{ padding: '8px', borderRadius: '4px', border: <code>1px solid ${errors.email ? &#039;red&#039; : &#039;#ddd&#039;}<\/code>, width: 'calc(100% - 18px)' }} \/>\n        {errors.email && <p style={{ color: 'red', fontSize: '0.8em', marginTop: '5px' }}>{errors.email}<\/p>}\n      <\/div>\n\n      <div>\n        <label htmlFor=\"password\">\u015eifre:<\/label>\n        <input type=\"password\" id=\"password\" name=\"password\" value={formData.password} onChange={handleChange} style={{ padding: '8px', borderRadius: '4px', border: <code>1px solid ${errors.password ? &#039;red&#039; : &#039;#ddd&#039;}<\/code>, width: 'calc(100% - 18px)' }} \/>\n        {errors.password && <p style={{ color: 'red', fontSize: '0.8em', marginTop: '5px' }}>{errors.password}<\/p>}\n      <\/div>\n\n      <button type=\"submit\" style={{ padding: '10px 15px', borderRadius: '5px', border: 'none', backgroundColor: '#007bff', color: 'white', cursor: 'pointer', alignSelf: 'flex-start' }}>\n        Kay\u0131t Ol\n      <\/button>\n    <\/form>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu snippet, form verilerini tek bir nesne i\u00e7inde y\u00f6netmeyi, <code translate=\"no\">onChange<\/code> olay\u0131 ile dinamik olarak g\u00fcncellemeyi ve <code translate=\"no\">validate<\/code> fonksiyonu ile temel validasyon kurallar\u0131n\u0131 uygulamay\u0131 g\u00f6sterir. Hata mesajlar\u0131, ilgili alan\u0131n alt\u0131nda dinamik olarak g\u00f6sterilir. Bu yakla\u015f\u0131m, daha karma\u015f\u0131k formlar i\u00e7in kolayca \u00f6l\u00e7eklendirilebilir. <code translate=\"no\">usfo<\/code> (useStateFormObject) veya <code translate=\"no\">formv<\/code> (form validation) gibi k\u0131sayollar, bu yap\u0131y\u0131 h\u0131zl\u0131ca olu\u015fturman\u0131z\u0131 sa\u011flar.<\/p>\n<div class=\"expert-tip\">\n        Uzman \u0130pucu: Daha karma\u015f\u0131k validasyon senaryolar\u0131 i\u00e7in, <code translate=\"no\">Formik<\/code> veya <code translate=\"no\">React Hook Form<\/code> gibi k\u00fct\u00fcphaneleri kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. Bu k\u00fct\u00fcphaneler, boilerplate kodunu azalt\u0131r ve validasyon mant\u0131\u011f\u0131n\u0131 daha verimli bir \u015fekilde y\u00f6netmenize yard\u0131mc\u0131 olur.\n    <\/div>\n<h2>Geli\u015fmi\u015f React Desenleri ve Kullan\u0131\u015fl\u0131 Snippet'lar: Portallar, Error Boundary'ler ve Daha Fazlas\u0131<\/h2>\n<p>React, g\u00fc\u00e7l\u00fc ve esnek bir k\u00fct\u00fcphane olmas\u0131n\u0131n yan\u0131 s\u0131ra, uygulaman\u0131z\u0131n belirli senaryolarda daha sa\u011flam, daha performansl\u0131 ve daha kullan\u0131c\u0131 dostu olmas\u0131n\u0131 sa\u011flayacak geli\u015fmi\u015f desenler ve \u00f6zellikler sunar. Bu b\u00f6l\u00fcmde, React geli\u015ftirme deneyiminizi bir \u00fcst seviyeye ta\u015f\u0131yacak, ileri d\u00fczey snippet'lara ve mimarilere odaklanaca\u011f\u0131z: <code translate=\"no\">React.memo<\/code> ile performans optimizasyonu, <code translate=\"no\">Portallar<\/code> ile DOM hiyerar\u015fisi d\u0131\u015f\u0131na render, ve <code translate=\"no\">Error Boundary<\/code>'ler ile hata y\u00f6netimi.<\/p>\n<h3>React.memo ile Gereksiz Yeniden Render'lar\u0131 Engelleyin<\/h3>\n<p>Fonksiyonel bile\u015fenler i\u00e7in <code translate=\"no\">React.memo<\/code>, bir bile\u015fenin prop'lar\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece yeniden render edilmesini engelleyen bir \u00fcst d\u00fczey bile\u015fendir (Higher-Order Component - HOC). Bu, \u00f6zellikle yo\u011fun hesaplamalar yapan veya s\u0131k s\u0131k \u00fcst bile\u015fenin yeniden render edilmesiyle tetiklenen alt bile\u015fenler i\u00e7in performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. <code translate=\"no\">React.memo<\/code>'nun kullan\u0131m\u0131 olduk\u00e7a basittir:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\n\n\/\/ Normal bir bile\u015fen\nconst MySimpleComponent = ({ title, count }) => {\n  console.log('MySimpleComponent render edildi');\n  return (\n    <div>\n      <h4>{title}<\/h4>\n      <p>Saya\u00e7: {count}<\/p>\n    <\/div>\n  );\n};\n\n\/\/ React.memo ile optimize edilmi\u015f bile\u015fen\nconst MemoizedComponent = React.memo(({ title, count }) => { \/\/ RM: React.memo\n  console.log('MemoizedComponent render edildi');\n  return (\n    <div>\n      <h4>{title}<\/h4>\n      <p>Saya\u00e7: {count}<\/p>\n    <\/div>\n  );\n});\n\n\/\/ Kullan\u0131m \u00f6rne\u011fi\n\/*\nfunction Parent() {\n  const [value, setValue] = useState(0);\n  const [otherState, setOtherState] = useState(false);\n\n  return (\n    <div>\n      <button onClick={() => setValue(value + 1)}>Value Art\u0131r<\/button>\n      <button onClick={() => setOtherState(!otherState)}>Other State De\u011fi\u015ftir<\/button>\n\n      <MySimpleComponent title=\"Normal Bile\u015fen\" count={value} \/>\n      <MemoizedComponent title=\"Memoize Edilmi\u015f Bile\u015fen\" count={value} \/>\n    <\/div>\n  );\n}\n*\/\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte, <code translate=\"no\">MemoizedComponent<\/code>, yaln\u0131zca <code translate=\"no\">title<\/code> veya <code translate=\"no\">count<\/code> prop'lar\u0131 de\u011fi\u015fti\u011finde yeniden render edilir. E\u011fer <code translate=\"no\">Parent<\/code> bile\u015feninde <code translate=\"no\">otherState<\/code> de\u011fi\u015firse, <code translate=\"no\">MySimpleComponent<\/code> yeniden render olurken, <code translate=\"no\">MemoizedComponent<\/code> olmaz. <code translate=\"no\">rm<\/code> (React memo) gibi k\u0131sayollar, mevcut bir bile\u015feni <code translate=\"no\">React.memo<\/code> ile sarmalaman\u0131z\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n<h3>Portallar ile Bile\u015fenleri DOM Hiyerar\u015fisi D\u0131\u015f\u0131na Render Edin<\/h3>\n<p><code translate=\"no\">React Portals<\/code>, bir bile\u015fenin DOM a\u011fac\u0131ndaki fiziksel konumundan farkl\u0131 bir yere render edilmesini sa\u011flayan geli\u015fmi\u015f bir \u00f6zelliktir. Bu, modal pencereler, a\u00e7\u0131l\u0131r men\u00fcler veya ara\u00e7 ipu\u00e7lar\u0131 gibi bile\u015fenler i\u00e7in olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r, \u00e7\u00fcnk\u00fc bu elemanlar\u0131n genellikle ana uygulama a\u011fac\u0131n\u0131n \u00fcst\u00fcnde veya d\u0131\u015f\u0131nda olmas\u0131 istenir. Bir portal olu\u015fturmak i\u00e7in <code translate=\"no\">ReactDOM.createPortal()<\/code> kullan\u0131l\u0131r:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport ReactDOM from 'react-dom';\n\n\/\/ Modal bile\u015feni\nfunction Modal({ children, isOpen, onClose }) {\n  if (!isOpen) return null;\n\n  return ReactDOM.createPortal( \/\/ RPC: React Portal Component\n    <div style={{\n      position: 'fixed',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      backgroundColor: 'rgba(0,0,0,0.7)',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      zIndex: 1000\n    }}>\n      <div style={{\n        backgroundColor: 'white',\n        padding: '30px',\n        borderRadius: '10px',\n        boxShadow: '0 5px 15px rgba(0,0,0,0.3)',\n        minWidth: '300px',\n        maxWidth: '500px',\n        zIndex: 1001\n      }}>\n        {children}\n        <button onClick={onClose} style={{\n          marginTop: '20px',\n          padding: '10px 20px',\n          borderRadius: '5px',\n          border: 'none',\n          backgroundColor: '#dc3545',\n          color: 'white',\n          cursor: 'pointer'\n        }}>\n          Kapat\n        <\/button>\n      <\/div>\n    <\/div>,\n    document.getElementById('modal-root') \/\/ Bu id'ye sahip DOM eleman\u0131 nerede olursa olsun\n  );\n}\n\n\/\/ Kullan\u0131m \u00f6rne\u011fi\n\/*\nfunction App() {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  return (\n    <div>\n      <button onClick={() => setIsModalOpen(true)}>Modal A\u00e7<\/button>\n      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n        <h2>Bu Bir Modal Ba\u015fl\u0131\u011f\u0131<\/h2>\n        <p>Bu i\u00e7erik, React a\u011fac\u0131n\u0131n d\u0131\u015f\u0131nda, \"modal-root\" div'ine render edildi.<\/p>\n      <\/Modal>\n      \/\/ Index.html dosyan\u0131zda <div id=\"modal-root\"><\/div> olmal\u0131\n    <\/div>\n  );\n}\n*\/\n<\/pre>\n<p><\/code><\/p>\n<p>Bu snippet, bir <code translate=\"no\">Modal<\/code> bile\u015feninin <code translate=\"no\">ReactDOM.createPortal<\/code> kullanarak nas\u0131l ayr\u0131 bir DOM eleman\u0131na render edilece\u011fini g\u00f6sterir. Bu, modal\u0131n <code translate=\"no\">z-index<\/code> sorunlar\u0131n\u0131 \u00e7\u00f6zmeye veya overflow \u00f6zelliklerinden ba\u011f\u0131ms\u0131z hareket etmesini sa\u011flamaya yard\u0131mc\u0131 olur. <code translate=\"no\">rpc<\/code> (React Portal Component) gibi k\u0131sayollar, bir Portal yap\u0131s\u0131n\u0131 h\u0131zl\u0131ca olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n<h3>Error Boundary'ler ile Uygulaman\u0131z\u0131 Hatalara Kar\u015f\u0131 Koruyun<\/h3>\n<p>React uygulamalar\u0131nda \u00e7al\u0131\u015fma zaman\u0131 hatalar\u0131 ka\u00e7\u0131n\u0131lmazd\u0131r. Bir bile\u015fende olu\u015fan hata, t\u00fcm uygulaman\u0131n \u00e7\u00f6kmesine neden olabilir. <code translate=\"no\">Error Boundary<\/code>'ler, bile\u015fen a\u011fac\u0131n\u0131n belirli bir k\u0131sm\u0131ndaki JavaScript hatalar\u0131n\u0131 yakalayan, g\u00fcnl\u00fc\u011fe kaydeden ve uygulaman\u0131n geri kalan\u0131n\u0131 \u00e7\u00f6kertmeden bir geri d\u00f6n\u00fc\u015f UI'\u0131 g\u00f6r\u00fcnt\u00fcleyen React bile\u015fenleridir. S\u0131n\u0131f bile\u015fenleri olarak yaz\u0131l\u0131rlar ve <code translate=\"no\">static getDerivedStateFromError()<\/code> veya <code translate=\"no\">componentDidCatch()<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131 kullan\u0131rlar. \u0130\u015fte bir <code translate=\"no\">Error Boundary<\/code> snippet'\u0131:<\/p>\n<pre><code class=\"language-jsx\">import React, { Component } from 'react';\n\nclass ErrorBoundary extends Component { \/\/ REB: React Error Boundary\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false, error: null, errorInfo: null };\n  }\n\n  static getDerivedStateFromError(error) {\n    \/\/ Bir sonraki render'da geri d\u00f6n\u00fc\u015f UI'\u0131n\u0131 g\u00f6sterecek \u015fekilde state'i g\u00fcncelleyin\n    return { hasError: true, error: error };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    \/\/ Hata bilgilerini bir hata raporlama servisine g\u00f6nderebilirsiniz\n    console.error(\"Uncaught error:\", error, errorInfo);\n    this.setState({ errorInfo: errorInfo });\n  }\n\n  render() {\n    if (this.state.hasError) {\n      \/\/ Bir geri d\u00f6n\u00fc\u015f UI'\u0131 g\u00f6sterebilirsiniz\n      return (\n        <div style={{ padding: '20px', border: '1px solid red', borderRadius: '8px', backgroundColor: '#ffe6e6', color: 'red', margin: '20px auto', maxWidth: '500px' }}>\n          <h2>Bir \u015feyler ters gitti.<\/h2>\n          <p>Uygulama beklenmedik bir hata ile kar\u015f\u0131la\u015ft\u0131.<\/p>\n          {this.props.showErrorDetails && this.state.error && (\n            <details style={{ whiteSpace: 'pre-wrap', fontSize: '0.8em', marginTop: '10px' }}>\n              <summary>Hata Detaylar\u0131<\/summary>\n              {this.state.error.toString()}\n              <br \/>\n              {this.state.errorInfo && this.state.errorInfo.componentStack}\n            <\/details>\n          )}\n        <\/div>\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\n\/\/ Hata tetikleyen \u00f6rnek bir bile\u015fen\nfunction BuggyComponent() {\n  const [count, setCount] = useState(0);\n\n  const handleClick = () => {\n    setCount(prevCount => prevCount + 1);\n    if (count === 2) {\n      \/\/ Hata f\u0131rlat\n      throw new Error('Bir hata olu\u015ftu!');\n    }\n  };\n\n  return (\n    <div>\n      <p>Saya\u00e7: {count}<\/p>\n      <button onClick={handleClick}>Art\u0131r ve Hata Tetikle<\/button>\n    <\/div>\n  );\n}\n\n\/\/ Kullan\u0131m \u00f6rne\u011fi\n\/*\nfunction App() {\n  return (\n    <ErrorBoundary showErrorDetails={process.env.NODE_ENV === 'development'}>\n      <BuggyComponent \/>\n    <\/ErrorBoundary>\n  );\n}\n*\/\n<\/pre>\n<p><\/code><\/p>\n<p>Bu <code translate=\"no\">ErrorBoundary<\/code> snippet'\u0131, bir hata olu\u015ftu\u011funda durumu nas\u0131l y\u00f6netece\u011finizi ve bir geri d\u00f6n\u00fc\u015f UI'\u0131 nas\u0131l g\u00f6sterece\u011finizi g\u00f6sterir. <code translate=\"no\">reb<\/code> (React Error Boundary) gibi k\u0131sayollar, bu boilerplate s\u0131n\u0131f bile\u015fenini h\u0131zl\u0131ca olu\u015fturman\u0131z\u0131 sa\u011flar. Bile\u015fenlerinizi bu \u015fekilde sarmalayarak, uygulaman\u0131z\u0131n daha dayan\u0131kl\u0131 olmas\u0131n\u0131 ve k\u00fc\u00e7\u00fck hatalar\u0131n t\u00fcm kullan\u0131c\u0131 deneyimini bozmas\u0131n\u0131 engelleyebilirsiniz.<\/p>\n<div class=\"expert-tip\">\n        Uzman \u0130pucu: Error Boundary'leri, uygulaman\u0131z\u0131n mant\u0131ksal b\u00f6l\u00fcmlerini kapsayacak \u015fekilde yerle\u015ftirin. Her bir bile\u015feni sarmalaman\u0131za gerek yoktur. Genellikle ana layout bile\u015fenleri veya b\u00fcy\u00fck \u00f6zellik gruplar\u0131 i\u00e7in kullanmak yeterlidir.\n    <\/div>\n<h2>Test ve Hata Ay\u0131klama Snippet'lar\u0131: Sa\u011flam Uygulamalar \u0130n\u015fa Etmek<\/h2>\n<p>Herhangi bir yaz\u0131l\u0131m projesinde, test ve hata ay\u0131klama s\u00fcre\u00e7leri, g\u00fcvenilir ve s\u00fcrd\u00fcr\u00fclebilir uygulamalar olu\u015fturmak i\u00e7in hayati \u00f6neme sahiptir. React uygulamalar\u0131 da bir istisna de\u011fildir. Do\u011fru test stratejileri ve etkili hata ay\u0131klama teknikleri, hem geli\u015ftirme s\u00fcresini k\u0131salt\u0131r hem de son kullan\u0131c\u0131ya sunulan \u00fcr\u00fcn\u00fcn kalitesini art\u0131r\u0131r. Bu b\u00f6l\u00fcmde, React bile\u015fenlerinizi test etmek ve olas\u0131 sorunlar\u0131 gidermek i\u00e7in kullanabilece\u011finiz faydal\u0131 snippet'lar\u0131 ve yakla\u015f\u0131mlar\u0131 inceleyece\u011fiz.<\/p>\n<h3>React Testing Library ile Bile\u015fenleri Test Etme Snippet'lar\u0131<\/h3>\n<p>React Testing Library (RTL), React bile\u015fenlerini test etmek i\u00e7in yayg\u0131n olarak kullan\u0131lan bir k\u00fct\u00fcphanedir. Felsefesi, bile\u015fenlerinizi kullan\u0131c\u0131lar\u0131n etkile\u015fimde bulunaca\u011f\u0131 \u015fekilde test etmektir, yani \"uygulaman\u0131z\u0131n kodu de\u011fil, uygulaman\u0131z\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131 gibi test edin\". Bu, eri\u015filebilirlik (accessibility) odakl\u0131 ve daha dayan\u0131kl\u0131 testler yazman\u0131za olanak tan\u0131r. \u0130\u015fte temel bir bile\u015fen testi i\u00e7in snippet:<\/p>\n<pre><code class=\"language-jsx\">\/\/ MyButton.js\nimport React from 'react';\n\nfunction MyButton({ onClick, children }) {\n  return (\n    <button onClick={onClick}>\n      {children}\n    <\/button>\n  );\n}\nexport default MyButton;\n\n\/\/ MyButton.test.js\nimport React from 'react';\nimport { render, screen, fireEvent } from '@testing-library\/react'; \/\/ RTL: React Testing Library\nimport '@testing-library\/jest-dom\/extend-expect'; \/\/ Ek Jest matcher'lar\u0131 i\u00e7in\n\nimport MyButton from '.\/MyButton';\n\ndescribe('MyButton', () => { \/\/ DESC: describe block\n  it('butona t\u0131kland\u0131\u011f\u0131nda onClick fonksiyonunu \u00e7a\u011f\u0131r\u0131r', () => { \/\/ IT: it block\n    const handleClick = jest.fn(); \/\/ Jest mock fonksiyonu\n    render(<MyButton onClick={handleClick}>T\u0131kla Bana<\/MyButton>);\n\n    const buttonElement = screen.getByText(\/T\u0131kla Bana\/i); \/\/ Butonu metniyle bul\n    fireEvent.click(buttonElement); \/\/ Butona t\u0131klama olay\u0131n\u0131 tetikle\n\n    expect(handleClick).toHaveBeenCalledTimes(1); \/\/ handleClick'in bir kez \u00e7a\u011fr\u0131ld\u0131\u011f\u0131n\u0131 kontrol et\n  });\n\n  it('do\u011fru metni render eder', () => {\n    render(<MyButton onClick={() => {}}>G\u00f6nder<\/MyButton>);\n    expect(screen.getByText(\/G\u00f6nder\/i)).toBeInTheDocument(); \/\/ Buton metninin d\u00f6k\u00fcmanda olup olmad\u0131\u011f\u0131n\u0131 kontrol et\n  });\n});\n<\/pre>\n<p><\/code><\/p>\n<p>Bu snippet, bir d\u00fc\u011fme bile\u015fenini nas\u0131l test edece\u011finizi g\u00f6sterir. <code translate=\"no\">describe<\/code> ve <code translate=\"no\">it<\/code> (veya <code translate=\"no\">test<\/code>) bloklar\u0131 test senaryolar\u0131n\u0131z\u0131 grupland\u0131rmak i\u00e7in kullan\u0131l\u0131r. <code translate=\"no\">render<\/code> fonksiyonu bile\u015feni sanal DOM'a render ederken, <code translate=\"no\">screen.getByText<\/code> gibi sorgular kullan\u0131c\u0131lar\u0131n g\u00f6rebilece\u011fi elemanlar\u0131 bulman\u0131za yard\u0131mc\u0131 olur. <code translate=\"no\">fireEvent.click<\/code> gibi fonksiyonlar ise kullan\u0131c\u0131 etkile\u015fimlerini sim\u00fcle eder. <code translate=\"no\">rtl<\/code> (React Testing Library) veya <code translate=\"no\">rtest<\/code> (React test) gibi k\u0131sayollar, yeni bir test dosyas\u0131 veya temel test blo\u011fu olu\u015fturman\u0131z\u0131 h\u0131zland\u0131r\u0131r.<\/p>\n<h3>Etkili Hata Ay\u0131klama Teknikleri ve Snippet'lar\u0131<\/h3>\n<p>Hata ay\u0131klama, bir sorunla kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131zda onu te\u015fhis etme ve \u00e7\u00f6zme s\u00fcrecidir. React uygulamalar\u0131nda hata ay\u0131klama i\u00e7in bir\u00e7ok ara\u00e7 ve teknik mevcuttur:<\/p>\n<ol>\n<li><strong>React Developer Tools:<\/strong> Taray\u0131c\u0131 eklentisi olarak mevcuttur ve bile\u015fen a\u011fac\u0131n\u0131z\u0131, prop'lar\u0131n\u0131z\u0131, durumunuzu ve Hook'lar\u0131n\u0131z\u0131 incelemenizi sa\u011flar. Genellikle <code translate=\"no\">rde<\/code> k\u0131sayoluyla ilgili paneli a\u00e7may\u0131 kolayla\u015ft\u0131ran bir snippet bulunmaz, ancak bu arac\u0131 kullanmaya al\u0131\u015fmak en temel hata ay\u0131klama ad\u0131m\u0131d\u0131r.<\/li>\n<li><strong><code translate=\"no\">console.log()<\/code>:<\/strong> En basit ama etkili y\u00f6ntemdir. <code translate=\"no\">useEffect<\/code> i\u00e7inde veya belirli bir fonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda de\u011fi\u015fkenlerin de\u011ferlerini kontrol etmek i\u00e7in kullan\u0131labilir.<\/li>\n<li><strong>Breakpoint'ler:<\/strong> Taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki debugger'\u0131 kullanarak kodunuzda breakpoint'ler ayarlayabilir ve kodunuzun ad\u0131m ad\u0131m nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 izleyebilirsiniz.<\/li>\n<li><strong>Hata Yakalama (Error Boundary):<\/strong> Yukar\u0131da bahsedildi\u011fi gibi, beklenmedik hatalar\u0131 yakalamak ve kullan\u0131c\u0131ya dost\u00e7a bir mesaj g\u00f6stermek i\u00e7in <code translate=\"no\">Error Boundary<\/code>'ler kullan\u0131n.<\/li>\n<\/ol>\n<p>\u0130\u015fte bir <code translate=\"no\">console.log<\/code> snippet'\u0131 ve <code translate=\"no\">useEffect<\/code> i\u00e7inde hata ay\u0131klama \u00f6rne\u011fi:<\/p>\n<pre><code class=\"language-jsx\">import React, { useState, useEffect } from 'react';\n\nfunction DebuggingComponent() {\n  const [value, setValue] = useState(0);\n  const [data, setData] = useState(null);\n\n  \/\/ De\u011fer de\u011fi\u015fti\u011finde console.log ile izleme\n  useEffect(() => {\n    console.log('Value g\u00fcncellendi:', value); \/\/ CLG: console.log\n    \/\/ clgval: console.log('value:', value); \/\/ Yayg\u0131n snippet format\u0131\n  }, [value]);\n\n  \/\/ useEffect i\u00e7inde veri \u00e7ekme hatas\u0131 ay\u0131klama\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        console.log('Veri \u00e7ekme ba\u015flat\u0131ld\u0131...');\n        const response = await fetch('https:\/\/nonexistent-api.com\/data');\n        if (!response.ok) {\n          throw new Error(<code>HTTP error! status: ${response.status}<\/code>);\n        }\n        const result = await response.json();\n        setData(result);\n        console.log('Veri ba\u015far\u0131yla \u00e7ekildi:', result);\n      } catch (error) {\n        console.error('Veri \u00e7ekme hatas\u0131:', error); \/\/ Hata ay\u0131klama i\u00e7in console.error\n        \/\/ Hata durumunda UI'da da g\u00f6sterilebilir\n      }\n    };\n    fetchData();\n  }, []); \/\/ Sadece bir kere \u00e7al\u0131\u015f\u0131r\n\n  return (\n    <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px', maxWidth: '400px', margin: '20px auto' }}>\n      <h3>Hata Ay\u0131klama Bile\u015feni<\/h3>\n      <p>De\u011fer: {value}<\/p>\n      <button onClick={() => setValue(value + 1)} style={{ padding: '10px 15px', borderRadius: '5px', border: 'none', backgroundColor: '#6c757d', color: 'white', cursor: 'pointer' }}>\n        De\u011feri Art\u0131r\n      <\/button>\n      {data ? <pre>{JSON.stringify(data, null, 2)}<\/pre>\n<p> : <\/p>\n<p>Veri yok veya hata olu\u015ftu.<\/p>\n<p>}\n    <\/p><\/div>\n<p>  );<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Bu \u00f6rnek, <code translate=\"no\">console.log<\/code> ve <code translate=\"no\">console.error<\/code> kullanarak durum de\u011fi\u015fikliklerini ve yan etki operasyonlar\u0131n\u0131 nas\u0131l izleyece\u011finizi g\u00f6sterir. <code translate=\"no\">clg<\/code> (console log), <code translate=\"no\">clgvar<\/code> (console log variable) gibi k\u0131sayollar, bu log ifadelerini h\u0131zl\u0131ca kodunuza eklemenizi sa\u011flar. Etkili bir hata ay\u0131klama s\u00fcreci, sorunlar\u0131 h\u0131zla tespit etmenize ve gidermenize yard\u0131mc\u0131 olur, b\u00f6ylece geli\u015ftirme ak\u0131\u015f\u0131n\u0131z kesintiye u\u011framaz.<\/p>\n<div class=\"expert-tip\">\n        Uzman \u0130pucu: Production ortam\u0131nda <code translate=\"no\">console.log<\/code>'lar\u0131 temizlemeyi unutmay\u0131n! Build ara\u00e7lar\u0131 (\u00f6rne\u011fin Webpack, Rollup) i\u00e7in eklentilerle veya manuel olarak bu log'lar\u0131 otomatik olarak kald\u0131rabilirsiniz. Bu, hem uygulaman\u0131z\u0131n performans\u0131n\u0131 art\u0131r\u0131r hem de hassas bilgilerin konsola s\u0131zmas\u0131n\u0131 engeller.\n    <\/div>\n<h2>Sonu\u00e7: React Geli\u015ftirme S\u00fcrecinizi H\u0131zland\u0131r\u0131n ve \u0130yile\u015ftirin<\/h2>\n<p>Bu makale boyunca, React geli\u015ftirme deneyiminizi \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131racak ve kod kalitenizi art\u0131racak en faydal\u0131 snippet'lar\u0131 derinlemesine inceledik. Temel Hook'lardan (<code translate=\"no\">useState<\/code>, <code translate=\"no\">useEffect<\/code>) ba\u015flayarak, performans optimizasyonlar\u0131na (<code translate=\"no\">useMemo<\/code>, <code translate=\"no\">useCallback<\/code>), veri y\u00f6netimi \u00e7\u00f6z\u00fcmlerine (<code translate=\"no\">Context API<\/code>), form i\u015fleme ve validasyona, ileri d\u00fczey desenlere (<code translate=\"no\">Portals<\/code>, <code translate=\"no\">Error Boundary<\/code>) ve son olarak da test ve hata ay\u0131klama tekniklerine kadar geni\u015f bir yelpazeyi kapsayan pratik kod \u00f6rnekleri ve vaka analizleri sunduk.<\/p>\n<p>Snippet'lar, sadece tekrarlayan kod yazma y\u00fck\u00fcn\u00fc azaltmakla kalmaz, ayn\u0131 zamanda projelerinizde tutarl\u0131 bir kodlama stili benimsemenizi ve yayg\u0131n desenleri daha h\u0131zl\u0131 uygulaman\u0131z\u0131 sa\u011flar. Bu, \u00f6zellikle ekip i\u00e7inde \u00e7al\u0131\u015f\u0131rken veya b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar geli\u015ftirirken paha bi\u00e7ilmez bir avantaj sunar. Geli\u015ftirme ortam\u0131n\u0131zda (\u00f6rne\u011fin VS Code) uygun snippet uzant\u0131lar\u0131n\u0131 kullanarak bu k\u0131sayollar\u0131n g\u00fcc\u00fcn\u00fc tam olarak a\u00e7\u0131\u011fa \u00e7\u0131karabilirsiniz. B\u00f6ylece, manuel yaz\u0131m hatalar\u0131n\u0131 en aza indirirken, daha karma\u015f\u0131k mant\u0131k ve \u00f6zellik geli\u015ftirmeye odaklanmak i\u00e7in daha fazla zaman\u0131n\u0131z kal\u0131r.<\/p>\n<p>Unutmay\u0131n ki bu makalede bahsedilen 50 snippet, React ekosistemindeki zengin ara\u00e7lar\u0131n sadece k\u00fc\u00e7\u00fck bir b\u00f6l\u00fcm\u00fcn\u00fc temsil etmektedir. Kendi \u00e7al\u0131\u015fma al\u0131\u015fkanl\u0131klar\u0131n\u0131za ve projelerinizin \u00f6zel ihtiya\u00e7lar\u0131na g\u00f6re ek snippet'lar ke\u015ffetmek veya kendi \u00f6zel snippet'lar\u0131n\u0131z\u0131 olu\u015fturmak, verimlili\u011finizi daha da art\u0131racakt\u0131r. React toplulu\u011fu s\u00fcrekli b\u00fcy\u00fcyor ve yeni en iyi pratikler ortaya \u00e7\u0131k\u0131yor. Bu nedenle, \u00f6\u011frenmeye ve adapte olmaya devam etmek, modern web geli\u015ftiricileri i\u00e7in anahtard\u0131r. Sundu\u011fumuz bu ara\u00e7lar ve yakla\u015f\u0131mlar sayesinde, daha temiz, daha h\u0131zl\u0131 ve daha sa\u011flam React uygulamalar\u0131 in\u015fa etme yolculu\u011funuzda \u00f6nemli bir ad\u0131m atm\u0131\u015f olacaks\u0131n\u0131z.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<dl>\n<dt>React snippet'lar\u0131 nedir ve neden kullanmal\u0131y\u0131m?<\/dt>\n<dd>React snippet'lar\u0131, s\u0131k kullan\u0131lan React kod kal\u0131plar\u0131n\u0131 (\u00f6rne\u011fin, Hook'lar, bile\u015fen yap\u0131lar\u0131) otomatik olarak olu\u015fturan k\u0131sa kod \u015fablonlar\u0131d\u0131r. Geli\u015ftirme h\u0131z\u0131n\u0131z\u0131 art\u0131r\u0131r, yaz\u0131m hatalar\u0131n\u0131 azalt\u0131r ve kod tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flar.<\/dd>\n<dt>Hangi IDE'lerde React snippet'lar\u0131n\u0131 kullanabilirim?<\/dt>\n<dd>Ba\u015fta VS Code olmak \u00fczere, Sublime Text, WebStorm gibi pop\u00fcler IDE'ler i\u00e7in bir\u00e7ok React snippet uzant\u0131s\u0131 mevcuttur. VS Code i\u00e7in \"ES7 React\/Redux\/GraphQL\/React-Native snippets\" uzant\u0131s\u0131 en pop\u00fcler olanlardan biridir.<\/dd>\n<dt>Kendi \u00f6zel React snippet'lar\u0131m\u0131 olu\u015fturabilir miyim?<\/dt>\n<dd>Evet, \u00e7o\u011fu modern IDE, kendi \u00f6zel snippet'lar\u0131n\u0131z\u0131 tan\u0131mlaman\u0131za olanak tan\u0131r. Bu, s\u0131k\u00e7a kulland\u0131\u011f\u0131n\u0131z ancak haz\u0131r snippet'larda bulamad\u0131\u011f\u0131n\u0131z kod kal\u0131plar\u0131n\u0131 ki\u015fiselle\u015ftirmenizi sa\u011flar.<\/dd>\n<dt>useMemo ve useCallback ne zaman kullan\u0131lmal\u0131?<\/dt>\n<dd>Her ikisi de performans optimizasyonu i\u00e7in kullan\u0131l\u0131r. <code translate=\"no\">useMemo<\/code>, pahal\u0131 hesaplamalar\u0131n sonucunu \u00f6n belle\u011fe almak i\u00e7in kullan\u0131l\u0131rken, <code translate=\"no\">useCallback<\/code>, bir fonksiyon referans\u0131n\u0131 \u00f6n belle\u011fe almak i\u00e7in kullan\u0131l\u0131r. \u00d6zellikle <code translate=\"no\">React.memo<\/code> ile optimize edilmi\u015f alt bile\u015fenlere prop olarak fonksiyon ge\u00e7iyorsan\u0131z, gereksiz yeniden render'lar\u0131 \u00f6nlemek i\u00e7in <code translate=\"no\">useCallback<\/code> kullanmak faydal\u0131d\u0131r.<\/dd>\n<dt>Prop drilling sorununu Context API d\u0131\u015f\u0131nda nas\u0131l \u00e7\u00f6zebilirim?<\/dt>\n<dd>Prop drilling, genellikle <code translate=\"no\">Context API<\/code> ile \u00e7\u00f6z\u00fcl\u00fcr. Daha karma\u015f\u0131k global durumlar i\u00e7in Redux, Zustand, Recoil gibi durum y\u00f6netim k\u00fct\u00fcphanelerini kullanabilirsiniz. Ayr\u0131ca, \"render props\" desenleri veya custom hook'lar da prop'lar\u0131n derinlemesini engellemeye yard\u0131mc\u0131 olabilir.<\/dd>\n<\/dl>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React projelerinde tekrarlayan kod yazmaktan s\u0131k\u0131ld\u0131n\u0131z m\u0131? Kodlama h\u0131z\u0131n\u0131z\u0131 art\u0131racak ve geli\u015ftirme s\u00fcrecinizi sorunsuz hale getirecek 50 kullan\u0131\u015fl\u0131&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[128],"tags":[],"class_list":{"0":"post-30963","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 Geli\u015ftirmenizi H\u0131zland\u0131r\u0131n: En Faydal\u0131 50 React Snippet<\/title>\n<meta name=\"description\" content=\"React projelerinde tekrarlayan kod yazmaktan s\u0131k\u0131ld\u0131n\u0131z m\u0131? Kodlama h\u0131z\u0131n\u0131z\u0131 art\u0131racak ve geli\u015ftirme s\u00fcrecinizi sorunsuz hale getirecek 50 kullan\u0131\u015fl\u0131 React snippet&#039;\u0131 ile tan\u0131\u015fmaya haz\u0131r olun. Bu makale, her seviyeden geli\u015ftiriciye pratik \u00e7\u00f6z\u00fcmler sunuyor.\" \/>\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-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Geli\u015ftirmenizi H\u0131zland\u0131r\u0131n: En Faydal\u0131 50 React Snippet\" \/>\n<meta property=\"og:description\" content=\"React projelerinde tekrarlayan kod yazmaktan s\u0131k\u0131ld\u0131n\u0131z m\u0131? Kodlama h\u0131z\u0131n\u0131z\u0131 art\u0131racak ve geli\u015ftirme s\u00fcrecinizi sorunsuz hale getirecek 50 kullan\u0131\u015fl\u0131 React snippet&#039;\u0131 ile tan\u0131\u015fmaya haz\u0131r olun. Bu makale, her seviyeden geli\u015ftiriciye pratik \u00e7\u00f6z\u00fcmler sunuyor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-03T23:32:03+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=\"32 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Geli\u015ftirmenizi H\u0131zland\u0131r\u0131n: En Faydal\u0131 50 React Snippet\",\"datePublished\":\"2025-10-03T23:32:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/\"},\"wordCount\":4498,\"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-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/\",\"name\":\"React Geli\u015ftirmenizi H\u0131zland\u0131r\u0131n: En Faydal\u0131 50 React Snippet\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-03T23:32:03+00:00\",\"description\":\"React projelerinde tekrarlayan kod yazmaktan s\u0131k\u0131ld\u0131n\u0131z m\u0131? Kodlama h\u0131z\u0131n\u0131z\u0131 art\u0131racak ve geli\u015ftirme s\u00fcrecinizi sorunsuz hale getirecek 50 kullan\u0131\u015fl\u0131 React snippet'\u0131 ile tan\u0131\u015fmaya haz\u0131r olun. Bu makale, her seviyeden geli\u015ftiriciye pratik \u00e7\u00f6z\u00fcmler sunuyor.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Geli\u015ftirmenizi H\u0131zland\u0131r\u0131n: En Faydal\u0131 50 React Snippet\"}]},{\"@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 Geli\u015ftirmenizi H\u0131zland\u0131r\u0131n: En Faydal\u0131 50 React Snippet","description":"React projelerinde tekrarlayan kod yazmaktan s\u0131k\u0131ld\u0131n\u0131z m\u0131? Kodlama h\u0131z\u0131n\u0131z\u0131 art\u0131racak ve geli\u015ftirme s\u00fcrecinizi sorunsuz hale getirecek 50 kullan\u0131\u015fl\u0131 React snippet'\u0131 ile tan\u0131\u015fmaya haz\u0131r olun. Bu makale, her seviyeden geli\u015ftiriciye pratik \u00e7\u00f6z\u00fcmler sunuyor.","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-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/","og_locale":"tr_TR","og_type":"article","og_title":"React Geli\u015ftirmenizi H\u0131zland\u0131r\u0131n: En Faydal\u0131 50 React Snippet","og_description":"React projelerinde tekrarlayan kod yazmaktan s\u0131k\u0131ld\u0131n\u0131z m\u0131? Kodlama h\u0131z\u0131n\u0131z\u0131 art\u0131racak ve geli\u015ftirme s\u00fcrecinizi sorunsuz hale getirecek 50 kullan\u0131\u015fl\u0131 React snippet'\u0131 ile tan\u0131\u015fmaya haz\u0131r olun. Bu makale, her seviyeden geli\u015ftiriciye pratik \u00e7\u00f6z\u00fcmler sunuyor.","og_url":"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-03T23:32:03+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"32 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Geli\u015ftirmenizi H\u0131zland\u0131r\u0131n: En Faydal\u0131 50 React Snippet","datePublished":"2025-10-03T23:32:03+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/"},"wordCount":4498,"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-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/","url":"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/","name":"React Geli\u015ftirmenizi H\u0131zland\u0131r\u0131n: En Faydal\u0131 50 React Snippet","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-03T23:32:03+00:00","description":"React projelerinde tekrarlayan kod yazmaktan s\u0131k\u0131ld\u0131n\u0131z m\u0131? Kodlama h\u0131z\u0131n\u0131z\u0131 art\u0131racak ve geli\u015ftirme s\u00fcrecinizi sorunsuz hale getirecek 50 kullan\u0131\u015fl\u0131 React snippet'\u0131 ile tan\u0131\u015fmaya haz\u0131r olun. Bu makale, her seviyeden geli\u015ftiriciye pratik \u00e7\u00f6z\u00fcmler sunuyor.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-gelistirmenizi-hizlandirin-en-faydali-50-react-snippet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Geli\u015ftirmenizi H\u0131zland\u0131r\u0131n: En Faydal\u0131 50 React Snippet"}]},{"@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\/30963","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=30963"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30963\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}