All language subtitles for 021 Diving into _Forward Refs__en

The next hook I want to show you allows us

to interact with the Input Components imperatively,

which means not by parsing some state to it

that then changes something in the Component,

but by calling a function inside of a Component,

for example, which is something you won't need to do often

and you shouldn't do often because it's not

the typical React pattern you want,

but sometimes it is helpful.

Now it will become clearer what I mean in a second.

First of all, let's remove this disabled prop

from the button.

I don't want to disable the button.

It should always be clickable now.

Second into submitHandler,

since the button is not always clickable,

I want to check if the form is valid

and only if it is, I will call all onLogin.

Otherwise, and that's not the interesting part,

I want to basically focus the first invalid Input I find.

So here it's now always Submittable

and if I click on Login,

I now want to make sure that we actually focus

the first Input that is invalid.

So in this case that we put the cursor

into the email Input here.

That's something you might want.

So for that, I'll actually turn this

into a else if statement and check if the form is valid,

because the email is not valid

hence the exclamation mark at the beginning,

or else if the email should be valid,

it has to be the password that is invalid

then we'll go into this block.

Of course both could be invalid,

but again, I wanna focus the first one,

which is invalid and the first Input we have

that could be invalid is the email

hence I'm checking this first.

But now the goal is to focus the input

and for a regular input

that would be possible by putting a ref on it.

We learned about refs already in this course

with the useRef hook.

And then we could call the focus method,

just to show this to you,

here in the Input Component where we have the native input,

raw Input HTML Component,

we could use the useRef hook here

to create a inputRef like this

and then for example, if we would want to focus this

after the Component was rendered,

we could use useEffect to run some code

after the Component was rendered.

You learned that the function you parse to useEffect runs

after every Component render cycle.

Let's say we only wanna run it once,

when the Component initially renders

hence I parse an empty array as a dependency array

so that this only runs after the first time

this Component was executed and rendered.

And then here, we could focus the input

by adding the ref prop to the input.

The ref prop is supported on all built-in HTML Components

like Input, for example,

point at inputRef and in useEffect

we could now use inputRef.current.focus.

And the focus method is a method that is available

on the Input DOM object,

to which you got access through this Ref.

So here we're just using Refs

as you learned them early in the course already,

we connected our ref to the input.

And then we use useEffect to focus this input

after this Component rendered.

And as a result, since the Input will render

for both the email and the password,

this will focus the password Input

because that's the second

and therefore last Input that's being rendered.

Hence if this reloads you see the first one

is marked as invalid because it was temporarily focused,

but then the password is the Input that stays focused

at the end.

Now that's not the behavior we want,

but that's something we can do with references

and the built-in functionalities we have in React

and simply in Vanilla JavaScript.

Focus is a method that's not coming from React

but that's built-in to JavaScript,

built into the DOM objects,

the Input DOM object specifically you're dealing with.

Now again, my goal is not to do that

after the Input is rendered though.

So we can remove useEffect.

My goal is that I for example,

have my own method here in the Input Component,

let's say it's called activate,

you could also call it focus, of course.

And in there, I want to use the inputRef.current

and focus my input.

But now to goal is that activate is a function

that's not called from inside the input

but from outside.

Now, I'll say it again,

this is a rare scenario because typically,

you don't wanna code your React projects like this,

instead you wanna work with props and state

and parse data down to a Component

to then change something there.

But in rare cases, like in this example,

it might also be an elegant way

of well, focusing this Input here,

if you could call focus or activate on your Input Component

so that you essentially can use your Input Component,

as you can use to built-in one,

because there you have a focus method as well, right?

So maybe you want one or in our case,

activate function on your own Input Component as well.

So a rare use case, but you could face it at some point.

Now of course, you could think,

well, that shouldn't be too hard.

We go to the Login Component where we have our inputs

and we simply use useRef here as well,

useRef like this, imports the useRef hook.

And then in your Login Component,

you create your emailInputRef for example,

by calling useRef and you create your passwordInputRef

by calling you useRef, oops, useRef

so that you have two references,

one for the email and one for the password input.

And then we simply go down and we add the ref prop here

on the first Input and point at the emailInputRef.

And for the password, we also add ref

and point at the passwordInputRef,

could be as easy as that.

Now, therefore, we have a reference

to our own Components now,

one reference to our Input Component for the email

and one reference to the Input Component for the password.

And therefore in the submitHandler,

if the email is valid,

we can is invalid, excuse me,

if the email is invalid,

we can use the emailInputRef.current and call activate,

which is that function we have in our Input.

And we do the same basically in the else block

but for the passwordInputRef, right?

This something you might wanna do.

Well, if we try this, it will not work though.

If I save this you already see an error here,

function Components cannot be given refs.

So this will not work,

we can't use a ref here.

This is not possible.

And then our Component, the Input Component

of course, also doesn't really do anything

with a ref prop internally.

It doesn't accept a ref prop on its props object.

We're not using props.ref anywhere in there.

But even if we do, ref is also a kind of a reserved word

and yeah, we're getting this warning here for a reason.

So this is not an approach that works like this.

However, we can make it work.

We just need to do two things,

for one, in the Input Component,

we need to import another hook,

and that's the useImperativeHandle hook,

has a strange name, but in the end it is a hook

that allows us to use this Component

or functionalities from inside this Component imperatively,

which simply means not through

the regular state props management,

not by controlling the Component

through state in the parent Component,

but instead by directly calling or manipulating something

in the Component programmatically.

And again, that is something you rarely wanna use

and therefore, you shouldn't use it very often

in your projects as well.

You wanna find an alternative.

Nonetheless here, it actually is a pretty nice solution

for this problem.

And all we need to do is

we need to call useImperativeHandle here

and parse two things to it.

Let's start with the second thing

before I talk about the first parameter.

The second parameter is a function,

a function that should return an object.

And that object will contain all the data

you will be able to use from outside.

So for example here, we could add an activate field

or a focus field, totally up to you,

and then point at the internal function

or the internal variable or whatever it is that

should be accessible from outside through that name.

For example, here, point at activate.

And again, this doesn't have to be focused.

This can be activated or anything else as well.

I'm just using different names here to make it clear

that this activate refers to this function.

And that is the externally available name then.

So this is basically a translation object

between internal functionalities and the outside world,

so the parent Component.

Now, this alone doesn't do the trick though.

We also have this first argument,

which we need to provide to useImperativeHandle.

And that's actually something we also get here

in our Component function argument list,

thus far we always just worked

with props and in 99.9% of cases,

that is all you will need.

However, there technically also is a second argument

you can accept and that's a ref.

Well, that's interesting.

There is a ref,

if a ref should be set from outside,

will also need something else to make sure

that this can be set but this is then available.

So if now the parent Component,

the Login Component adds the ref prop

and binds this to something,

essentially, this here will establish the connection.

This will be part of allowing this binding.

And it's this ref, which we

should parse to useImperativeHandle

Now we're still not there yet.

This alone would not work

In order to enable this second argument here,

we need to export our Component function in a special way.

We need to wrap it with something special

and that's coming from React,

and it's called forwardRef.

And that is basically a function which we execute,

a method which we execute,

to which we parse our Component function.

So our Component function is now the first argument

to forwardRef and forwardRef returns a React Component,

so Input still is a React Component

but a React Component that is capable of

being bound to a ref.

Now, since I wrapped forward ref here,

I of course always need a closing bracket here.

And now with that,

Input is able to take a ref prop

and it will expose a ref,

and it is controllable or usable with refs.

But the only thing you will be able to use

is what you expose here through useImperativeHandle.

So for example, here, I'm exposing this focus function,

a function because it points at the activate function.

So now in the Login Component,

we can call emailInputRef.current.focus

because that's the external name we set up.

And with that, we can save this.

And if I now click Login,

you see the email is selected,

the first invalid input.

If I enter something valid here and I click Login,

you see the password is now selected

because it's invalid

The same here if I click out of it but it's invalid,

it is selected.

And I can of course also still log in

if everything is valid.

So that is a niche use case,

but especially for something like focusing inputs and so on,

this can be very useful.

So this is a very realistic use case,

which I'm showing to you here.

With the useImperativeHandle and forwardRef,

you can expose functionalities from a React Component

to its parent Component to then use your Component

in the parent Component through refs

and trigger certain functionalities.

That is something you can do.

And that does not just work for functions,

we could also expose the value here through refs

if we wanted to.

So this something you can do not something

you will need all the time

and you should avoid it at all costs,

I would almost say,

but especially in cases like this with focusing,

but also in some other use cases

like with scrolling and so on,

this can be very useful

and then triggering something like this programmatically

is fine.

And with useImperativeHhandle and forwardRef,

you are able to make it work.