Refs
React'te Refs, DOM öğelerine veya bileşen örneklerine doğrudan erişim sağlamak için kullanılan güçlü bir araçtır. Refs, özellikle input odaklama, metin seçimi, medya oynatma veya üçüncü taraf kütüphanelerle entegrasyon gibi doğrudan DOM etkileşimi gerektiren senaryolarda önemlidir. Refs kullanımı, uygulamanın performansını artırırken gereksiz render işlemlerini önler ve bileşenlerin yönetimini kolaylaştırır.
Refs, fonksiyonel bileşenlerde useRef hook'u ile, sınıf bileşenlerinde ise React.createRef yöntemiyle oluşturulabilir. Bu referanslar, bir DOM öğesi veya bileşen örneğine birkaç render boyunca kalıcı bir erişim sağlar ve React’in tek yönlü veri akışını bozmadan çalışır. Bu kavramlar, React’in bileşen mimarisi, durum yönetimi (state), veri akışı ve yaşam döngüsü (lifecycle) ile doğrudan bağlantılıdır.
Bu eğitim içeriğinde, Refs’in fonksiyonel ve sınıf bileşenlerinde nasıl etkin kullanılacağını, DOM ile programatik etkileşimleri ve modern SPA'larda kullanıcı deneyimini optimize etmeyi öğreneceksiniz. Ayrıca forwardRef gibi ileri seviye patternler de ele alınacak; bu patternler, prop drilling’i önleyerek gereksiz render’ları azaltır ve tekrar kullanılabilir bileşenler oluşturmanıza olanak tanır.
Temel Örnek
jsximport React, { useRef } from 'react';
function InputFocus() {
const inputRef = useRef(null);
const handleFocus = () => {
inputRef.current.focus();
};
return ( <div> <input ref={inputRef} type="text" placeholder="Metin girin..." /> <button onClick={handleFocus}>Input’a Odaklan</button> </div>
);
}
export default InputFocus;Bu örnekte InputFocus bileşeni bir input ve buton render eder. useRef ile oluşturulan inputRef, input elementine ref özelliği ile bağlanır. Butona tıklandığında handleFocus fonksiyonu çalışır ve inputRef.current.focus() ile input alanına odaklanılır. Bu kullanım, DOM ile doğrudan etkileşimi sağlarken gereksiz render’ları önler ve prop drilling sorununu azaltır. Refs, karmaşık bileşen mantığını kapsüllemeye ve DOM’a erişim gerektiren üçüncü taraf kütüphanelerle entegrasyona olanak tanır. useEffect ile birleştirildiğinde, bileşen yaşam döngüsü ile senkronize çalışarak stabil ve öngörülebilir bir etkileşim sağlar.
Pratik Örnek
jsximport React, { useRef, useEffect, useState } from 'react';
function ScrollList() {
const listRef = useRef(null);
const [items, setItems] = useState(Array.from({ length: 20 }, (_, i) => `Öğe ${i + 1}`));
useEffect(() => {
if (listRef.current) {
listRef.current.lastElementChild.scrollIntoView({ behavior: 'smooth' });
}
}, [items]);
const addItem = () => {
setItems(prev => [...prev, `Öğe ${prev.length + 1}`]);
};
return ( <div>
<ul ref={listRef} style={{ maxHeight: '200px', overflowY: 'auto' }}>
{items.map((item, index) => ( <li key={index}>{item}</li>
))} </ul> <button onClick={addItem}>Öğe Ekle</button> </div>
);
}
export default ScrollList;ScrollList örneği, Refs’in gerçek dünya uygulamasını gösterir. listRef, UL elementine bağlanır ve items state’i değiştiğinde useEffect son elementi görünür alana kaydırır. Bu pattern, Refs, state yönetimi ve yaşam döngüsü kavramlarını birleştirir, kullanıcı deneyimini iyileştirir. Chat uygulamaları, log panelleri veya kaydırılabilir listeler için idealdir. current özelliğinin varlığını kontrol etmek, Refs’i hook’larla kombinlemek ve DOM’a doğrudan müdahaleyi yaşam döngüsü dışında yapmamak önemlidir. Doğru Refs kullanımı, performansı artırır, bakımı kolaylaştırır ve UX’i geliştirir.
Refs kullanımı için en iyi uygulamalar: useRef’i fonksiyonel bileşenlerde tercih edin, state’i doğrudan Refs ile değiştirmeyin, yalnızca gerekli olduğu durumlarda DOM’a erişim sağlayın. Yaygın hatalar: state yerine Refs kullanmak, DOM’u lifecycle dışında değiştirmek, gereksiz render’lar oluşturmak. Performans optimizasyonu için DOM erişimini sınırlayın, Refs’i memo ve useCallback ile birleştirin ve current kontrolü ile asenkron işlemlerde uygulamanın stabilitesini sağlayın.
📊 Referans Tablosu
| React Element/Concept | Description | Usage Example |
|---|---|---|
| useRef | Fonksiyonel bileşenlerde kalıcı referans oluşturur | const inputRef = useRef(null) |
| createRef | Sınıf bileşenlerinde Refs oluşturur | this.inputRef = React.createRef() |
| current | Ref’in işaret ettiği DOM veya bileşen örneğine erişim sağlar | inputRef.current.focus() |
| forwardRef | Ref’i ebeveyn bileşenden çocuk bileşene geçirir | const Child = React.forwardRef((props, ref) => <div ref={ref} />) |
| scrollIntoView | DOM öğesini görünür alana kaydırır | listRef.current.lastElementChild.scrollIntoView({ behavior: 'smooth' }) |
Refs, React’te doğrudan DOM erişimi, performans optimizasyonu ve karmaşık UI etkileşimleri için temel bir araçtır. Önemli noktalar: useRef ve createRef kullanımı, useEffect ile lifecycle senkronizasyonu, gereksiz render’lardan kaçınma. İleri adımlar: forwardRef ile tekrar kullanılabilir bileşenler oluşturma, Refs’i üçüncü taraf kütüphanelerle entegre etme, memo ve useCallback ile optimizasyon. React DevTools ve resmi dokümantasyon ile bilgi derinleştirilebilir ve DOM yönetimi projelerde etkili hale getirilebilir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek