Section 9 (React): Lesson 10 - useEffect

Описание: Hey you.

And welcome.

In this video we will learn about use effect, hook of react.

So let's dive right into it.

I'm looking at the Web page that clearly defines the life cycle of a component in React.

A life cycle of a component basically means when the component first gets rendered on the page, which

is mounting or gets updated because some changes happened in the state, whether it be local, state

or global state, then it gets updated.

Or when it gets unmounted, when it's done being rendered and is being taken off the screen.

That's another lifecycle method that happens.

So that's what this diagram shows.

I hope this makes sense.

Let's dive into the code and see how it works.

So if I go back to my VS code to demonstrate that I will make a small change to our app where we have

the paragraph being rendered on line number 19 and 21, they are the same components of React is smart

enough to know that when they're the same component they should still be mounted.

So make it faster by not unmounting and mounting again, that uses extra memory.

So it's smart enough to know that I will change the line number 19 from a paragraph to an empty div.

Like so.

So that means there's only one paragraph component and it will only render one at a time and it will

unmount and mount back and forth.

All right, Now let's go to paragraph component.

I did that double shift or command P in some cases you can open that and type in paragraph and it will

open that.

It's perfect.

Okay.

So the next portion of this would be I want to use my use logs hook.

Use logs like so and I will destructure add log.

Oh, I have a plus sign.

Log like so.

And I will start using use effect hook which is auto imported from React at the moment and it will take

two arguments.

First argument would be a function.

Second argument would be a array of dependencies.

A dependency in this case would be any state variable, any props that is being passed down or just

empty array.

In this case, empty array would mean only trigger this when the mount happens.

So only one time.

And that's what I want to work with initially.

So empty array works.

In our case, I'll do add log.

String interpolation.

I'll do mount message and then dollar sign curlies to pass the message along and save that.

Perfect.

So you notice on the right side now we see the mount happened for Hello Earth.

If I press something again.

Hello.

Earth is gone.

If I press it again, the mount happens again.

So our use effect is working as expected and we are able to hook into the effect and make changes to

it.

Usually you use effect like that would be useful to make an API request, go out and get something from

the server and then provide me the data and I'll make changes to the component accordingly.

That's mainly what the use case for this would be.

But of course I've seen other use cases where you just want to start an animation or you want to provide

some details or anything like that.

In this case, use effect for on on mount is working.

I also want to hook into on mount.

So in order to do that, what we do is return a function within our function.

So we're two functions deep right now.

We have our function up top that's doing the ADD log, and it's also returning a function that needs

to be called when the unmount happens.

And in this case, I'll copy over the ADD log function that we have called and instead of mount it should

be called oops removed unmount.

Save that and notice what happens if I click on something on Mount Hello Earth happened.

If I click on Mount Mount hello earth happened then on mount happened.

So we are hooking into the effects for Mount and unmount.

Now let's take a look at how we can hook into a variable change or a const change or state variable

change.

And what can we do with that?

So for that I will go to the button dot TSX and that's where we have the is toggle and notice how we

are calling add log when the click happens.

Well, I want to move it into a use effect.

So every time it is toggle changes I will automatically call it All right, so that's what I'm going

to do.

I will call use effect, let's call it below line 18 use effect.

It doesn't really matter where we call it.

The order of precedence doesn't apply to this.

However, it does matter if you were to return something before because hooks cannot have any it cannot

be called after a return has happened.

So if the component has already been rendered and you're trying to call use Hook, it's not going to

work.

All right.

So let's just delete that.

All right.

So let's start our function.

I will copy over line number 14, delete that and paste it in line.

Number 20 provided a dependency and in this case, the dependency will not be an empty array.

It will be a is toggle.

I can of course provide many variables and each time all of those variables change.