We've created our input, as I mentioned, all we have to do now is make sure that whenever our component
first shows up on the screen, we attempt to focus that text input by using this ref to make sure that
we can run some code.
When our component first is rendered on the screen, we'll make use of the use effect hook as well.
I'm going to import use effect at the very top.
Then down in my component, right above unclick, I'll add in use effect.
I want to make sure that this inner function is only invoked one single time, so as the second argument,
I'll put in an empty array.
Then inside of here, we can take a look at input ref and get a reference to our input element in an
attempt to actually focus it, they might be tempted to write out something like input ref current,
which should be a reference to the actual input element and then try to focus it by calling something
like focus, which is how we generally focus an input element inside the browser.
We'll notice as soon as I add on that focus, I get an error message.
If you mouse over it, it says object is possibly null.
So once again, remember, TypeScript is pretty well convinced that you might accidentally not actually
assign this ref to any element that is being returned from your component.
So TypeScript is very much convinced that input ref errors, input refought current might sometimes
be null.
So before we ever try to access input ref current and then try to look at any property or any function
on their typescript wants us to make sure that this is actually some defined value.
It wants us to make sure that this is actually pointing to some element.
So to add in a check for that, we can do it very easily.
We'll just add in if.
There is no input ref, not current value.
So if that is not defined, we're going to return early from U.S. effect.
So we refer to this as a type guard and make sure that we're not going to get any further down into
our function if we do not have a value assigned to input current.
If you now mouseover input refought current underneath the statement, you'll see that now TypeScript
is 100 percent sure.
Yes, this thing is definitely going to be referring to some kind of input element because we already
checked and made sure that it's not null upir.
All right, so let's save this file, we then need to make sure we wire it up inside of our app component
before we try to test it out.
We'll go back over to indexed TSX.
At the top, I'm going to replace that important statement with user search from RAF's user search and
they'll show that component instead.
Back inside of our browser, click refresh, and you'll notice now when I refresh that text area right
there are the text input is automatically focused so I could type in there immediately without having
to actually select the text input.
That means our component definitely works as expected.
OK, so the big takeaway here is that whenever you define Şeref typescript is really paranoid and it
really thinks that you might not assign that ref or bind it to any actual element.
So you are going to add in the type of HTML element that you're going to provide the ref to ordinal
and then null as a default value.
Then whenever you are trying to access that ref, you are going to first check to make sure that refought
current is actually defined.
You're going to most frequently add in a check like this inside of a use function.
I do recommend that you do that check and then in early return, if input current is not defined.
But of course, another way you could define this is to say if it is defined, then go ahead and attempt
to focus the input.
So that's another way we could write that out.
But in general, I personally prefer doing the early check in the early return for the negative case.
Where we have the not like so.
OK, so that's pretty much it for us, again, really just comes down to you remembering that line of
code right there.
Lastly, I want to mention around this.
If you're ever in a scenario where you just don't remember this type and you don't want to deal with
it at all, you can always just put in any like so and just tell TypeScript, you know what, whatever
its any value, don't try to do any actual checking here, don't try to make sure it's an input element
or anything like that.
So this is kind of an escape hatch right here.
If you do not want to put in the full type.
And I sometimes do that myself if I'm just kind of quickly prototyping a component or something similar
to that.
All right, so that's it for us, pause right here.
Move on to our next topic in just a moment.