1
00:00:00,630 --> 00:00:04,320
So Industrial Real will be discussing about hoax, right?

2
00:00:04,620 --> 00:00:09,320
So the simplest of that to discuss and that is in our project is the use data.

3
00:00:09,600 --> 00:00:14,480
So the first thing that we do is important you straight up from the act module.

4
00:00:14,550 --> 00:00:18,540
So just go and use state.

5
00:00:21,160 --> 00:00:23,350
To be imported from React what you.

6
00:00:24,910 --> 00:00:29,770
So now that we have imported a React module, let's discuss what is in our app.

7
00:00:30,160 --> 00:00:32,800
This might be the simplest counter that you have ever encountered.

8
00:00:33,100 --> 00:00:36,100
It has a plus sign it as a minus sign and it has an integer.

9
00:00:36,460 --> 00:00:39,730
And at present, this plus sign in this minus sign doesn't do much.

10
00:00:39,970 --> 00:00:41,680
So we will be adding its functionality.

11
00:00:43,150 --> 00:00:48,850
Well, as you might be aware, Blue State helps us to leverage the benefit of state in a functional

12
00:00:48,850 --> 00:00:49,420
component.

13
00:00:49,750 --> 00:00:52,420
And first things first, you state our.

14
00:00:58,460 --> 00:01:04,760
We only use in picture components that aren't allowed in platform components because in glass components,

15
00:01:04,760 --> 00:01:06,530
the way of handling it is quite different.

16
00:01:07,130 --> 00:01:10,310
So let's create our first use state.

17
00:01:11,810 --> 00:01:16,490
So what does you state does is actually it returns us an error.

18
00:01:17,660 --> 00:01:19,790
So what does it returns us and edit?

19
00:01:20,060 --> 00:01:21,350
So let's animate count.

20
00:01:23,030 --> 00:01:26,300
And the setup should be set count.

21
00:01:27,620 --> 00:01:34,640
So what we have over here is that going to the variable set, going to the search function that is going

22
00:01:34,640 --> 00:01:40,810
to set the value of count and inside the you state, there's going to be the initial value of what the

23
00:01:40,820 --> 00:01:41,930
count is going to hold.

24
00:01:42,860 --> 00:01:47,630
So going to the variable that is going to hold the state set count, there's a function that is going

25
00:01:47,630 --> 00:01:53,570
to set the value of account, whereas in your state the argument that the person is the initial value

26
00:01:53,570 --> 00:01:54,110
of the account.

27
00:01:54,500 --> 00:02:00,200
So for example, if rather than putting up a zero a year, if we dynamically oportunidades value to

28
00:02:00,800 --> 00:02:03,260
count, you will see number three being printed about him.

29
00:02:04,280 --> 00:02:04,610
Right.

30
00:02:04,790 --> 00:02:08,940
So now let's discuss how to use that gong for that purpose.

31
00:02:08,960 --> 00:02:11,870
Let us make two functions and name them.

32
00:02:13,340 --> 00:02:18,050
Let's see what function, increment and its value is going to be to the property of this function is

33
00:02:18,050 --> 00:02:23,390
going to increase our value by one and another function that is going to be called as function decrement

34
00:02:24,290 --> 00:02:24,770
function.

35
00:02:24,770 --> 00:02:25,040
The.

36
00:02:27,730 --> 00:02:33,540
And the property might be visible from its name, it is going to decrease the value of a function of

37
00:02:33,550 --> 00:02:38,950
our suggested variable or discount if you can see the value in.

38
00:02:41,170 --> 00:02:48,310
OK, so now let's define the properties in it, so this is going to set the account whenever this function

39
00:02:48,310 --> 00:02:48,940
is going to be called.

40
00:02:52,220 --> 00:02:58,460
To gold minus one count, plus one in case of increment and.

41
00:03:00,570 --> 00:03:03,780
This is going to decrease the value by one count minus one.

42
00:03:04,110 --> 00:03:08,220
Now let's call these functions inside our button elements and on.

43
00:03:08,220 --> 00:03:16,770
And let me just put up increment as well as in the negative sign.

44
00:03:17,950 --> 00:03:18,480
Unclear.

45
00:03:18,910 --> 00:03:19,810
Should be able to.

46
00:03:21,350 --> 00:03:22,040
Decrement.

47
00:03:24,380 --> 00:03:27,830
So now we have a functions of limited initial attack.

48
00:03:28,040 --> 00:03:31,450
So now if I click on Plus button, you will see the value is going to increase by one.

49
00:03:31,460 --> 00:03:34,730
And if I click on minus button, the well is going to decrease by one.

50
00:03:35,750 --> 00:03:38,990
So we have a functional counter, right?

51
00:03:40,430 --> 00:03:45,590
But what if I just increase just endured when most had gone to him?

52
00:03:59,910 --> 00:04:00,200
Right.

53
00:04:00,510 --> 00:04:04,530
So now what should happen if I hit the button bless might two, right?

54
00:04:04,800 --> 00:04:06,480
So let us see if that happens or not.

55
00:04:09,440 --> 00:04:12,840
What we see is only one number is getting increased right.

56
00:04:12,860 --> 00:04:14,060
There is only increment of one.

57
00:04:14,210 --> 00:04:19,070
So why this is happening, because these two functions are actually what they're doing is they're overriding

58
00:04:19,070 --> 00:04:19,610
one another.

59
00:04:20,000 --> 00:04:25,280
So in case you want to overcome this and this is not the best practice that we have actually done,

60
00:04:25,280 --> 00:04:29,620
we're here to overcome the flaws that we have in this court.

61
00:04:29,630 --> 00:04:33,110
Let's just use the previous state, previous government.

62
00:04:40,800 --> 00:04:45,680
So now, if we increase our value to one, it is going to increase our rate.

63
00:04:45,990 --> 00:04:52,410
But what if we just copied this function and copied the statement and again pasted a knife?

64
00:04:52,410 --> 00:04:58,560
I'm going to hit the plastic and you will see two numbers getting eliminated eight, 10 12.

65
00:04:59,100 --> 00:05:04,960
So in the difference between this piece of code and the previous one is that it is using our previous

66
00:05:04,980 --> 00:05:06,690
date to increment that new state.

67
00:05:06,990 --> 00:05:09,030
While the previous one was not doing so, it was.

68
00:05:12,750 --> 00:05:18,480
Make this code more cleaner, and we have to just define the same for the decrement one.

69
00:05:22,040 --> 00:05:29,510
OK, so here you have one encounter with the use they took and that we're able to increment by one as

70
00:05:29,510 --> 00:05:30,590
well as the decrement by one.

71
00:05:33,210 --> 00:05:37,980
Now, the end of the hook that they're going to use in our application is the use of OK, so for that

72
00:05:37,980 --> 00:05:41,880
purpose, we have to first import our use effect from a React module.

73
00:05:42,270 --> 00:05:47,010
And if in a simplest format to explain what really effect hook it is plus side effects.

74
00:05:47,550 --> 00:05:51,030
So just consider log it and type the value rendered.

75
00:05:51,510 --> 00:05:56,010
And this is going to be rendered every time a component states changes or it is being rendered.

76
00:05:56,490 --> 00:05:57,510
So just aprender.

77
00:05:57,540 --> 00:06:05,730
And if you run it or change it, state any time it is going to be rendered like render one two three

78
00:06:05,730 --> 00:06:08,280
four five six and I mean incrementally increment the value.

79
00:06:08,280 --> 00:06:11,790
It is going to change and it is going to be rendered use a vector.

80
00:06:12,000 --> 00:06:12,630
Now it is.

81
00:06:12,630 --> 00:06:14,100
It comes with another parameter.

82
00:06:14,100 --> 00:06:19,560
We can pass an empty array or in this case, we are going to pass a count value.

83
00:06:20,030 --> 00:06:24,000
And now this, we're only going to be rendered when the value of count changes.

84
00:06:24,330 --> 00:06:26,700
So to display it, let's just remove that one.

85
00:06:26,700 --> 00:06:31,110
And if are going to remove that, that means every time we hit plus icon, there will be absolutely

86
00:06:31,110 --> 00:06:31,860
no change in state.

87
00:06:32,100 --> 00:06:35,730
So you will see there will be no renders then.

88
00:06:36,180 --> 00:06:40,770
So in effect, minus sign will see that it is incrementing.

89
00:06:40,770 --> 00:06:46,670
But in case of +9, you won't see the numbers being incremented or so if we just add again one take.

90
00:06:49,410 --> 00:06:55,380
And if it was an empty area, it is only going to be rendered once when a component gets mounted.

91
00:06:56,040 --> 00:06:59,130
So let's just refresh our app for that purpose.

92
00:07:06,380 --> 00:07:11,030
No, it is it has been rendered, and now no matter what we change, if we change the state or not,

93
00:07:11,240 --> 00:07:12,950
it is not going to be rearranged again.

94
00:07:13,550 --> 00:07:15,530
So this is the property that they're going to use.

95
00:07:16,190 --> 00:07:18,210
This is the place that we are going to go that API on.