useRef
, React uygulamalarında referans oluşturmak ve bu referansı kullanarak DOM elementlerine veya React bileşenlerine erişim sağlamak için kullanılan bir Hook'tur.
-
DOM Manipülasyonları: DOM elementlerine erişim sağlamak ve bu elementleri manipüle etmek için kullanılabilir.
-
Değişkenlerin Saklanması: Component'in re-render edilmesine neden olmadan değişkenleri saklamak için kullanılabilir.
-
Focus ve Selection Durumları: Input alanlarına odaklanma veya belirli bir metni seçme gibi durumları kontrol etmek için kullanılabilir.
-
Component'in Re-render Edilmemesi: Değerleri güncellemek için kullanılan
useRef
, component'in re-render edilmesine neden olmaz. Bu, performansı artırabilir. -
Mutable Değerlerin Depolanması:
useRef
, mutable (değiştirilebilir) değerleri saklamak için idealdir ve bu değerlere erişim sağlar. -
DOM Elementlerine Erişim:
useRef
, DOM elementlerine kolayca erişim sağlar ve bu elementleri manipüle etmek için kullanılabilir.
forwardRef
, React bileşenlerinde bir ref'i child component'e iletmek için kullanılan bir fonksiyondur.
- Ref İletme: Parent component, child component'in ref'ine doğrudan erişim sağlamak için kullanılır. Böylece, child component'teki DOM elementlerine veya fonksiyonlara erişim mümkün olur.
-
Unnecessary Re-renders:
useRef
kullanılırken, değerleri güncellemek içincurrent
özelliğini doğrudan değiştirmek, component'in tekrar render edilmesine neden olmaz. Ancak, state benzeri bir kullanım yapıldığında (örneğin, bir objeyi değiştirmek), component'in re-render edilmesine neden olabilir. -
Ref İletme:
forwardRef
kullanılırken, ref'i iletmek için dikkatlice belirli fonksiyonları veya değerleri seçmek önemlidir. Gereksiz değerleri iletmek, kodu karmaşıklaştırabilir ve performans sorunlarına yol açabilir.
import React, { useRef, useEffect } from 'react';
function MyComponent() {
const myInputRef = useRef();
useEffect(() => {
// myInputRef.current, input elementine referans verir
myInputRef.current.focus();
}, []);
return <input ref={myInputRef} />;
}
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
// Child Component
const ChildComponent = forwardRef((props, ref) => {
const inputRef = useRef();
// Parent component ref'ini child component'e iletmek için useImperativeHandle kullanılır
useImperativeHandle(ref, () => ({
focusInput: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} />;
});
// Parent Component
function ParentComponent() {
const childRef = useRef();
const handleButtonClick = () => {
// Child component'in focusInput fonksiyonunu çağırarak input'a odaklanabiliriz
childRef.current.focusInput();
};
return (
<div>
{/* ChildComponent'e ref'i ileterek parent component ile iletişim kurarız */}
<ChildComponent ref={childRef} />
<button onClick={handleButtonClick}>Focus Input</button>
</div>
);
}```