1

[Link],840 --> [Link],750

2
[Link],750 --> [Link],510
across at some point in your React development journey.

3
[Link],740 --> [Link],250
And it's this comparison between hooks and classes.

4
[Link],390 --> [Link],030
Now in order to really understand this we have to go back and to the very
beginning.

5
[Link],030 --> [Link],880
And so once upon a time in a land far far away, there were two ways of adding state
into a React app.

6
[Link],840 --> [Link],060
One way or what you might call functional components, look like this.

7
[Link],180 --> [Link],150
And you should be pretty familiar with this by now.

8
[Link],150 --> [Link],500
And it's a really well understood way of creating these separate React components.
But you should

9
[Link],500 --> [Link],520
be aware that there's also another way that you can in fact create React
components. Instead of splitting

10
[Link],520 --> [Link],250
individual components into functions,

11
[Link],280 --> [Link],440
you can also create a class. And the only difference is the keyword, instead of
function becomes class.

12
[Link],440 --> [Link],350
Classes are not called, so they don't have these parentheses.

13
[Link],670 --> [Link],070
And this class must extend something that comes from the React module something
called component.
14
[Link],070 --> [Link],650
And this turns your app class into a React component class. And in order to render
what you want to see

15
[Link],680 --> [Link],500
inside this component, you have to add your code inside a render method like so.
That wasn't a big deal

16
[Link],620 --> [Link],900
and it was just a few extra lines of code and we end up with exactly the same
result.

17
[Link],010 --> [Link],630
Now in the past, the main reason why people converted their functional components
into class components

18
[Link],020 --> [Link],450
was because it was required in order to have state.

19
[Link],480 --> [Link],450
If you take a look at some of the documentation on state and lifecycle for example
which are linked

20
[Link],450 --> [Link],789
to, you'll see that in order to use state, it used to be that you had to convert
your functions into a

21
[Link],789 --> [Link],670
class just like what we did just now.

22
[Link],670 --> [Link],510
So what does managing state using classes actually look like?

23
[Link],510 --> [Link],660
Let me show you a simple counter map as an example.

24
[Link],780 --> [Link],970
And so I've created a class component here of our counter app and all it does is it
has a single button

25
[Link],360 --> [Link],690
which increases the number of the count.

26
[Link],770 --> [Link],600
So if I go ahead and replace my with my class component, you can see that I'm
using it in the same
27
[Link],600 --> [Link],780
way as I would with my functional Component, just adding it in as a self closing
tag.

28
[Link],790 --> [Link],430
Now using this class component, I'm able to render a and a button.

29
[Link],680 --> [Link],180
And when this button gets clicked, it calls a function called increase. And
increase will then in turn call

30
[Link],240 --> [Link],100
a pre-built function called setState which allows us to pass over some new values
to the object that

31
[Link],370 --> [Link],870
is stored inside this property, state.

32
[Link],760 --> [Link],570
Now this works exactly the same as what we would have done using hooks but you can
see that involves

33
[Link],720 --> [Link],390
a lot more boilerplate code and it's a little bit harder to reason about especially
when you've got

34
[Link],390 --> [Link],560
this all over the place.

35
[Link],640 --> [Link],570
It also requires binding and it gets pretty complicated when you want to reuse some
of your state functionality

36
[Link],690 --> [Link],490
across different components.

37
[Link],520 --> [Link],000
So back in 2018, the React team set about trying to solve this problem and many
others. And they came

38
[Link],000 --> [Link],140
up with the idea of hooks. And I strongly recommend to actually have a look at this
page in the React

39
[Link],140 --> [Link],580
documentation just so that you can watch the video and take a look at some of their
concepts around

40
[Link],640 --> [Link],300
why they decided to build hooks and why it's so awesome.

41
[Link],300 --> [Link],590
Now what the React team recommends is that if you're writing new code that you
should start using hooks

42
[Link],950 --> [Link],720
instead of classes because this is a much easier way of managing state.

43
[Link],040 --> [Link],060
It just makes the code much clearer and much easier to reason about.

44
[Link],079 --> [Link],420
Now the thing to remember is that you can only use hooks with functional
components.

45
[Link],420 --> [Link],080
You can't use it inside a class component. But they do say that if you already have
classes written for

46
[Link],080 --> [Link],990
a React app, then you can use it alongside. Here

47
[Link],060 --> [Link],910
I've written the functional component equivalent of our counter app here and you
can see that at a glance

48
[Link],930 --> [Link],570
firstly by using hooks, we're saving ourselves a lot of lines of code.

49
[Link],110 --> [Link],490
And this is because it removes a lot of the boilerplate that's required in order to
use classes.

50
[Link],540 --> [Link],910
You'll see that there's no this keyword all over the place,

51
[Link],990 --> [Link],830
you can see that the state is kept together in one constant and you've got the
count and set count

52
[Link],950 --> [Link],950
being destructed from our use state function.

53
[Link],100 --> [Link],710
And all we have to do to change the count is to call set count if we want to use
the count then we

54
[Link],710 --> [Link],870
simply use it as the variable name itself. So this way we can create React apps
that are entirely built

55
[Link],990 --> [Link],050
using functional components instead of having a mix of functional components and
then occasionally having

56
[Link],050 --> [Link],340
to convert our functional components into class components just to be able to have
a stateful app.

57
[Link],340 --> [Link],500
But in the wild, you will occasionally see components built using classes.

58
[Link],500 --> [Link],070
You will see [Link] or .setState, but gradually what we're seeing is that the
React community

59
[Link],100 --> [Link],870
is really embracing this concept of hooks and new code and future code will be
written in this format.

60
[Link],080 --> [Link],290
So this is just a quick lesson to talk about these two different ways of managing
state just so that

61
[Link],290 --> [Link],890
when you come across classes in the wild you're not confused about what's
happening.

62
[Link],940 --> [Link],440
Most of the cases when people are telling you to write class component, it's to be
able to use and set

63
[Link],530 --> [Link],830
the state of an app which you can achieve in exactly the same way

64
[Link],850 --> [Link],590
using this useState hook.