Original subtitles

Amazing work, we're done with forms and take a breather.

We will, however, use rough.

Remember when we talk about forms that we have controlled inputs, but we also have the option of using

uncontrolled inputs and we do that using the use.

OK, so even though there are multiple things that we can do with USRAP, most popular, one is targeting

the DOM element and essentially in turn that allows us to set up uncontrolled inputs similar to how

we would have it in JavaScript.

Now the father we're looking for is a user folder.

And then, of course, we have a set up and then we have the basics and and they have dress just imported

a file user of basics.

And I'm just wondering the setup, if we navigate to use basics, we can see that I have three comments

and essentially use Arafeh works a lot like use state code.

There are some differences.

So as far as similarities, it also preserves of the value in between the genders, just like use that.

However, the difference is that unlike you, state user who does not does not trigger re render.

And like I just mentioned, one of the most popular use cases is targeting the DOM element, just like

all the other hooks we import as a named import or we use react and then dot and then whatever the hook

name.

Now I'll start with my return because I simply would want to create a form.

So I'm going to go here with form element.

Well, and right away a class class name will be form just.

We have somewhat good looking form and line inside of the form.

There's going to be a div with an input text and eventually we'll set up R.F. And then also I would

want to have my submit button.

So let's go with button and type.

And by the way, I type needs to be placed here type and then we're looking for a button.

I'm not just type here Achmat Button and we should have a form with a button.

No surprise there.

And let's take a look at the handle submit.

So again, we have the form, we can either place it where we have the button or where we have the form

can just spice things up.

I'm going to go with on Samant then of course we'll have our handler so handle and met.

All right, awesome.

And let's try to submit our form const.

And the sub met function, I would want to have access to the event object, so in the primary I type

E online, first I would want to prevent.

Prevent the default, and I'm second, I'll set up my use.

Now, the white used RF works, we would need to come up with a name.

So I'm going to call this ref.

And then.

And then.

And that is equal to a use ref.

And now we need to pass in that initial value.

Shergold, use ref and by default all set it equal to a no.

OK, now next thing, we need to use this value in my case, ref container and then set it equal to

a ref attribute.

So in this case, I have the input and I have the button.

So what I could do is add this ref attribute and I need to set it equal to my ref container.

And once we have invoked USRAP and assign it to a container, bypassing some kind of initial value and

then use the attribute in our input and set it equal to the name that we chose.

Now, of course, let's consider logs so we can see what what is actually a rough container.

So rough container.

What does that is my name.

And we noticed something interesting where it is a object and it is a object with the property of current.

So now what happens when we submit the form?

What are you're going to see that since we added this ref attribute and set it equal to a rough container

when we're submitting, the current dot value will hold the value of our input so that.

We're going to go along here and then go Raef container.

And then dot current, some looking for that current property.

And now this is the current property is now our input.

So what I could do is just grab the value like we did before.

OK.

However, in this case, of course, we're not using it at Target.

We're using rough containers of whatever is the name, the current property, which initially is now.

And then once we submit the form, it will have the value.

So if I type something here and by the way, I probably need to sell it first.

So if I'll type something in my input and once I click, I shouldn't have some kind of value in a console,

but I don't.

And the reason why I don't have it is because this should be somewhat my apologies.

It shouldn't be button, it should be subject.

And once we change this around now, of course, once we type something in input and once we click,

check it out, now we have the value.

So this is going to be that different case where we're not setting up a controlled input.

So.

In this case, we don't have the state value that reflects the value that is going to be in the input.

And we don't call on change each and every time we type something in the input.

Instead we use this ref.

So use the ref and then we add this ref attribute.

And then in the current property, we're going to have a value.

Now, of course, you can add this ref to any HDMI and you're not limited to just the inputs.

And in order to access it, you'll have to go with rough container and on the ground, for example,

if right next to the form I pass in the dev with a hello world and if I set up Araf and I'll create

a new container.

So let's call this div container copy and paste.

I'll call this div container.

I'll still set it equal to null by default.

And if I go here with this container now, once we cancel log when we're submitting, we should see

that their container current should point to that.

A death sentence tried to submit and type something and there is now Norrish.

The div container current is pointing to mindif.

So if you would want to do something specific with this particular DOM node, you can use the use reforger

again.

The general idea, it preserves the value between the Reinders, but it doesn't trigger Remender and

then it's mostly used to target dominance.

Now one really cool thing that we can do once we have the general understanding of used Arafeh hook

is to focus our input the moment our app renders.

So the moment we see the form will right away place a input.

Now, since USRAP doesn't trigger ORENDER, I can simply call a fact I can pass in my callback function

and I don't need to worry about setting up a dependency array.

I don't I can just call it here because it won't trigger the render.

So for example, again, I go with a log and then I'm going to be looking for Reft container and then

dot current and we're going to go with a rough container than current and we're going to call the focus

method on it.

So what you'll see the moment we render.

We're going to get our input text and all right.

We have the focus and once we refresh, the focus is there.

And then I can clearly see that in a console log that the rough container current is pointing to that

input.

That's why I'm able to grab that value when we submit the form, because, again, we just call that

dot value property.

But what we're doing each and every time we render the application, well, we're adding the focus on

the current one, OK?

And we simply can do that without any kind of dependency list, because the rough the USRAP hook won't

trigger the refunder.

So those are the basics of use, a rough hook and probably the most likely use case will be targeting

downloads or elements.