All language subtitles for 005 The Component Lifecycle (Class-based Components Only!)_en

Now we know how

we can generally build class-based components

and how we can manage state and work with events, steer.

But what about side effects?

As I mentioned, you can't use these react hooks

in class-based components, so you can't use use effect

but class-based components have a concept

called the component life cycle.

And of course, every component technically has a life cycle.

It, for example, is rendered to the DOM

or remove from the DOM, but there are specific methods

you can add two class-based components to run code

at different points in that life cycle.

And the first, most important life cycle method you can add

to class-based components,

is to componentDidMount() method

like render() that's a built in method,

which you can use as soon

as you extend the built in component

which you import from React.

And then you can add this method and React.

We'll call it for you when the component was just mounted

but more on that in a second.

Other live cycle

methods you can add would be

componentDidUpdate() and componentWillUnmount().

There are a couple of other less important

to lifecycle methods, which will not take a closer look

at here because these free lifecycle methods

are by far the most important and common ones.

Now, as I said, componentDidMount()

is called when a component is mounted.

So when it was evaluated and now rendered to the DOM.

It's basically the equivalent to using use EFFECT like this.

You have your EFFECT function

which I left out here with the free dots.

And then you have the array of dependencies

and every EFFECT function is executed when

the component first is mounted.

But if you have no dependencies

if you have an empty dependencies array

the EFFECT function is only executed in that case.

So adding use of fact with an empty dependency

array is basically your equivalent to componentDidMount().

And we're going to See componentDidMount()

in action in just a second.

You'll also have componentDidUpdate().

This is called once a component was updated.

So when something changed when your state changed

and the component was re-evaluated and re-rendered

this is basically your equivalent to use effect

with some dependencies, whenever the dependencies change,

the use EFFECT function re-executes

and the dependencies are re-evaluated

when the component is re-evaluated

and was rendered again.

Because you'll learn

that the effects are generally re-executed whenever

a component re-rendered, if dependencies changed.

So that's why this is basically your equivalent to

componentDidDpdate().

Now componentWillUnmount is called right

before the component is removed from the DOM,

and here the equivalent is basically the clean up function

from use EFFECT that cleanup function is called right

before the EFFECT function is executed again

and also always again, when the component

is about to be removed from the DOM.

Now again, let's take a closer look at that in action here.

And for this, I altered the project slightly,

attached you find the UserFinder component,

which you can add to your components.

And now we need to go to the users component

and dare get rid of the dummy users here.

And instead here, where we used the dummy users

refer to this props users, because users are now passed in

through props into this users component.

And now we just need to go

to the App component and use the UserFinder component

and import user finder from components UserFinder.

Instead of users.

also add the UserFinder. Module.CSS file,

which you also find attached.

And if you added all of that

and you saved as you should see an application that looks

like this, and here, if you type you now also

filter this list down there with every keystroke.

It's a very simple filter logic, which I added here

into UserFinder, and the UserFinder component

is a functional component using multiple state slices

and use EFFECT to manage the users

and to then filter the users

and pass the filtered users to the users component.

Now let's transform this component

to a class-based component to get an idea

on how these class-based components deal with side effects.