useRef

Şimdi daha detaylı bir şekilde, bir benzetme ile açıklayalım. useRef Ne İşe Yarar? useRef, komponentin yeniden render edilmesini tetiklemeyen bir "değer tutucu" sağlar. Bu, bir değeri "saklamak" anlamına gelir, ama bu değer değiştiğinde UI yeniden render edilmez. Genellikle DOM referanslarına erişmek veya bir değişkeni render döngüsüne etki etmeden saklamak için kullanılır. Benzetme: Bir okul sınıfı düşün. Bu sınıfta öğretmen (React komponenti) var. Öğretmenin tahtada yazdığı her şey (UI) çok önemli, çünkü öğrenciler (kullanıcılar) bunu görerek öğreniyorlar. useState öğretmenin tahta üzerine yazdığı yazıları ifade eder. Öğretmen her yazıyı değiştirdiğinde, öğrenciler buna bakacak ve öğrencilerin sınıfta başka işlere başlaması için tahta (UI) yeniden yazılacaktır. useRef ise öğretmenin cebinde taşıdığı notlar gibi düşünülebilir. Bu notlar, öğrencilerin görmediği, ancak öğretmenin cebinde tuttuğu verilerdir. Eğer öğretmen bu notları değiştirirse, öğrenciler bunu görmez çünkü tahtada bir değişiklik olmayacaktır. Öğretmen sadece notları kullanarak dersini ilerletir ama bu, sınıftaki genel görünümü (UI) etkilemez. useRef Kullanım Durumları: 1. DOM Erişimi: useRef, genellikle DOM elemanlarına erişmek için kullanılır. Bir input elemanına odaklanmak, bir düğmeye tıklamak gibi işlemleri yapabilirsiniz. Bu tür işlemler, UI'ı değiştirmez; sadece arka planda gerçekleşir. Örnek: const inputRef = useRef(null); const handleFocus = () => { inputRef.current.focus(); // Bu, input'a odaklanır ancak komponent yeniden render edilmez. }; return ( Odaklan ); 2. Değerleri Saklamak (Render'ı Etkilemeden): Bazen bir değeri saklamak istersiniz, ancak bu değerin değişmesi UI'ın yeniden render edilmesine yol açmamalıdır. Örneğin, bir zamanlayıcıyı takip etmek veya önceki bir değeri saklamak gibi. Örnek: const count = useRef(0); const increment = () => { count.current += 1; console.log(count.current); // Bu, sayacın değerini tutar ama UI'ı değiştirmez. }; return Arttır; Burada, count.current değişse de komponent yeniden render edilmez. Bu sayede, eski değerleri veya hesaplamaları tutabilirsiniz. Temel Fark: useState, UI'ı değiştirecek bir veri saklamak içindir ve bu verinin değişmesi her zaman render tetikler. useRef ise sadece veriyi tutmak için kullanılır ve bu verinin değişmesi UI'ın yeniden render edilmesine yol açmaz. Özetle: useState: UI'ı değiştiren değerler için. useRef: Render'ı etkilemeden, sadece veri tutmak ya da DOM'a erişmek için.

May 3, 2025 - 22:12

Şimdi daha detaylı bir şekilde, bir benzetme ile açıklayalım.

`useRef` Ne İşe Yarar?

useRef, komponentin yeniden render edilmesini tetiklemeyen bir "değer tutucu" sağlar. Bu, bir değeri "saklamak" anlamına gelir, ama bu değer değiştiğinde UI yeniden render edilmez. Genellikle DOM referanslarına erişmek veya bir değişkeni render döngüsüne etki etmeden saklamak için kullanılır.

Benzetme:

Bir okul sınıfı düşün. Bu sınıfta öğretmen (React komponenti) var. Öğretmenin tahtada yazdığı her şey (UI) çok önemli, çünkü öğrenciler (kullanıcılar) bunu görerek öğreniyorlar.

useState öğretmenin tahta üzerine yazdığı yazıları ifade eder. Öğretmen her yazıyı değiştirdiğinde, öğrenciler buna bakacak ve öğrencilerin sınıfta başka işlere başlaması için tahta (UI) yeniden yazılacaktır.
useRef ise öğretmenin cebinde taşıdığı notlar gibi düşünülebilir. Bu notlar, öğrencilerin görmediği, ancak öğretmenin cebinde tuttuğu verilerdir. Eğer öğretmen bu notları değiştirirse, öğrenciler bunu görmez çünkü tahtada bir değişiklik olmayacaktır. Öğretmen sadece notları kullanarak dersini ilerletir ama bu, sınıftaki genel görünümü (UI) etkilemez.

`useRef` Kullanım Durumları:

1. DOM Erişimi:

useRef, genellikle DOM elemanlarına erişmek için kullanılır. Bir input elemanına odaklanmak, bir düğmeye tıklamak gibi işlemleri yapabilirsiniz. Bu tür işlemler, UI'ı değiştirmez; sadece arka planda gerçekleşir.

Örnek:

const inputRef = useRef(null);

const handleFocus = () => {
  inputRef.current.focus(); // Bu, input'a odaklanır ancak komponent yeniden render edilmez.
};

return (
  <div>
    <input ref={inputRef} />
    <button onClick={handleFocus}>Odaklan</button>
  </div>
);

2. Değerleri Saklamak (Render'ı Etkilemeden):

Bazen bir değeri saklamak istersiniz, ancak bu değerin değişmesi UI'ın yeniden render edilmesine yol açmamalıdır. Örneğin, bir zamanlayıcıyı takip etmek veya önceki bir değeri saklamak gibi.

Örnek:

const count = useRef(0);

const increment = () => {
  count.current += 1;
  console.log(count.current); // Bu, sayacın değerini tutar ama UI'ı değiştirmez.
};

return <button onClick={increment}>Arttır</button>;

Burada, count.current değişse de komponent yeniden render edilmez. Bu sayede, eski değerleri veya hesaplamaları tutabilirsiniz.

Temel Fark:

useState, UI'ı değiştirecek bir veri saklamak içindir ve bu verinin değişmesi her zaman render tetikler. useRef ise sadece veriyi tutmak için kullanılır ve bu verinin değişmesi UI'ın yeniden render edilmesine yol açmaz.

Özetle: