React Refs ve useRef Hook'unu Kullanmak
React deklaratif bir yaklaşım kullanır. Siz state'i güncellersiniz ve React arayüzü (UI) günceller. Bu, çoğu görev için işe yarar.
Ancak bazen Virtual DOM'un dışına çıkmanız gerekir. Doğrudan gerçek bir HTML öğesine dokunmanız gerekebilir. İşte burada Refs ve useRef hook'u devreye girer.
Ref Nedir?
Bir Ref bir işaretçidir (pointer). React'i doğrudan yerel bir DOM düğümüne bağlar.
Neden useState yerine useRef kullanmalıyız?
State güncellemeleri yeniden render edilmeyi (re-render) tetikler. Bu, React'in bileşeni ekranda yeniden çizdiği anlamına gelir. Ref güncellemeleri yeniden render edilmeyi tetiklemez. Bu da onları, değişen ancak hemen arayüzde görünmesi gerekmeyen değerler için mükemmel kılar.
Yaygın kullanım durumları:
• Bir input alanına otomatik olarak odaklanmak. • Video veya ses öğelerini kontrol etmek (oynat/duraklat). • Bir öğenin genişliğini veya yüksekliğini ölçmek. • Aralıklar (intervals) veya zaman aşımları (timeouts) için zamanlayıcı kimliklerini (timer IDs) saklamak.
useRef nasıl kullanılır:
- React'ten
useRef'i içe aktarın. - Onu başlatın:
const myRef = useRef(null). - Bir öğeye bağlayın:
<input ref={myRef} />. - Değere şu şekilde erişin:
myRef.current.
Örnek 1: Bir input'a otomatik odaklanma
Bir kullanıcı bir sayfaya girdiğinde, imlecin metin kutusunda olmasını istersiniz. Bileşen yüklendikten (mount) sonra myRef.current.focus() metodunu çağırmak için useEffect kullanırsınız.
Örnek 2: Bir Kronometre
Eğer bir setInterval kimliğini state içinde saklarsanız, zamanlayıcı her tıklandığında bileşen yeniden render edilir. Bu yavaştır. Eğer kimliği bir ref içinde saklarsanız, bileşen hızlı kalır. Değer, tarayıcı için ekstra iş yükü oluşturmadan render'lar arasında güvende kalır.
State vs Ref:
• State: Yeniden render edilmeyi tetikler. UI verileri için kullanılır. Güncellemeler asenkrondur. • Ref: Yeniden render edilme tetiklemez. DOM erişimi ve bellek için kullanılır. Güncellemeler senkrondur.
Kıdemli Geliştiriciler İçin İpuçları:
• Aşırı kullanımdan kaçının. Ref'leri yalnızca deklaratif mantık yetersiz kaldığında kullanın.
• Belleği temizleyin. Temizleme (cleanup) fonksiyonunuzda aralıkları veya olay dinleyicilerini (event listeners) her zaman temizleyin.
• Render sırasında ref'lere yazmayın. ref.current değerini yalnızca useEffect veya olay işleyicileri (event handlers) içinde güncelleyin. Bu, yan etkileri (side effects) önler.
• forwardRef kullanın. Özel bir alt bileşene (child component) bir ref aktarmak istiyorsanız, o alt bileşeni React.forwardRef ile sarmalamanız gerekir.
Kaynak: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde