useRef ne işe yarar?

useRef ne işe yarar?

useRef, React kütüphanesindeki bir kancadır ve JavaScript'teki referansları temsil eder. useRef, bir değeri saklamak ve güncellemek için kullanılır. useRef, state yönetimi yapmadan bile React bileşenlerinde tutarlılık sağlamak için kullanılabilir.

Bir useRef kancası, React bileşenlerinde bir değişken oluşturmak için kullanılabilir. useRef kancası ile oluşturulan değişken, state veya props'tan bağımsız olarak bellekte kalır ve güncellenebilir.

useRef, React bileşenlerinde DOM düğümüne erişmek veya çeşitli değerleri tutmak için de kullanılabilir. Örneğin, bir HTML formunda kullanıcı girişi yakalamak veya animasyonları kontrol etmek için useRef kullanılabilir.

Bir useRef kancası oluştururken useState kancasını kullanır gibi useRef kancasını kullanabilirsiniz. useRef, bir initialize değeri alırken, bu değer gerçek bir state olarak işlenmez. useRef kancası, bir değeri referans olarak saklamak ve güncellemek için kullanılır.

Örneğin, aşağıdaki kodda, useRef kancası kullanılarak bir sayaç değeri saklanır ve güncellenir:

  
    import React, { useRef } from "react";

    function Counter() {
      const counterRef = useRef(0);
      
      const increment = () => {
        counterRef.current += 1;
        console.log(counterRef.current);
      };
      
      return (
        

          Artır
        
      );
    }
  

Yukarıdaki örnekte, useRef kancası kullanarak counterRef adında bir değişken oluşturuldu. İlk değer olarak 0 atanır. Artır düğmesine tıklandığında, counterRef değeri bir artırılır ve güncellenen değer konsola yazdırılır.

useRef, React bileşenlerinde DOM düğümlerine erişmek için de kullanılabilir. Bunun için useRef ile bir değişken oluşturulur ve bu değişken, JSX içerisinde ref özelliğine atanır.

Örneğin, aşağıdaki kodda, useRef kullanılarak bir input elementine erişilir:

  
    import React, { useRef } from "react";

    function TextInput() {
      const inputRef = useRef(null);
      
      const focusInput = () => {
        inputRef.current.focus();
      };
      
      return (
        

          
          Inputa Odaklan
        
      );
    }
  

Yukarıdaki örnekte, useRef kancası ile inputRef isimli bir değişken oluşturulur. Bu değişken, input elementinin ref özelliğine atanır. Odaklan düğmesine tıkladığınızda, input elementi odaklanır ve kullanıcı girişi yapabilirsiniz.

Sıkça Sorulan Sorular

useRef, React Hooks API'sinin bir parçası olan bir fonksiyondur. useRef fonksiyonu, React bileşeni içerisinde tutulan durumu(değişkenleri) korumak için kullanılır.

useRef fonksiyonu, useRef ismiyle bir değişken oluşturmayı sağlar. Bu değişken, bileşenin her render edildiğinde aynı referansı korur.

useRef fonksiyonu, normal bir değişkenin referansını tutabildiği için genellikle DOM manipülasyonlarında veya yan etkilerin takibinde kullanılır. Aynı zamanda useImperativeHandle fonksiyonuyla birlikte kullanıldığında harici bir bileşenin özelliklerine erişmek için de kullanılabilir.

useState, bileşenin render işlemi sırasında durumu değiştirmek için kullanılır ve her durum değişikliğinde yeniden render yapılır. useRef ise bileşenin render işlemi sırasında durumu güncellemek yerine değerleri korumak için kullanılır ve render işlemi sırasında güncellenmez.

useRef, genellikle aşağıdaki durumlar için kullanılır: - DOM manipülasyonları (elementin focus, scroll gibi özelliklerine erişmek) - Animasyonlarda veya zamanlayıcılarda (son render sırasında güncellenmeyen bir değeri takip etmek) - Yan etkilerin takibinde (bileşen güncellenmesine rağmen yan etkinin sadece ilk render'da yapılması gereken durumları takip etmek)

Aşağıda useRef'in nasıl kullanıldığını gösteren örnek bir kod bulunmaktadır: ``` import React, { useRef } from 'react'; function MyComponent() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return (