Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,150 --> 00:00:05,440
Amazing work, we're done with forms and take a breather.
2
00:00:05,910 --> 00:00:07,750
We will, however, use rough.
3
00:00:08,100 --> 00:00:16,350
Remember when we talk about forms that we have controlled inputs, but we also have the option of using
4
00:00:16,650 --> 00:00:20,400
uncontrolled inputs and we do that using the use.
5
00:00:21,330 --> 00:00:30,330
OK, so even though there are multiple things that we can do with USRAP, most popular, one is targeting
6
00:00:30,330 --> 00:00:39,390
the DOM element and essentially in turn that allows us to set up uncontrolled inputs similar to how
7
00:00:39,390 --> 00:00:41,710
we would have it in JavaScript.
8
00:00:42,030 --> 00:00:45,330
Now the father we're looking for is a user folder.
9
00:00:46,190 --> 00:00:53,470
And then, of course, we have a set up and then we have the basics and and they have dress just imported
10
00:00:53,480 --> 00:00:54,870
a file user of basics.
11
00:00:55,190 --> 00:01:04,010
And I'm just wondering the setup, if we navigate to use basics, we can see that I have three comments
12
00:01:04,340 --> 00:01:10,750
and essentially use Arafeh works a lot like use state code.
13
00:01:10,780 --> 00:01:11,720
There are some differences.
14
00:01:12,320 --> 00:01:19,860
So as far as similarities, it also preserves of the value in between the genders, just like use that.
15
00:01:19,880 --> 00:01:29,500
However, the difference is that unlike you, state user who does not does not trigger re render.
16
00:01:29,780 --> 00:01:38,000
And like I just mentioned, one of the most popular use cases is targeting the DOM element, just like
17
00:01:38,000 --> 00:01:46,750
all the other hooks we import as a named import or we use react and then dot and then whatever the hook
18
00:01:46,820 --> 00:01:47,070
name.
19
00:01:47,510 --> 00:01:52,700
Now I'll start with my return because I simply would want to create a form.
20
00:01:53,150 --> 00:01:56,390
So I'm going to go here with form element.
21
00:01:56,760 --> 00:02:02,990
Well, and right away a class class name will be form just.
22
00:02:02,990 --> 00:02:07,580
We have somewhat good looking form and line inside of the form.
23
00:02:07,580 --> 00:02:14,750
There's going to be a div with an input text and eventually we'll set up R.F. And then also I would
24
00:02:14,750 --> 00:02:16,310
want to have my submit button.
25
00:02:16,610 --> 00:02:18,800
So let's go with button and type.
26
00:02:19,310 --> 00:02:24,200
And by the way, I type needs to be placed here type and then we're looking for a button.
27
00:02:24,530 --> 00:02:30,850
I'm not just type here Achmat Button and we should have a form with a button.
28
00:02:31,130 --> 00:02:32,090
No surprise there.
29
00:02:32,600 --> 00:02:35,430
And let's take a look at the handle submit.
30
00:02:35,720 --> 00:02:40,820
So again, we have the form, we can either place it where we have the button or where we have the form
31
00:02:41,150 --> 00:02:42,620
can just spice things up.
32
00:02:42,930 --> 00:02:51,350
I'm going to go with on Samant then of course we'll have our handler so handle and met.
33
00:02:51,680 --> 00:02:53,150
All right, awesome.
34
00:02:53,510 --> 00:02:56,300
And let's try to submit our form const.
35
00:02:57,460 --> 00:03:07,560
And the sub met function, I would want to have access to the event object, so in the primary I type
36
00:03:07,570 --> 00:03:10,360
E online, first I would want to prevent.
37
00:03:11,190 --> 00:03:16,670
Prevent the default, and I'm second, I'll set up my use.
38
00:03:17,540 --> 00:03:22,300
Now, the white used RF works, we would need to come up with a name.
39
00:03:22,580 --> 00:03:24,710
So I'm going to call this ref.
40
00:03:25,430 --> 00:03:26,200
And then.
41
00:03:26,490 --> 00:03:27,620
And then.
42
00:03:28,190 --> 00:03:31,120
And that is equal to a use ref.
43
00:03:31,370 --> 00:03:34,430
And now we need to pass in that initial value.
44
00:03:34,670 --> 00:03:40,120
Shergold, use ref and by default all set it equal to a no.
45
00:03:40,790 --> 00:03:49,160
OK, now next thing, we need to use this value in my case, ref container and then set it equal to
46
00:03:49,160 --> 00:03:51,060
a ref attribute.
47
00:03:51,890 --> 00:03:55,390
So in this case, I have the input and I have the button.
48
00:03:55,760 --> 00:04:04,210
So what I could do is add this ref attribute and I need to set it equal to my ref container.
49
00:04:04,550 --> 00:04:11,270
And once we have invoked USRAP and assign it to a container, bypassing some kind of initial value and
50
00:04:11,270 --> 00:04:17,580
then use the attribute in our input and set it equal to the name that we chose.
51
00:04:17,990 --> 00:04:22,760
Now, of course, let's consider logs so we can see what what is actually a rough container.
52
00:04:23,300 --> 00:04:25,280
So rough container.
53
00:04:25,470 --> 00:04:26,450
What does that is my name.
54
00:04:26,870 --> 00:04:35,990
And we noticed something interesting where it is a object and it is a object with the property of current.
55
00:04:36,650 --> 00:04:40,790
So now what happens when we submit the form?
56
00:04:41,360 --> 00:04:49,220
What are you're going to see that since we added this ref attribute and set it equal to a rough container
57
00:04:49,520 --> 00:04:59,360
when we're submitting, the current dot value will hold the value of our input so that.
58
00:05:00,200 --> 00:05:05,090
We're going to go along here and then go Raef container.
59
00:05:06,040 --> 00:05:09,930
And then dot current, some looking for that current property.
60
00:05:10,300 --> 00:05:15,110
And now this is the current property is now our input.
61
00:05:15,670 --> 00:05:19,190
So what I could do is just grab the value like we did before.
62
00:05:19,480 --> 00:05:19,780
OK.
63
00:05:19,990 --> 00:05:23,250
However, in this case, of course, we're not using it at Target.
64
00:05:23,530 --> 00:05:30,850
We're using rough containers of whatever is the name, the current property, which initially is now.
65
00:05:31,150 --> 00:05:34,890
And then once we submit the form, it will have the value.
66
00:05:35,140 --> 00:05:38,960
So if I type something here and by the way, I probably need to sell it first.
67
00:05:39,310 --> 00:05:45,670
So if I'll type something in my input and once I click, I shouldn't have some kind of value in a console,
68
00:05:45,760 --> 00:05:47,220
but I don't.
69
00:05:47,230 --> 00:05:51,810
And the reason why I don't have it is because this should be somewhat my apologies.
70
00:05:51,820 --> 00:05:55,390
It shouldn't be button, it should be subject.
71
00:05:55,720 --> 00:06:01,750
And once we change this around now, of course, once we type something in input and once we click,
72
00:06:02,200 --> 00:06:04,940
check it out, now we have the value.
73
00:06:05,650 --> 00:06:11,560
So this is going to be that different case where we're not setting up a controlled input.
74
00:06:11,920 --> 00:06:12,130
So.
75
00:06:12,850 --> 00:06:20,200
In this case, we don't have the state value that reflects the value that is going to be in the input.
76
00:06:20,470 --> 00:06:26,560
And we don't call on change each and every time we type something in the input.
77
00:06:26,920 --> 00:06:29,740
Instead we use this ref.
78
00:06:29,990 --> 00:06:34,390
So use the ref and then we add this ref attribute.
79
00:06:34,630 --> 00:06:39,200
And then in the current property, we're going to have a value.
80
00:06:39,610 --> 00:06:47,760
Now, of course, you can add this ref to any HDMI and you're not limited to just the inputs.
81
00:06:48,130 --> 00:06:56,740
And in order to access it, you'll have to go with rough container and on the ground, for example,
82
00:06:56,740 --> 00:07:06,370
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
83
00:07:06,370 --> 00:07:07,230
a new container.
84
00:07:07,720 --> 00:07:10,630
So let's call this div container copy and paste.
85
00:07:11,140 --> 00:07:13,150
I'll call this div container.
86
00:07:13,570 --> 00:07:16,900
I'll still set it equal to null by default.
87
00:07:17,320 --> 00:07:24,580
And if I go here with this container now, once we cancel log when we're submitting, we should see
88
00:07:24,580 --> 00:07:28,780
that their container current should point to that.
89
00:07:28,780 --> 00:07:34,570
A death sentence tried to submit and type something and there is now Norrish.
90
00:07:34,930 --> 00:07:39,840
The div container current is pointing to mindif.
91
00:07:40,600 --> 00:07:49,440
So if you would want to do something specific with this particular DOM node, you can use the use reforger
92
00:07:49,810 --> 00:07:50,360
again.
93
00:07:50,380 --> 00:07:57,940
The general idea, it preserves the value between the Reinders, but it doesn't trigger Remender and
94
00:07:57,940 --> 00:08:00,830
then it's mostly used to target dominance.
95
00:08:00,940 --> 00:08:07,180
Now one really cool thing that we can do once we have the general understanding of used Arafeh hook
96
00:08:07,600 --> 00:08:13,930
is to focus our input the moment our app renders.
97
00:08:14,350 --> 00:08:18,080
So the moment we see the form will right away place a input.
98
00:08:18,370 --> 00:08:25,630
Now, since USRAP doesn't trigger ORENDER, I can simply call a fact I can pass in my callback function
99
00:08:25,870 --> 00:08:30,470
and I don't need to worry about setting up a dependency array.
100
00:08:30,790 --> 00:08:36,000
I don't I can just call it here because it won't trigger the render.
101
00:08:36,240 --> 00:08:43,350
So for example, again, I go with a log and then I'm going to be looking for Reft container and then
102
00:08:43,420 --> 00:08:52,330
dot current and we're going to go with a rough container than current and we're going to call the focus
103
00:08:52,330 --> 00:08:53,630
method on it.
104
00:08:54,070 --> 00:08:56,710
So what you'll see the moment we render.
105
00:08:57,670 --> 00:09:01,090
We're going to get our input text and all right.
106
00:09:01,120 --> 00:09:05,860
We have the focus and once we refresh, the focus is there.
107
00:09:06,070 --> 00:09:13,780
And then I can clearly see that in a console log that the rough container current is pointing to that
108
00:09:13,780 --> 00:09:14,140
input.
109
00:09:14,440 --> 00:09:21,460
That's why I'm able to grab that value when we submit the form, because, again, we just call that
110
00:09:21,670 --> 00:09:22,920
dot value property.
111
00:09:23,260 --> 00:09:30,340
But what we're doing each and every time we render the application, well, we're adding the focus on
112
00:09:30,340 --> 00:09:32,180
the current one, OK?
113
00:09:32,470 --> 00:09:41,320
And we simply can do that without any kind of dependency list, because the rough the USRAP hook won't
114
00:09:41,320 --> 00:09:43,220
trigger the refunder.
115
00:09:43,600 --> 00:09:49,180
So those are the basics of use, a rough hook and probably the most likely use case will be targeting
116
00:09:49,180 --> 00:09:51,190
downloads or elements.
11208
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.