Hi and welcome to this video.
Today we're going to be discussing one
of the most important concepts in react native.
That is the useref hook.
Useref hook is a hook that lets you keep
a reference to a DOM node or react element across renders.
It is useful when you need to interact with DOM directly or when you need to keep
a value that does not change between renders.
So let's take an example to understand this better.
Let's say you have a component that displays a list of items and you want
to add a button that when clicked, scrolls the list to the top of the scroll view.
To do this, we're going to need to import a scroll view.
First of all, we're going to have to put it here.
And let's say that this scroll view
component has bunch of hello world text components inside of it.
So let's say that we have 100.
So let's create an array with
actually let's do 1000 and let's fill this with zeros.
This is just going to create array with thousand elements full of zeros.
But we are going to use this to map
and then let's do value and this returns a text.
And let's say the key because we'll need it is let's take the index.
Let's just make the index the key and I missed the parenthesis here.
Right now if I save this,
I have a bunch of hello world texts that I have to scroll through.
Okay, and now let's create a button.
And this button on press should scroll at the top of the handle click.
At the top of this scroll view.
Now I get an error because I don't have the handle click.
Let's give this a title and say scroll to top.
And let's create the handle click function that will do nothing so far.
And let's import the button components here.
And this is our button here, scroll to top.
Okay, it does nothing so far.
So if we wanted to be able to access the scroll and say that we want to scroll
it to the top, what we would need is the reference to the DOM.
And I really want you to understand very clearly why this is needed.
So in react native you create user interfaces using a set of predefined
components that are part of the react native API.
For example, scroll view, right?
We didn't create that component ourselves.
It's not a custom components.
We grabbed it from react native's library.
So these components are implemented
in JavaScript and allow you to create platform specific UIs for iOS or Android.
However, sometimes you need to access
functionality that is not provided by the standard react native API.
There are some functions that might come with react native API.
For example, on scroll event that comes
with scroll view is one of the things that you could use.
But sometimes the functions that you might
need specifically might not be available when you want to use it in a specific way.
And this is where references come in.
References allow you to access the underlying native components and their
properties and methods that are not available through the react native API.
In case of scrolling a scroll view
to the top on a bottom press we would need access to a method called scrollTo
that is provided by the underlying native components of the scroll view.
This method is not part of the standard react native API and therefore cannot be
accessed using a standard react native component.
So now let's see how we could use references to make this happen.
To use a reference we would have to use useref hook.
Okay?
We import the useref here and all you need to do to access the scroll view reference
is just say ref and then whatever we define as a reference.
So let's create for example, scroll view reference and use ref null,
okay, with no initial value and let's assign it to the scroll view.
And here I just quickly want to mention how useref hooks work.
So useref hook is used to store
a reference to a value and in this case this value is scroll view component.
The initial value of the scroll view ref
is set to null but as soon as the component is rendered and the ref prop
is passed to the scroll view component, the scroll view ref dot current property
gets updated to reference the actual scroll view component.
So when the component is first rendered,
scroll view ref is created using the useref hook and its initial value is
set to null and then ref prop is passed to the scroll view component.
And when the scroll view component is rendered, react updates the scroll view
ref current property to reference the actual scroll view component.
And when the button is going to be clicked
that we're about to set up and we are going to call a function,
it accesses the scroll views component using scrollviewref current and calls
whatever function comes with that current value method.
And that's how we are going to update our scroll view to scroll to the top.
Let's save this.
And if we were to use the scroll views reference we could just do it like this.
We're going to say scroll view ref
dot and then we're going to get the current value
from the Dom and we are going to use the Dom's values,
one of the functions that comes with the scroll view components that is
called scrollTo and then we're going to say where each should scroll to.
So we're just going to say that we want
to go to the top and let's say that it should be animated.
Okay, let's save this animated rate.
And now if we scroll
and then we click on scroll to top we are going to see this animated view
of scrolling to the top and if it's not completely visible we could say something
like hello world and then use the index here so that we see where we are.
Okay, let's scroll to the middle and let's
click this again and we see that we go to the top.
As you can see, we have used the useref hook to create a reference to the scroll
view component and we use this reference later to access the DOM of scroll view
and use its function scroll to so that we scroll the scroll view to the top.
So that's it for our tutorial.
Use Ref in React Native I hope this tutorial has been helpful in understanding
why we might want to use ref and how to use it in your React native projects.
Thanks for watching and I'll see you in the next video.