{"id":37572,"date":"2026-01-09T14:30:40","date_gmt":"2026-01-09T11:30:40","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/"},"modified":"2026-01-09T14:30:40","modified_gmt":"2026-01-09T11:30:40","slug":"today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/","title":{"rendered":"Today I Truly Understood the useRef Hook (Not Just What It Does, But Why It Exists)"},"content":{"rendered":"<h2>Today I Truly Understood the useRef Hook (Not Just What It Does, But Why It Exists)<\/h2>\n<p>React geli\u015ftiricilerinin yolculu\u011funda, <code>useState<\/code> ve <code>useEffect<\/code> gibi hook&#8217;lar genellikle ilk \u00f6\u011frenilen ve en s\u0131k kullan\u0131lan ara\u00e7lard\u0131r. Ancak <code>useRef<\/code> hook&#8217;u, ilk bak\u0131\u015fta sadece DOM elementlerine eri\u015fmek i\u00e7in basit bir mekanizma gibi g\u00f6r\u00fcnse de, asl\u0131nda \u00e7ok daha derin bir amaca hizmet eder ve React&#8217;in deklaratif do\u011fas\u0131 ile imperatif d\u00fcnya aras\u0131ndaki kritik bir k\u00f6pr\u00fcd\u00fcr. Bu makale, <code>useRef<\/code>&#8216;in sadece ne i\u015fe yarad\u0131\u011f\u0131n\u0131 de\u011fil, neden var oldu\u011funu, hangi sorunlar\u0131 \u00e7\u00f6zd\u00fc\u011f\u00fcn\u00fc ve React ekosistemindeki ger\u00e7ek yerini anlaman\u0131za yard\u0131mc\u0131 olmay\u0131 ama\u00e7lamaktad\u0131r.<\/p>\n<h3><code>useRef<\/code> Nedir? Y\u00fczeydeki Anlam\u0131<\/h3>\n<p><code>useRef<\/code> hook&#8217;u, React fonksiyonel bile\u015fenlerinde mutable (de\u011fi\u015ftirilebilir) bir de\u011fer tutmak i\u00e7in kullan\u0131lan bir ara\u00e7t\u0131r. Fonksiyonel bile\u015fenler her render edildi\u011finde ba\u015ftan sona \u00e7al\u0131\u015f\u0131r ve yerel de\u011fi\u015fkenler her seferinde yeniden ba\u015flat\u0131l\u0131r. <code>useRef<\/code> ise, bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca de\u011ferini koruyan ve her render&#8217;da s\u0131f\u0131rlanmayan bir referans objesi sa\u011flar.<\/p>\n<h4>DOM Referanslar\u0131na Eri\u015fim<\/h4>\n<p><code>useRef<\/code>&#8216;in en yayg\u0131n ve bilinen kullan\u0131m alan\u0131, do\u011frudan bir DOM elementine referans almak ve ona imperatif olarak eri\u015fmektir. \u00d6rne\u011fin, bir <code>input<\/code> alan\u0131na odaklanmak, bir medya oynat\u0131c\u0131y\u0131 kontrol etmek veya bir animasyonu ba\u015flatmak gibi durumlarda <code>useRef<\/code> kullan\u0131l\u0131r. React, genellikle DOM&#8217;u do\u011frudan manip\u00fcle etmekten ka\u00e7\u0131nsa da, baz\u0131 durumlarda bu t\u00fcr do\u011frudan eri\u015fim ka\u00e7\u0131n\u0131lmaz hale gelir.<\/p>\n<h4><code>ref<\/code> Niteli\u011fi ile Ba\u011flant\u0131<\/h4>\n<p>Bir <code>useRef<\/code> objesini bir DOM elementine ba\u011flamak i\u00e7in, JSX i\u00e7indeki elemente <code>ref<\/code> niteli\u011fi atan\u0131r. Bu, React&#8217;in ilgili DOM d\u00fc\u011f\u00fcm\u00fcn\u00fc <code>useRef<\/code> objesinin <code>current<\/code> \u00f6zelli\u011fine atamas\u0131n\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-jsx\">\nimport React, { useRef } from 'react';\n\nfunction MyComponent() {\n  const inputRef = useRef(null);\n\n  const handleClick = () => {\n    inputRef.current.focus(); \/\/ input elementine odaklan\n  };\n\n  return (\n    <div>\n      <input type=\"text\" ref={inputRef} \/>\n      <button onClick={handleClick}>Odaklan<\/button>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<h4><code>current<\/code> \u00d6zelli\u011fi<\/h4>\n<p><code>useRef<\/code> hook'u, <code>current<\/code> ad\u0131nda tek bir \u00f6zelli\u011fe sahip basit bir JavaScript objesi d\u00f6nd\u00fcr\u00fcr. Bu <code>current<\/code> \u00f6zelli\u011fi, referans al\u0131nan de\u011feri veya DOM elementini tutar. <code>useRef(initialValue)<\/code> \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, <code>initialValue<\/code> de\u011feri <code>current<\/code> \u00f6zelli\u011fine atan\u0131r. Bu de\u011fer, bile\u015fen yeniden render edildi\u011finde bile korunur.<\/p>\n<h3><code>useRef<\/code> Neden Var? Temel \u0130htiya\u00e7 ve Felsefesi<\/h3>\n<p><code>useRef<\/code>'in varolu\u015f nedeni, React'in deklaratif do\u011fas\u0131 ile baz\u0131 imperatif gereksinimler aras\u0131ndaki bo\u015flu\u011fu doldurmakt\u0131r. React, genellikle UI'n\u0131n nas\u0131l g\u00f6r\u00fcnece\u011fini state'e g\u00f6re tan\u0131mlaman\u0131z\u0131 isterken, bazen do\u011frudan bir \u015fey \"yapman\u0131z\" gerekir.<\/p>\n<h4>React'in Deklaratif Yap\u0131s\u0131<\/h4>\n<p>React, UI'y\u0131 state'in bir fonksiyonu olarak tan\u0131mlad\u0131\u011f\u0131n\u0131z deklaratif bir k\u00fct\u00fcphanedir. Siz state'i de\u011fi\u015ftirirsiniz, React ise bu de\u011fi\u015fikli\u011fe g\u00f6re DOM'u g\u00fcnceller. Bu yakla\u015f\u0131m, karma\u015f\u0131k UI'lar\u0131 y\u00f6netmeyi \u00e7ok daha kolay hale getirir \u00e7\u00fcnk\u00fc do\u011frudan DOM manip\u00fclasyonuyla u\u011fra\u015fmak zorunda kalmazs\u0131n\u0131z.<\/p>\n<h4>\u0130mperatif \u0130\u015flemler \u0130\u00e7in Bir K\u00f6pr\u00fc<\/h4>\n<p>Ancak baz\u0131 durumlarda, deklaratif yakla\u015f\u0131m yeterli olmaz. \u00d6rne\u011fin, bir <code>input<\/code> alan\u0131na odaklanmak, bir video oynat\u0131c\u0131y\u0131 durdurmak veya bir canvas \u00fczerinde \u00e7izim yapmak gibi i\u015flemler do\u011frudan DOM API'leri arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r ve bunlar imperatif i\u015flemlerdir. <code>useRef<\/code>, React'in deklaratif d\u00fcnyas\u0131ndan \u00e7\u0131k\u0131p bu t\u00fcr imperatif i\u015flemleri g\u00fcvenli bir \u015fekilde ger\u00e7ekle\u015ftirmemizi sa\u011flayan bir k\u00f6pr\u00fc g\u00f6revi g\u00f6r\u00fcr.<\/p>\n<h4>Component Ya\u015fam D\u00f6ng\u00fcs\u00fc Boyunca De\u011ferleri Korumak<\/h4>\n<p><code>useRef<\/code>'in daha az bilinen ancak kritik bir kullan\u0131m alan\u0131, bile\u015fenin yeniden render edilmesi durumunda bile belirli bir de\u011feri korumakt\u0131r. <code>useState<\/code>'in aksine, <code>useRef<\/code>'in <code>current<\/code> \u00f6zelli\u011fini de\u011fi\u015ftirmek bile\u015fenin yeniden render edilmesini tetiklemez. Bu \u00f6zellik, \u00f6zellikle performans a\u00e7\u0131s\u0131ndan kritik durumlarda veya UI'y\u0131 etkilemeyen arka plan de\u011ferlerini saklamak i\u00e7in \u00e7ok de\u011ferlidir.<\/p>\n<h3><code>useRef<\/code> Kullan\u0131m Alanlar\u0131: Ref'lere Eri\u015fmek<\/h3>\n<p>DOM referanslar\u0131na eri\u015fim, <code>useRef<\/code>'in en temel ve anla\u015f\u0131l\u0131r kullan\u0131m senaryosudur.<\/p>\n<h4>Odaklanma (Focus) Y\u00f6netimi<\/h4>\n<p>Bir formda belirli bir <code>input<\/code> alan\u0131na otomatik odaklanma veya bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda ba\u015fka bir alana odaklanma gibi senaryolarda <code>useRef<\/code> kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-jsx\">\nimport React, { useRef, useEffect } from 'react';\n\nfunction FocusInput() {\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    \/\/ Bile\u015fen y\u00fcklendi\u011finde input'a otomatik odaklan\n    inputRef.current.focus();\n  }, []); \/\/ Sadece bir kez \u00e7al\u0131\u015f\u0131r\n\n  return (\n    <div>\n      <input type=\"text\" ref={inputRef} placeholder=\"Buraya odaklan\u0131lacak\" \/>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<h4>Medya Oynat\u0131c\u0131 Kontrol\u00fc<\/h4>\n<p>Bir <code><video><\/code> veya <code><audio><\/code> elementi \u00fczerinde oynatma, duraklatma, ses seviyesini ayarlama gibi kontrolleri uygulamak i\u00e7in de <code>useRef<\/code>'ten faydalan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-jsx\">\nimport React, { useRef } from 'react';\n\nfunction VideoPlayer() {\n  const videoRef = useRef(null);\n\n  const playVideo = () => {\n    videoRef.current.play();\n  };\n\n  const pauseVideo = () => {\n    videoRef.current.pause();\n  };\n\n  return (\n    <div>\n      <video ref={videoRef} width=\"320\" height=\"240\" controls>\n        <source src=\"movie.mp4\" type=\"video\/mp4\" \/>\n        Taray\u0131c\u0131n\u0131z video etiketini desteklemiyor.\n      <\/video>\n      <button onClick={playVideo}>Oynat<\/button>\n      <button onClick={pauseVideo}>Duraklat<\/button>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<h4>\u00dc\u00e7\u00fcnc\u00fc Parti K\u00fct\u00fcphanelerle Entegrasyon<\/h4>\n<p>Baz\u0131 \u00fc\u00e7\u00fcnc\u00fc parti k\u00fct\u00fcphaneler (\u00f6rne\u011fin, grafik k\u00fct\u00fcphaneleri, harita bile\u015fenleri) DOM elementlerine do\u011frudan eri\u015fim gerektirebilir. <code>useRef<\/code> bu k\u00fct\u00fcphanelerin React bile\u015fenleriyle entegrasyonunu kolayla\u015ft\u0131r\u0131r.<\/p>\n<h3><code>useRef<\/code> Kullan\u0131m Alanlar\u0131: De\u011fi\u015fken De\u011ferleri Saklamak (Mutasyon)<\/h3>\n<p><code>useRef<\/code>'in DOM d\u0131\u015f\u0131ndaki en g\u00fc\u00e7l\u00fc kullan\u0131m alanlar\u0131ndan biri, bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca mutable de\u011ferleri saklamakt\u0131r.<\/p>\n<h4>Yeniden Render Tetiklemeyen De\u011fi\u015fkenler<\/h4>\n<p><code>useState<\/code>'in aksine, <code>useRef<\/code>'in <code>current<\/code> \u00f6zelli\u011fini de\u011fi\u015ftirmek bile\u015fenin yeniden render edilmesini tetiklemez. Bu, UI'y\u0131 etkilemeyen ancak bile\u015fen i\u00e7inde kal\u0131c\u0131 olmas\u0131 gereken de\u011ferler i\u00e7in idealdir. \u00d6rne\u011fin, bir saya\u00e7 de\u011feri, bir zamanlay\u0131c\u0131 kimli\u011fi veya bir \u00f6nceki prop de\u011feri gibi.<\/p>\n<h4>\u00d6nceki De\u011ferleri Saklama<\/h4>\n<p>Bir de\u011ferin \u00f6nceki halini tutmak, <code>useEffect<\/code> hook'u ile birlikte <code>useRef<\/code> kullan\u0131larak s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir senaryodur.<\/p>\n<pre><code class=\"language-jsx\">\nimport React, { useRef, useEffect } from 'react';\n\nfunction PreviousValueDisplay({ count }) {\n  const prevCountRef = useRef();\n\n  useEffect(() => {\n    prevCountRef.current = count; \/\/ Mevcut say\u0131y\u0131 bir sonraki render i\u00e7in sakla\n  }, [count]); \/\/ count her de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r\n\n  const previousCount = prevCountRef.current;\n\n  return (\n    <div>\n      <p>Mevcut Say\u0131: {count}<\/p>\n      <p>\u00d6nceki Say\u0131: {previousCount}<\/p>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<h4>Zamanlay\u0131c\u0131 Kimlikleri (Timer IDs)<\/h4>\n<p><code>setInterval<\/code> veya <code>setTimeout<\/code> gibi zamanlay\u0131c\u0131 fonksiyonlar\u0131 kullan\u0131ld\u0131\u011f\u0131nda, bu zamanlay\u0131c\u0131lar\u0131 temizlemek i\u00e7in d\u00f6nd\u00fcrd\u00fckleri ID'leri saklamak gerekir. <code>useRef<\/code>, bu ID'leri bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca g\u00fcvenli bir \u015fekilde tutmak i\u00e7in m\u00fckemmel bir yerdir.<\/p>\n<pre><code class=\"language-jsx\">\nimport React, { useRef, useEffect, useState } from 'react';\n\nfunction TimerComponent() {\n  const [count, setCount] = useState(0);\n  const intervalRef = useRef(); \/\/ Zamanlay\u0131c\u0131 ID'sini saklamak i\u00e7in\n\n  useEffect(() => {\n    intervalRef.current = setInterval(() => {\n      setCount(prevCount => prevCount + 1);\n    }, 1000);\n\n    return () => {\n      clearInterval(intervalRef.current); \/\/ Bile\u015fen unmount oldu\u011funda zamanlay\u0131c\u0131y\u0131 temizle\n    };\n  }, []);\n\n  return (\n    <div>\n      <p>Saya\u00e7: {count}<\/p>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<h3><code>useRef<\/code> ve Performans: Yeniden Render Etmeden De\u011ferleri Korumak<\/h3>\n<p><code>useRef<\/code>'in performansa katk\u0131s\u0131, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda g\u00f6z ard\u0131 edilemez.<\/p>\n<h4>Gereksiz Render'lar\u0131 Engelleme<\/h4>\n<p>Bir de\u011fer de\u011fi\u015fti\u011finde bile\u015fenin yeniden render edilmesini istemedi\u011fimiz durumlarda <code>useRef<\/code> kullanmak, <code>useState<\/code>'e g\u00f6re \u00f6nemli bir performans avantaj\u0131 sa\u011flar. <code>useState<\/code> ile bir de\u011feri g\u00fcncelledi\u011finizde, React bile\u015feni yeniden render eder. Ancak <code>useRef.current<\/code> de\u011ferini de\u011fi\u015ftirmek, bu yeniden render i\u015flemini tetiklemez. Bu, \u00f6zellikle s\u0131k g\u00fcncellenen ancak UI'y\u0131 do\u011frudan etkilemeyen de\u011ferler i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<h4>Haf\u0131za Y\u00f6netimi<\/h4>\n<p><code>useRef<\/code> ile olu\u015fturulan referans objesi, bile\u015fen haf\u0131zadan kald\u0131r\u0131ld\u0131\u011f\u0131nda (unmount oldu\u011funda) otomatik olarak temizlenir. Bu, haf\u0131za s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemeye yard\u0131mc\u0131 olur. Ancak <code>current<\/code> \u00f6zelli\u011fine atad\u0131\u011f\u0131n\u0131z de\u011ferin kendisi i\u00e7in ek temizlik gerekebilir (\u00f6rne\u011fin, bir event listener veya bir zamanlay\u0131c\u0131).<\/p>\n<h4>B\u00fcy\u00fck Veri Setleri ve Referanslar<\/h4>\n<p>Bazen bir bile\u015fen i\u00e7inde b\u00fcy\u00fck bir veri yap\u0131s\u0131n\u0131 veya karma\u015f\u0131k bir objeyi tutman\u0131z gerekebilir, ancak bu objenin her de\u011fi\u015fti\u011finde bile\u015fenin yeniden render edilmesini istemezsiniz. <code>useRef<\/code> bu t\u00fcr durumlarda, objeye bir referans tutarak ve gerekti\u011finde do\u011frudan bu referans \u00fczerinden manip\u00fclasyon yaparak performans avantaj\u0131 sa\u011flayabilir.<\/p>\n<h3><code>useRef<\/code> vs. <code>useState<\/code>: Ne Zaman Hangisini Kullanmal\u0131?<\/h3>\n<p>Bu iki hook aras\u0131ndaki fark\u0131 anlamak, React uygulamalar\u0131nda do\u011fru arac\u0131 se\u00e7mek i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n<h4><code>useState<\/code>: UI'y\u0131 Etkileyen Durumlar<\/h4>\n<p><code>useState<\/code>, bir bile\u015fenin UI's\u0131n\u0131 etkileyen ve her de\u011fi\u015fti\u011finde bile\u015fenin yeniden render edilmesini gerektiren durumlar\u0131 (state) y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. Kullan\u0131c\u0131 etkile\u015fimleri, veri \u00e7ekme sonu\u00e7lar\u0131 gibi do\u011frudan kullan\u0131c\u0131 aray\u00fcz\u00fcnde g\u00f6r\u00fcn\u00fcr bir de\u011fi\u015fikli\u011fe yol a\u00e7an her \u015fey <code>useState<\/code> ile y\u00f6netilmelidir.<\/p>\n<h4><code>useRef<\/code>: UI'y\u0131 Do\u011frudan Etkilemeyen De\u011ferler<\/h4>\n<p><code>useRef<\/code> ise, a\u015fa\u011f\u0131daki durumlar i\u00e7in tercih edilmelidir:<br \/>\n*   DOM elementlerine do\u011frudan eri\u015fim gerekti\u011finde.<br \/>\n*   Bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca kal\u0131c\u0131 olmas\u0131 gereken, ancak UI'y\u0131 etkilemeyen mutable de\u011ferleri saklamak i\u00e7in (\u00f6rne\u011fin, zamanlay\u0131c\u0131 ID'leri, \u00f6nceki de\u011ferler, performans saya\u00e7lar\u0131).<br \/>\n*   Yeniden render'\u0131 tetiklemeden bir de\u011feri g\u00fcncellemek gerekti\u011finde.<\/p>\n<h4>Ortak Kullan\u0131m Senaryolar\u0131 Kar\u015f\u0131la\u015ft\u0131rmas\u0131<\/h4>\n<p>A\u015fa\u011f\u0131daki tablo, <code>useState<\/code> ve <code>useRef<\/code> aras\u0131ndaki temel farklar\u0131 \u00f6zetlemektedir:<\/p>\n<p>| \u00d6zellik           | <code>useState<\/code>                                   | <code>useRef<\/code>                                       |<br \/>\n| :---------------- | :------------------------------------------- | :--------------------------------------------- |<br \/>\n| <strong>Ama\u00e7<\/strong>          | UI durumunu y\u00f6netmek, yeniden render tetiklemek | Mutable de\u011ferleri veya DOM referanslar\u0131n\u0131 tutmak |<br \/>\n| <strong>Render Etkisi<\/strong> | De\u011fi\u015fimde bile\u015feni yeniden render eder       | De\u011fi\u015fimde bile\u015feni yeniden render etmez        |<br \/>\n| <strong>De\u011fer Tipi<\/strong>    | Immutable (genellikle)                       | Mutable                                        |<br \/>\n| <strong>Ba\u015flang\u0131\u00e7 De\u011feri<\/strong> | Her render'da yeniden ba\u015flat\u0131l\u0131r             | Yaln\u0131zca ilk render'da ba\u015flat\u0131l\u0131r, sonra korunur |<br \/>\n| <strong>Kullan\u0131m Alan\u0131<\/strong> | Form giri\u015fleri, toggle durumlar\u0131, veri listeleri | DOM eri\u015fimi, zamanlay\u0131c\u0131 ID'leri, \u00f6nceki de\u011ferler |<\/p>\n<h3><code>useRef<\/code> ile \u0130lgili Dikkat Edilmesi Gerekenler ve Yayg\u0131n Hatalar<\/h3>\n<p><code>useRef<\/code> g\u00fc\u00e7l\u00fc bir ara\u00e7 olsa da, yanl\u0131\u015f kullan\u0131ld\u0131\u011f\u0131nda beklenmedik davran\u0131\u015flara veya hatalara yol a\u00e7abilir.<\/p>\n<h4><code>current<\/code> \u00d6zelli\u011finin Mutasyonu<\/h4>\n<p><code>useRef<\/code> taraf\u0131ndan d\u00f6nd\u00fcr\u00fclen objenin <code>current<\/code> \u00f6zelli\u011fini do\u011frudan de\u011fi\u015ftirmek g\u00fcvenlidir ve ama\u00e7lanan bir kullan\u0131md\u0131r. Ancak, <code>useRef<\/code>'in kendisini (yani <code>ref<\/code> objesini) do\u011frudan de\u011fi\u015ftirmeye \u00e7al\u0131\u015fmaktan ka\u00e7\u0131n\u0131n.<\/p>\n<h4>Render S\u0131ras\u0131nda <code>ref.current<\/code> De\u011ferini Okuma\/Yazma<\/h4>\n<p>React'in render faz\u0131 saf olmal\u0131d\u0131r, yani yan etkiler i\u00e7ermemelidir. <code>ref.current<\/code> de\u011ferini okumak veya yazmak, \u00f6zellikle bu de\u011fer UI'n\u0131n render edilme \u015feklini etkiliyorsa, yan etki olarak kabul edilebilir. Bu t\u00fcr i\u015flemler genellikle <code>useEffect<\/code> hook'u i\u00e7inde yap\u0131lmal\u0131d\u0131r.<\/p>\n<pre><code class=\"language-jsx\">\n\/\/ K\u00d6T\u00dc KULLANIM: Render s\u0131ras\u0131nda yan etki\nfunction BadComponent() {\n  const myRef = useRef(0);\n  myRef.current = myRef.current + 1; \/\/ Her render'da ref'i de\u011fi\u015ftiriyor\n  \/\/ Bu beklenmedik davran\u0131\u015flara yol a\u00e7abilir\n  return <p>Say\u0131: {myRef.current}<\/p>;\n}\n\n\/\/ \u0130Y\u0130 KULLANIM: useEffect i\u00e7inde yan etki\nfunction GoodComponent() {\n  const myRef = useRef(0);\n  useEffect(() => {\n    myRef.current = myRef.current + 1; \/\/ Yan etki useEffect i\u00e7inde\n  }, []); \/\/ Sadece ilk render'da \u00e7al\u0131\u015f\u0131r\n  return <p>Say\u0131: {myRef.current}<\/p>;\n}\n<\/pre>\n<p><\/code><\/p>\n<h4><code>ref<\/code>'leri Props Olarak Ge\u00e7irme<\/h4>\n<p>Bir <code>useRef<\/code> objesini do\u011frudan bir alt bile\u015fene <code>ref<\/code> prop'u olarak ge\u00e7irmek, React'in <code>ref<\/code> y\u00f6netim sistemiyle \u00e7ak\u0131\u015fabilir. E\u011fer bir alt bile\u015fenin DOM'una eri\u015fmek istiyorsan\u0131z, <code>forwardRef<\/code> API'sini kullanman\u0131z gerekir.<\/p>\n<pre><code class=\"language-jsx\">\n\/\/ ChildComponent.js\nimport React, { forwardRef } from 'react';\n\nconst ChildComponent = forwardRef((props, ref) => {\n  return <input type=\"text\" ref={ref} \/>;\n});\n\nexport default ChildComponent;\n\n\/\/ ParentComponent.js\nimport React, { useRef } from 'react';\nimport ChildComponent from '.\/ChildComponent';\n\nfunction ParentComponent() {\n  const inputRef = useRef(null);\n\n  const handleClick = () => {\n    inputRef.current.focus();\n  };\n\n  return (\n    <div>\n      <ChildComponent ref={inputRef} \/>\n      <button onClick={handleClick}>Odaklan<\/button>\n    <\/div>\n  );\n}\n<\/pre>\n<p><\/code><\/p>\n<h3>Sonu\u00e7<\/h3>\n<p><code>useRef<\/code> hook'u, React'in deklaratif paradigmas\u0131 i\u00e7inde imperatif operasyonlar ger\u00e7ekle\u015ftirmek ve bile\u015fen ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca mutable de\u011ferleri korumak i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r. Sadece DOM elementlerine eri\u015fimden \u00e7ok daha fazlas\u0131n\u0131 sunar; gereksiz yeniden render'lar\u0131 \u00f6nleyerek performans\u0131 art\u0131r\u0131r ve karma\u015f\u0131k state y\u00f6netimi senaryolar\u0131nda <code>useState<\/code>'e g\u00fc\u00e7l\u00fc bir alternatif sunar. <code>useRef<\/code>'in ne zaman ve neden kullan\u0131ld\u0131\u011f\u0131n\u0131 ger\u00e7ekten anlamak, daha sa\u011flam, verimli ve bak\u0131m\u0131 kolay React uygulamalar\u0131 geli\u015ftirmenizi sa\u011flayacakt\u0131r. Art\u0131k <code>useRef<\/code>'in sadece ne yapt\u0131\u011f\u0131n\u0131 de\u011fil, neden var oldu\u011funu ve React ekosistemindeki stratejik \u00f6nemini de biliyorsunuz.<\/p>\n<h3>SSS (S\u0131k Sorulan Sorular)<\/h3>\n<h4><code>useRef<\/code> ile <code>useState<\/code> aras\u0131ndaki temel fark nedir?<\/h4>\n<p><code>useState<\/code>, UI'y\u0131 etkileyen ve de\u011fi\u015fti\u011finde bile\u015fenin yeniden render edilmesini tetikleyen durumlar\u0131 y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. <code>useRef<\/code> ise, bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca kal\u0131c\u0131 olmas\u0131 gereken, ancak de\u011fi\u015fti\u011finde yeniden render'\u0131 tetiklemeyen mutable de\u011ferleri veya DOM referanslar\u0131n\u0131 tutmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<h4><code>useRef<\/code> ne zaman <code>null<\/code> olur?<\/h4>\n<p><code>useRef(null)<\/code> ile ba\u015flat\u0131ld\u0131\u011f\u0131nda <code>current<\/code> \u00f6zelli\u011fi ba\u015flang\u0131\u00e7ta <code>null<\/code> olur. E\u011fer bir DOM elementine ba\u011flanm\u0131\u015fsa, bile\u015fen mount edildi\u011finde <code>current<\/code> \u00f6zelli\u011fi ilgili DOM elementine i\u015faret eder. Bile\u015fen unmount edildi\u011finde ise <code>current<\/code> tekrar <code>null<\/code> olabilir (React taraf\u0131ndan otomatik olarak).<\/p>\n<h4><code>useRef<\/code> ile olu\u015fturulan de\u011ferler component'in her render'\u0131nda s\u0131f\u0131rlan\u0131r m\u0131?<\/h4>\n<p>Hay\u0131r, <code>useRef<\/code> ile olu\u015fturulan de\u011ferler, <code>current<\/code> \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla bile\u015fenin t\u00fcm ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca korunur ve her render'da s\u0131f\u0131rlanmaz. Yaln\u0131zca bile\u015fen ilk kez mount edildi\u011finde <code>initialValue<\/code> ile ba\u015flat\u0131l\u0131r.<\/p>\n<h4><code>useRef<\/code>'i <code>forwardRef<\/code> ile nas\u0131l kullan\u0131r\u0131m?<\/h4>\n<p>Bir \u00fcst bile\u015fenden alt bile\u015fenin DOM elementine veya bir React bile\u015fenine ref ge\u00e7irmek i\u00e7in <code>forwardRef<\/code> kullan\u0131l\u0131r. <code>forwardRef<\/code>, bir bile\u015fenin ref'i bir alt bile\u015fene \"iletmesine\" olanak tan\u0131r. Alt bile\u015fen bu ref'i kendi i\u00e7inde bir DOM elementine veya ba\u015fka bir React bile\u015fenine atayabilir.<\/p>\n","protected":false},"excerpt":{"rendered":"Mevcut Say\u0131: {count}","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":[1],"tags":[],"class_list":{"0":"post-37572","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","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>Today I Truly Understood the useRef Hook (Not Just What It Does, But Why It Exists) - 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\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Today I Truly Understood the useRef Hook (Not Just What It Does, But Why It Exists)\" \/>\n<meta property=\"og:description\" content=\"Mevcut Say\u0131: {count}\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-09T11:30:40+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=\"11 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Today I Truly Understood the useRef Hook (Not Just What It Does, But Why It Exists)\",\"datePublished\":\"2026-01-09T11:30:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/\"},\"wordCount\":1924,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/\",\"name\":\"Today I Truly Understood the useRef Hook (Not Just What It Does, But Why It Exists) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-09T11:30:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Today I Truly Understood the useRef Hook (Not Just What It Does, But Why It Exists)\"}]},{\"@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":"Today I Truly Understood the useRef Hook (Not Just What It Does, But Why It Exists) - 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\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/","og_locale":"tr_TR","og_type":"article","og_title":"Today I Truly Understood the useRef Hook (Not Just What It Does, But Why It Exists)","og_description":"Mevcut Say\u0131: {count}","og_url":"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-09T11:30:40+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"11 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Today I Truly Understood the useRef Hook (Not Just What It Does, But Why It Exists)","datePublished":"2026-01-09T11:30:40+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/"},"wordCount":1924,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/","url":"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/","name":"Today I Truly Understood the useRef Hook (Not Just What It Does, But Why It Exists) - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-09T11:30:40+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/today-i-truly-understood-the-useref-hook-not-just-what-it-does-but-why-it-exists\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Today I Truly Understood the useRef Hook (Not Just What It Does, But Why It Exists)"}]},{"@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\/37572","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=37572"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37572\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}