All language subtitles for 008 Controlled vs Uncontrolled Components_en

Now in the last lecture,

we learned about refs

and I showed you that

with refs you have an alternative way

of getting that user input of accessing those input fields.

And I also showed you this

a little bit hacky approach of then

still manipulating the input fields and resetting them

if you want to do that.

Now, this approach of using refs

to interact with dom elements

specifically with input elements also has a special name.

We're talking about uncontrolled components

if we access values with a ref.

So these input components here,

would now be uncontrolled components.

Why uncontrolled?

Because they're internal state,

so to value which is reflected in them

is not controlled by react.

We rely on the default behavior of the input

where a user of course is able to enter something

and that entered value is reflected.

And we then just Fetch it, with a react feature

but we don't feed data back into the input.

When I set a new value to those inputs here

with this work around,

we're absolutely not using react here.

Sure we're using the ref,

but in the end we get access

to the native dom element with that

and I then just use the regular dom API

for setting the value of a dom node of a input dom node.

So that's why this is uncontrolled

because we're not controlling these state

off the input element with react.

Now, you can talk about uncontrolled

and controlled components.

All is in the context of other components,

but most commonly, we have this scenario

when we talk about input components

about form components in general,

because those components

tend to have some internal state natively by the browser,

an input element is configured

to take user input and save and reflect it.

And when we then work with those components in a react app,

we wanna connect our react state to that.

That's why we typically have

this controlled uncontrolled thing

when we work with input components in react.

And when we use refs, like we're doing it here,

we have uncontrolled input components.

The approach we had before,

where we manage our state

and we updated that state on every keystroke

and we feed that state back into the input

with the value prop,

so that approach we had before we added refs,

that would be the controlled approach.

Then we would say

that those input fields are controlled components

because their internal state is controlled by react.

These are simply important terms,

which you should keep in mind for potential interviews

or discussions with other react developers,

because they are typical terms you hear in the react world.