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.