All language subtitles for 016 Controlled vs Uncontrolled Components & Stateless vs Stateful Components_en

Now, that's it for this section.

In the last section, we again implemented two way binding

as part of the assignment.

Actually it was a bonus section

of the assignment I would say,

but again, we added two way binding

and we did something which has an official term in React

which I don't wanna hide from you.

We created a controlled component

and it's not the first time we did that.

Basically, whenever you use two way binding

you are controlling a component

but here we're controlling our own custom component.

Now, what does this mean?

It means that a value which is used in the component

like the value selected in the dropdown

is passed on to a parent component, through props

and is received from the parent component.

Both the currently set value,

as well as the function which in the end

handles the selected value is not part of expenses filter.

Expenses filter is really just a component

that presents DUI, that presents the dropdown

and then attaches a couple of listeners or props,

but the real logic recites in the parent component

and that turns ExpensesFilter

into something which is called a controlled component.

Now, technically there is no difference.

ExpensesFilter is still a regular component

as you learned it.

It's just a special term that when you see it

basically means what I just explained

that both the value, as well as changes to the value

are not handled in the component itself

but in a parent component.

This component controls the expenses filter component.

And that's just a term which you should be aware of.

Another term or another concept you should be aware of

because you might hear it from time to time

is about presentational verses stateful components

or stateless versus stateful components

or dumb versus smart components.

There are a lot of terms for that, but what do they mean?

It simply means that in basically all

React apps which you're building,

you will have a couple of components that manage some state

like this expenses component

which manages this filter state

or the expense form component which manages the input state.

And then you will have other components

which don't manage any state, like expense item

if we remove the button, which we should do

because it was just there for demo purposes.

If we remove it, we can also remove the useState call

and we should remove it.

We can also remove that and that and if we do all of that,

and we set this here back to props title,

then this is a state less component as it should be.

This component is a state less component

also called presentational or dumb component

because it doesn't have any internal state

it's just there to output some data.

And in most react applications,

you will have more presentational and dumb components

than smart or stateful components.

So even though dumb might sound negative

and it might sound like stateful components are better,

that's not the case.

These are really just terms

and typically you end up with less state full components

than with state less components.

Because you wanna split up your application

into small reusable pieces

and most pieces, most components

indeed will only focus on outputting something,

on having some JSX code,

maybe some transformation logic like this here

and maybe some CSS code,

but it's only a couple of components

which typically do manage state.

And then this state is spread out

and distributed through props in the end,

like here in the expenses component

where we managed to filter state

and then we pass the filtered year.

So this state value through props, back to expenses filter.

This is a standard pattern which you'll see a lot

that you manage state and a couple of components,

and then you might pass that around to other components.

And that's basically it for this module.

What you learned here again, was super important.

So make sure it's clear to you,

make sure you understand what state is

and how you can handle events and how you can pass data

from a child to a parent component.

And with all of that,

combined with the core section before

we are recovered components in general,

we're now prepared to dive into the next core section

and basically conclude the hard core of React basics.

But the next section again will be super important

because it will be about Lists and Conditional Content.