Photo by Mika Baumeister on Unsplash

REACT HOOK SERIES

React useRef ve useImperativeHandle

Hook konusunda seriye devam ediyoruz. Bu yazıda React içerisinde gelen useRef, useImperativeHandle Hook üzerinde duracağız.

useRef

Ref objesi, VirtualDOM içerisindeki bileşenin tarayıcadaki gerçek DOM referansına olan bağına erişim için kullandığımız bir Hooktur..

const refContainer = useRef(initialValue);

useRef bize bir referans nesnesi döner. Bu nesne bizim

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

1nci adımda null ile bir Ref Objesi kullanacağımızı belirtiyoruz.

2nci adımda input vb bileşene ref olacak şekilde setliyoruz. VirtualDOM eşleşmesinde bu DOM referansına artık current üzerinden erişebileceğiz

3ncü adımda artık bir düğmeye tıkladığımızda gerçek DOM elemanı üzerinden işlem yapabiliriz.

inputEl elemanin ref aldığı değer

useImperativeHandle

Bu Hook fonksiyon bileşeninize dışarıdan imperative erişim için API sağlayarak , parent bileşenin bu bileşen içerisindeki API tüketebilmesine olanak sağlar.

Burada useImperativeHandle ile birlikte useRef ve forwardRef kullanmak gerekiyor.

Bu senaryoda FancyInput bileşenini dışarıya API sağlaması için açıyoruz. Burada useImperativeHandle içerisine parent component sağlayacağımız fonksiyonları yazıyoruz.. Örneğin myFocus

Daha sonra forwardRef ile referansını parent bileşenin kullanabileceği hale getiriyoruz.

Source Kod

GitHub kodu

Referanslar

• https://reactjs.org/docs/hooks-reference.html#useref
• https://reactjs.org/docs/hooks-reference.html#useimperativehandle

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.