00:00.0
00:09.1
Let's start right? yes
00:09.2
00:14.0
What we are going to learn today? [Laughter]
00:14.1
00:18.9
Did I miss it up? Now we see how he started a video.
00:19.0
00:23.8
He is the one and only one person who can start this much beautiful !!. You may please start now.
00:23.9
00:28.7
It's better to do it by myself. We are going to study about useEffect.
00:28.8
00:33.6
We have already said about the component, state, and update.
00:33.7
00:38.5
When the component getsupdated
00:38.6
00:42.0
We have some life cycle methods,
00:42.1
00:44.5
--A components life style --
00:44.6
00:49.4
It is not life style.ok , then what is that ?
00:49.5
00:54.3
Wait i will say ok.
00:54.4
00:59.2
There are life cycle methods they are called automatically.
00:59.3
01:04.0
When we create a component
01:04.1
01:08.9
There are different functions available
01:09.0
01:13.8
when a component gets updated or rerendered
01:13.9
01:18.7
or a component getting out from there.
01:18.8
01:23.6
It is manditory to understand this three life cycle methods, for coding properly.
01:23.7
01:28.5
First thing to understand is Mounting.
01:28.6
01:33.4
Next thing is updating
01:33.5
01:38.3
Mounting means adding a new component.
01:38.4
01:43.2
Updating works when we change the value inside the component.
01:43.3
01:48.1
Unmount works when the component get out from there.
01:48.2
01:53.0
These are the three things you have to understand about useEffect.
01:53.1
01:57.9
This is the story,now let's implement it.
01:58.0
02:02.8
Let's start, with a counter
02:02.9
02:07.7
You are fond of the counter?
02:07.8
02:12.6
I am lazy to code.
02:12.7
02:17.5
rfce -- don't forgot.
02:17.6
02:22.4
We are typing h1 now.
02:22.5
02:27.3
We are activating javascript.
02:37.2
02:42.0
We are going to take this component in app.js.
02:42.1
02:46.9
Let's show and disable this component using a button action.
02:47.0
02:51.8
For that we need state.
02:51.9
02:56.7
First just show it,
02:56.8
03:01.6
Am take care of my viewers as my own children.
03:01.7
03:06.5
You can't understand that feeling.
03:06.6
03:11.4
I am taking care of each and everyone's life.
03:11.5
03:26.1
When you are wasting each second, a student and family struggling without getting a Job.
03:26.2
03:31.0
Just like in your past.
03:31.1
03:35.9
We have imported a counter; now, let's check it.
03:36.0
03:40.8
Yes, it's working. Change the HelloWorld with a button.
03:40.9
03:45.7
We can place a onClick in the HelloWorld also.
03:45.8
03:50.6
I will show that using this example.
03:50.7
03:55.5
We need a state now.
03:55.6
04:00.4
For understanding enabling or disabling.
04:05.4
04:10.2
We are using the use state.
04:10.3
04:15.1
In useState state,setState.
04:15.2
04:20.0
Ok,Calling useState.
04:20.1
04:24.9
Give value false as default.
04:25.0
04:29.8
Don't you know about boolean values? Having only true and false values. We will update false and true.
04:29.9
04:34.7
We are going to learn a new thing ,We can update the state here itself.
04:34.8
04:39.6
We can't invoke state like this.
04:39.7
04:44.5
So will write arrow function there.
04:44.6
04:49.4
Instead of defing function outside we do it inside.
04:49.5
04:54.3
We are going to write in one line.
04:54.4
04:59.2
Do you understand this?
04:59.3
05:04.1
State become true if it is false, and true if it is false.
05:04.2
05:09.0
In setState
05:09.1
05:13.9
How did the checking happening?
05:14.0
05:18.8
We call state first. If it is false, it becomes true.And gets updated.
05:18.9
05:23.7
Next we calling setState it is true,
05:23.8
05:28.6
If it is true it will become false.And gets updated.
05:28.7
05:33.5
Can you explain how it works?
05:33.6
05:38.4
Ok,I will comment about it.
05:38.5
05:43.3
First we call state.
05:43.4
05:48.2
The value of state is false.Do you understand?
05:53.2
06:02.9
Then what happens, The value of state become true.
06:03.0
06:07.8
It is a simple fact, give its opposite value.
06:07.9
06:12.7
Make the value inverse.
06:12.8
06:17.6
State automatically become...
06:17.7
06:22.5
Oposite of its existing value.
06:22.6
06:27.4
We mention that operator as exclamatory mark..[Laughter].
06:27.5
06:32.3
When we use this operator, it inverses the value in it.
06:32.4
06:37.2
It changes each time we press the button.
06:37.3
06:42.1
Do you understand ? yes ,ok set.
06:42.2
06:47.0
Let's remove this comment.
06:47.1
06:51.9
Now let's give it as Show.
06:52.0
06:56.8
Give it as Show/Hide.
06:56.9
07:01.7
Let's Run it now.This not a button.
07:01.8
07:06.6
It will not change, because we only change the state here.
07:06.7
07:11.5
We have to define the action based on the value in state.May i continue this?
07:11.6
07:16.4
For that, what should we do?
07:16.5
07:21.3
We will make this component dynamic.
07:21.4
07:26.2
First, we will check the state whether it is true.
07:26.3
07:31.1
Show the counter if the state is true,else give a null value to make it empty.
07:31.2
07:36.0
What is the name of this operator? Ternary operator.
07:36.1
07:40.9
We can make the if condition also.
07:41.0
07:45.8
Just demonstrate it.
07:45.9
07:50.7
I will show it here.
07:50.8
07:55.6
We have to write the count component inside the if condition.
07:55.7
08:00.5
And null inside else case.
08:00.6
08:05.4
We can write it in one single line. [Syntax: State?true case: false else]
08:05.5
08:15.2
If state is true we give the value as Counter else null.
08:15.3
08:20.1
We can write this either useing if else condition or using ternary operator.
08:20.2
08:25.0
Default value is false, hence the counter component will not showed here.
08:25.1
08:29.9
It will showed when we click the text.
08:30.0
08:34.8
I will make it much more simple
08:34.9
08:39.7
Here we didn't show anything. sometimes we have to show something else here.
08:39.8
08:49.5
Sometimes we need to show the loading. For that, we place the loading inside the state and show the loading when it is true and will not show the loading when the value is false.
08:49.6
08:54.4
In this case, let's remove this.
08:54.5
08:59.3
And place an and operator here.
08:59.4
09:04.2
Then what will happen?
09:04.3
09:09.1
It works only when both the state and count values are true.
09:09.2
09:14.0
Ok, got it .when the state value is false . Automatically it will not work.
09:14.1
09:18.9
Ok, That's a nice idea.
09:19.0
09:23.8
Don't you get this idea? It will work only when both the state and counter values become true.
09:23.9
09:28.7
Counter object is always there.
09:28.8
09:38.5
But state object value changes when we click on the text. When the value of state is false in and operator it automatically become false.
09:38.6
09:43.4
In and operator both the values should be true to work the action associated with it.
09:43.5
09:48.3
Take that. Now, the default value is true. Toggle it.
09:48.4
09:58.1
You may think this show/hide functonality works with css property like visible or invisible.
09:58.2
10:03.0
Here it works in a different way
10:03.1
10:07.9
There is thing called Elements.
10:08.0
10:12.8
From there we can see everything, Everything is happens inside the body.
10:17.8
10:22.6
Pay attention here.In left side,
10:22.7
10:27.5
You can see a new div is generated when we click here.
10:27.6
10:32.4
Open that div.
10:32.5
10:37.3
You can see hello i am a component inside the div.
10:37.4
10:42.2
This is known as mounting.
10:52.1
10:56.9
When we click on the text again the div will disappear again. That is Unmounting.
10:57.0
11:01.8
Now you know what is mount and unmount.
11:01.9
11:06.7
Now will show the update also, Update is nothing but change the value.
11:06.8
11:11.6
Now let's replace h1 with a counter.
11:11.7
11:16.5
Show the unmounting to them.
11:16.6
11:21.4
Pay attention, when we click on the text, the div will get disappeared.
11:21.5
11:26.3
Here we are not changing the visibility. Instead, we remove the component.
11:26.4
11:31.2
This is amazing.
11:31.3
11:36.1
Now we get it. Place a counter,
11:41.1
11:45.9
You have to manage the state from here.
12:00.7
12:05.5
Are you going to place a button in counter?yes
12:10.5
12:15.3
First I used class components.
12:20.3
12:25.1
Replace with count and setCount.
12:35.0
12:39.8
ok, Make c capital letter.
12:39.9
12:44.7
It is a standard called camelCasing.
12:54.6
12:59.4
Here we need a button.
12:59.5
13:04.3
For incrementing the counter, let's place a button.
13:14.2
13:19.0
We can write it in there itself. Calling setCount.
13:28.9
13:33.7
The increment button gets displayed.
13:33.8
13:38.6
We can see the updation here.
13:38.7
13:43.5
This is updating state.
13:43.6
13:53.3
Now we understand Mounting, Unmounting and, Updating.
13:53.4
13:58.2
There is a working method for each component.
13:58.3
14:03.1
We can use useEffect when a component changes.
14:08.1
14:12.9
Now you have to add useEffect.
14:13.0
14:17.8
I want to share the truth. We have already shot all the content before,
14:17.9
14:22.7
This fellow forgot to record the screen.
14:22.8
14:27.6
He messed it up.
14:27.7
14:32.5
We are repeating the same content, still i will make it intreasting for you.
14:32.6
14:37.4
For using useEffect let's import useEffect.
14:37.5
14:42.3
Write useEffect as a function.
14:42.4
14:47.2
useEffect is a function,we call it.
14:47.3
14:52.1
Inside the function, we give arrow function as argument.
14:52.2
14:57.0
There is a second argument also. Will introduce it to you later.
15:02.0
15:06.8
We have already shows the arrival and withdrawal of the component.
15:11.8
15:16.6
Let's check whether this useEffect works while mounting.
15:21.6
15:31.3
Mounting Not works when we loaded it.
15:31.4
15:36.2
Press the Show/Hide.
15:36.3
15:41.1
Now the mounting works
15:41.2
15:46.0
Press the show button again.When we hide the text Mounting is not working.
15:51.0
15:55.8
Increment the count now.
15:55.9
16:00.8
Mounting works when we increment the count.While we increment the count we updating the view.
16:00.9
16:10.6
We call useEffect function in the time of mounting and unmounting as an argument.And giving an arrow function inside it.
16:10.7
16:15.5
and giving a console.log or something inside the arrow function,
16:15.6
16:20.4
It will works when the component get mounted and updated
16:20.5
16:25.3
Make that clear.
16:25.4
16:40.0
Show the unmount now.
16:49.9
16:54.7
This is cocola.
16:54.8
16:59.6
Don't miss understand me.
17:04.6
17:14.3
What is unmounting? It works when the component gets hided.
17:14.4
17:19.2
We are giving a return keyword inside useEffect.
17:19.3
17:24.1
and giving some log inside the return, it will work during the unmounting time.
17:24.2
17:29.0
Let's check
17:29.1
17:33.9
Refresh,While showing counter component mounting will works.When clicked once again unmounting will works.
17:43.8
17:48.6
While incrementing both are working.
17:48.7
17:53.5
Ok,Now we understand what is mounting and unmounting.
17:53.6
17:58.4
Now we have to do,
17:58.5
18:03.3
Mounting works when ever a change happens in the component.
18:03.4
18:08.2
Let's change it in such a way that it works only when the mounting happens.
18:08.3
18:13.1
For that let's give a restriction here ,as an empty array.
18:13.2
18:18.0
Empty array is the second argument of useEffect.
18:18.1
18:22.9
Save and reload.
18:23.0
18:27.8
Now Mounting prints in console when we increment the count nothing will be displayed in the console.
18:32.8
18:37.6
useEffects first argument function is here.We are giving an array as a second argument to the useEffect by seperated by a comma.
18:37.7
18:42.5
When we pass an empty array
18:42.6
18:47.4
It works only the component gets mounted.
18:52.4
18:57.2
It will not work during updating,but umounting will works as usual.
18:57.3
19:02.1
Cleared and refreshed.
19:02.2
19:07.0
Mounting showed,
19:07.1
19:11.9
Unmounting showed,While incrementing nothing is worked.
19:12.0
19:16.8
Value is changed and view gets updated.
19:16.9
19:21.7
This is because we are passing an empty array.
19:26.7
19:31.5
Let's make useEffect working while updating the counter.
19:31.6
19:36.4
For that let's remove this.
19:36.5
19:41.3
No we need that mounting there.
19:41.4
19:46.2
And unmounting also.
19:46.3
19:51.1
We cant write unmounting there.
19:51.2
19:56.0
I will explain the reason later.
19:56.1
20:00.9
Let's print the value also.
20:10.8
20:15.6
Now we have to give the count value inside the array.
20:15.7
20:20.5
Hence this works during the time of updating.
20:20.6
20:25.4
When the objects which calls the use state gets updated.
20:25.5
20:30.3
We can define that here
20:30.4
20:35.2
We can give two useStates here by seperating comas.
20:35.3
20:40.1
Now there is an error happens.
20:40.2
20:45.0
Conut declares here and used above that.Place that above.
20:45.1
20:49.9
You have to call the useState above here.
20:50.0
20:54.8
Now clear the console,Error resolved.
20:59.8
21:04.6
It Works only when first time mounted.Now let's update it by incrementing.
21:04.7
21:09.5
Now it is working during mounting and updating.
21:14.5
21:19.3
Now let's add one more useState.
21:19.4
21:24.2
The count is getting printed during updation.
21:29.2
21:34.0
Add return also.
21:48.8
21:53.6
Will explain you later.
21:53.7
21:58.5
Now let's check,refresh and run.
22:08.4
22:13.2
Did you notice while increment.?
22:13.3
22:18.1
When did the return works?
22:18.2
22:23.0
Yes,during unmounting time.
22:23.1
22:27.9
Take the code..
22:28.0
22:32.8
When we give count value inside the array,
22:32.9
22:37.7
When we update something first it will call the return.
22:37.8
22:42.6
For cleanup
22:42.7
22:47.5
First we call this during updation.
22:47.6
22:52.4
First cleanup 0
22:52.5
22:57.3
Then updating one,count prints two values in one action.
22:57.4
23:02.2
While pressing increment, cleanup1 and updating 2
23:02.3
23:07.1
You have to understand that order
23:07.2
23:16.9
First called return, So count value before updation prints
23:17.0
23:21.8
After updating the count value changes hence the count will print a different value.
23:26.8
23:31.6
Understand the difference clearly
23:31.7
23:36.5
Let's add another count also
23:36.6
23:41.4
How counters works seperately?
23:41.5
23:46.3
add a state
23:46.4
23:51.2
Remove cleanup
23:56.2
24:01.0
Give second states name as count2.
24:06.0
24:10.8
Let's create it once again.
24:10.9
24:15.7
Actually we haveto repeat that component , but we follow this method to show as an example.
24:35.4
24:40.2
Change the value of count.
24:45.2
24:50.0
Print the value of count in console.
24:50.1
24:54.9
Take the count,
24:55.0
24:59.8
Print count also
24:59.9
25:04.7
Copy that below here..
25:14.6
25:19.4
Give count1 here
25:29.3
25:34.1
Now let's check
25:34.2
25:39.0
Refresh, What is the error?
25:53.8
25:58.6
Let's check what happened.
26:03.6
26:08.4
The value changes in count2
26:08.5
26:13.3
But useEffect is not working
26:13.4
26:18.2
useEffect works only with counter1
26:18.3
26:23.1
Take that code.
26:23.2
26:28.0
It works because we give count here,
26:28.1
26:32.9
Let's give count2 also
26:33.0
26:37.8
Now useEffect works with both counters
26:48.2
26:53.0
We finish the basics now
26:53.1
26:57.9
Next we can start TO DO LIST APPLICATION.
