Hey guys. In this lesson I want to talk about something that you might have come across or will come 1
across at some point in your React development journey. 2
And it's this comparison between hooks and classes. 3
Now in order to really understand this we have to go back and to the very beginning. 4
And so once upon a time in a land far far away, there were two ways of adding state into a React app. 5
One way or what you might call functional components, look like this. 6
And you should be pretty familiar with this by now. 7
And it's a really well understood way of creating these separate React components. But you should 8
be aware that there's also another way that you can in fact create React components. Instead of splitting 9
individual components into functions, 10
you can also create a class. And the only difference is the keyword, instead of function becomes class. 11
Classes are not called, so they don't have these parentheses. 12
And this class must extend something that comes from the React module something called component. 13
And this turns your app class into a React component class. And in order to render what you want to see 14
inside this component, you have to add your code inside a render method like so. That wasn't a big deal 15
and it was just a few extra lines of code and we end up with exactly the same result. 16
Now in the past, the main reason why people converted their functional components into class components 17
was because it was required in order to have state. 18
If you take a look at some of the documentation on state and lifecycle for example which are linked 19
to, you'll see that in order to use state, it used to be that you had to convert your functions into a 20
class just like what we did just now. 21
So what does managing state using classes actually look like? 22
Let me show you a simple counter map as an example. 23
And so I've created a class component here of our counter app and all it does is it has a single button 24
which increases the number of the count. 25
So if I go ahead and replace my with my class component, you can see that I'm using it in the same 26
way as I would with my functional Component, just adding it in as a self closing tag. 27
Now using this class component, I'm able to render a and a button. 28
And when this button gets clicked, it calls a function called increase. And increase will then in turn call 29
a pre-built function called setState which allows us to pass over some new values to the object that 30
is stored inside this property, state. 31
Now this works exactly the same as what we would have done using hooks but you can see that involves 32
a lot more boilerplate code and it's a little bit harder to reason about especially when you've got 33
this all over the place. 34
It also requires binding and it gets pretty complicated when you want to reuse some of your state functionality 35
across different components. 36
So back in 2018, the React team set about trying to solve this problem and many others. And they came 37
up with the idea of hooks. And I strongly recommend to actually have a look at this page in the React 38
documentation just so that you can watch the video and take a look at some of their concepts around 39
why they decided to build hooks and why it's so awesome. 40
Now what the React team recommends is that if you're writing new code that you should start using hooks 41
instead of classes because this is a much easier way of managing state. 42
It just makes the code much clearer and much easier to reason about. 43
Now the thing to remember is that you can only use hooks with functional components. 44
You can't use it inside a class component. But they do say that if you already have classes written for 45
a React app, then you can use it alongside. Here 46
I've written the functional component equivalent of our counter app here and you can see that at a glance 47
firstly by using hooks, we're saving ourselves a lot of lines of code. 48
And this is because it removes a lot of the boilerplate that's required in order to use classes. 49
You'll see that there's no this keyword all over the place, 50
you can see that the state is kept together in one constant and you've got the count and set count 51
being destructed from our use state function. 52
And all we have to do to change the count is to call set count if we want to use the count then we 53
simply use it as the variable name itself. So this way we can create React apps that are entirely built 54
using functional components instead of having a mix of functional components and then occasionally having 55
to convert our functional components into class components just to be able to have a stateful app. 56
But in the wild, you will occasionally see components built using classes. 57
You will see this.state or .setState, but gradually what we're seeing is that the React community 58
is really embracing this concept of hooks and new code and future code will be written in this format. 59
So this is just a quick lesson to talk about these two different ways of managing state just so that 60
when you come across classes in the wild you're not confused about what's happening. 61
Most of the cases when people are telling you to write class component, it's to be able to use and set 62
the state of an app which you can achieve in exactly the same way 63
using this useState hook.