1 00:00:01,310 --> 00:00:05,660 We've created our input, as I mentioned, all we have to do now is make sure that whenever our component 2 00:00:05,660 --> 00:00:10,880 first shows up on the screen, we attempt to focus that text input by using this ref to make sure that 3 00:00:10,880 --> 00:00:11,630 we can run some code. 4 00:00:11,630 --> 00:00:16,780 When our component first is rendered on the screen, we'll make use of the use effect hook as well. 5 00:00:17,240 --> 00:00:19,370 I'm going to import use effect at the very top. 6 00:00:22,400 --> 00:00:27,140 Then down in my component, right above unclick, I'll add in use effect. 7 00:00:28,670 --> 00:00:33,500 I want to make sure that this inner function is only invoked one single time, so as the second argument, 8 00:00:33,500 --> 00:00:34,700 I'll put in an empty array. 9 00:00:35,760 --> 00:00:41,040 Then inside of here, we can take a look at input ref and get a reference to our input element in an 10 00:00:41,040 --> 00:00:46,680 attempt to actually focus it, they might be tempted to write out something like input ref current, 11 00:00:46,710 --> 00:00:51,960 which should be a reference to the actual input element and then try to focus it by calling something 12 00:00:51,960 --> 00:00:55,530 like focus, which is how we generally focus an input element inside the browser. 13 00:00:56,040 --> 00:00:59,190 We'll notice as soon as I add on that focus, I get an error message. 14 00:00:59,760 --> 00:01:02,490 If you mouse over it, it says object is possibly null. 15 00:01:03,000 --> 00:01:08,850 So once again, remember, TypeScript is pretty well convinced that you might accidentally not actually 16 00:01:08,850 --> 00:01:12,680 assign this ref to any element that is being returned from your component. 17 00:01:13,380 --> 00:01:19,350 So TypeScript is very much convinced that input ref errors, input refought current might sometimes 18 00:01:19,350 --> 00:01:19,920 be null. 19 00:01:20,400 --> 00:01:26,310 So before we ever try to access input ref current and then try to look at any property or any function 20 00:01:26,310 --> 00:01:31,020 on their typescript wants us to make sure that this is actually some defined value. 21 00:01:31,440 --> 00:01:35,700 It wants us to make sure that this is actually pointing to some element. 22 00:01:36,540 --> 00:01:38,910 So to add in a check for that, we can do it very easily. 23 00:01:39,330 --> 00:01:40,410 We'll just add in if. 24 00:01:41,380 --> 00:01:45,100 There is no input ref, not current value. 25 00:01:45,460 --> 00:01:49,390 So if that is not defined, we're going to return early from U.S. effect. 26 00:01:50,660 --> 00:01:55,310 So we refer to this as a type guard and make sure that we're not going to get any further down into 27 00:01:55,310 --> 00:01:59,720 our function if we do not have a value assigned to input current. 28 00:02:00,020 --> 00:02:04,880 If you now mouseover input refought current underneath the statement, you'll see that now TypeScript 29 00:02:04,880 --> 00:02:05,890 is 100 percent sure. 30 00:02:06,050 --> 00:02:10,580 Yes, this thing is definitely going to be referring to some kind of input element because we already 31 00:02:10,580 --> 00:02:13,100 checked and made sure that it's not null upir. 32 00:02:14,630 --> 00:02:20,450 All right, so let's save this file, we then need to make sure we wire it up inside of our app component 33 00:02:20,450 --> 00:02:21,650 before we try to test it out. 34 00:02:22,160 --> 00:02:23,910 We'll go back over to indexed TSX. 35 00:02:25,540 --> 00:02:33,640 At the top, I'm going to replace that important statement with user search from RAF's user search and 36 00:02:33,640 --> 00:02:35,260 they'll show that component instead. 37 00:02:39,970 --> 00:02:45,580 Back inside of our browser, click refresh, and you'll notice now when I refresh that text area right 38 00:02:45,580 --> 00:02:49,630 there are the text input is automatically focused so I could type in there immediately without having 39 00:02:49,630 --> 00:02:51,210 to actually select the text input. 40 00:02:51,710 --> 00:02:54,250 That means our component definitely works as expected. 41 00:02:55,160 --> 00:03:00,560 OK, so the big takeaway here is that whenever you define Şeref typescript is really paranoid and it 42 00:03:00,560 --> 00:03:05,080 really thinks that you might not assign that ref or bind it to any actual element. 43 00:03:05,600 --> 00:03:11,540 So you are going to add in the type of HTML element that you're going to provide the ref to ordinal 44 00:03:11,720 --> 00:03:13,450 and then null as a default value. 45 00:03:14,180 --> 00:03:19,420 Then whenever you are trying to access that ref, you are going to first check to make sure that refought 46 00:03:19,470 --> 00:03:20,870 current is actually defined. 47 00:03:21,230 --> 00:03:25,280 You're going to most frequently add in a check like this inside of a use function. 48 00:03:26,250 --> 00:03:32,430 I do recommend that you do that check and then in early return, if input current is not defined. 49 00:03:32,430 --> 00:03:38,550 But of course, another way you could define this is to say if it is defined, then go ahead and attempt 50 00:03:38,550 --> 00:03:40,140 to focus the input. 51 00:03:40,200 --> 00:03:41,720 So that's another way we could write that out. 52 00:03:42,000 --> 00:03:46,860 But in general, I personally prefer doing the early check in the early return for the negative case. 53 00:03:47,890 --> 00:03:49,630 Where we have the not like so. 54 00:03:51,020 --> 00:03:55,460 OK, so that's pretty much it for us, again, really just comes down to you remembering that line of 55 00:03:55,460 --> 00:03:56,030 code right there. 56 00:03:56,600 --> 00:03:57,830 Lastly, I want to mention around this. 57 00:03:57,950 --> 00:04:02,330 If you're ever in a scenario where you just don't remember this type and you don't want to deal with 58 00:04:02,330 --> 00:04:07,790 it at all, you can always just put in any like so and just tell TypeScript, you know what, whatever 59 00:04:08,240 --> 00:04:12,980 its any value, don't try to do any actual checking here, don't try to make sure it's an input element 60 00:04:12,980 --> 00:04:13,970 or anything like that. 61 00:04:14,530 --> 00:04:16,370 So this is kind of an escape hatch right here. 62 00:04:16,370 --> 00:04:18,410 If you do not want to put in the full type. 63 00:04:18,649 --> 00:04:23,300 And I sometimes do that myself if I'm just kind of quickly prototyping a component or something similar 64 00:04:23,300 --> 00:04:23,720 to that. 65 00:04:24,740 --> 00:04:27,390 All right, so that's it for us, pause right here. 66 00:04:27,410 --> 00:04:29,260 Move on to our next topic in just a moment.