Hey guys. In this lesson, I want to talk about something that you might have come across or will come
across at some point in your React development journey.
And it's this comparison between Hooks and Classes.
Now in order to really understand this we have to go back and go to the very beginning.
And so once upon a time in a land far far away, there were two ways of adding state into a React app.
One way or what you might call functional components, look like this,
and you should be pretty familiar with this by now.
And it's a really well-understood way of creating these separate React components, but you should
be aware that there's also another way that you can in fact create React components. Instead of splitting
individual components into functions,
you can also create a class. And the only difference is the keyword, instead of function becomes class.
Classes are not called, so they don't have these parentheses.
And this class must extend something that comes from the React module something called Component.
And this turns your App class into a React Component class. And in order to render what you want to see
inside this component, you have to add your code inside a render() method, like so. That wasn't a big deal
and it was just a few extra lines of code and we end up with exactly the same result.
Now in the past, the main reason why people converted their functional components into class components
was because it was required in order to have state.
If you take a look at some of the documentation on State and Lifecycle for example, which I'll link
to, you'll see that in order to use state, it used to be that you had to convert your functions into a
class just like what we did just now.
So what does managing state using classes actually look like?
Let me show you a simple counter app as an example.
And so I've created a ClassComponent here of our counter app and all it does is it has a single button
which increases the number of the count.
So if I go ahead and replace my h1 with my ClassComponent, you can see that I'm using it in the same
way as I would with my functional component, just adding it in as a self-closing tag.
Now using this ClassComponent, I'm able to render a h1 and a button,
and when this button gets clicked, it calls a function called increase(). And increase() will then in turn call
a pre-built function called setState which allows us to pass over some new values to the object that
is stored inside this property, state.
Now, this works exactly the same as what we would have done using Hooks, but you can see that involves
a lot more boilerplate code and it's a little bit harder to reason about especially when you've got
this all over the place.
It also requires binding and it gets pretty complicated when you want to reuse some of your state functionality
across different components.
So back in 2018, the React team set about trying to solve this problem and many others, and they came
up with the idea of Hooks. And I strongly recommend to actually have a look at this page in the React
documentation just so that you can watch the video and take a look at some of their concepts around
why they decided to build Hooks and why it's so awesome.
Now what the React team recommends is that if you're writing new code, that you should start using Hooks
instead of classes because this is a much easier way of managing state.
It just makes the code much clearer and much easier to reason about.
Now the thing to remember is that you can only use hooks with functional components,
you can't use it inside a class component. But they do say that if you already have classes written for
a React app, then you can use it alongside. Here
I've written the functional component equivalent of our counter app here and you can see that at a glance
firstly by using Hooks, we're saving ourselves a lot of lines of code.
And this is because it removes a lot of the boilerplate that's required in order to use classes.
You'll see that there's no, this keyword, all over the place,
you can see that the state is kept together in one const and you've got the count and setCount
being destructed from our useState function,
and all we have to do to change the count is to call setCount if we want to use the count then we
simply use it as the variable name itself. So this way we can create React apps that are entirely built
using functional components instead of having a mix of functional components and then occasionally having
to convert our functional components into class components just to be able to have a stateful app.
But in the wild, you will occasionally see components built using classes.
You will see this.state or .setState, but gradually what we're seeing is that the React community
is really embracing this concept of Hooks and new code and future code will be written in this format.
So this is just a quick lesson to talk about these two different ways of managing state just so that
when you come across classes in the wild you're not confused about what's happening.
Most of the cases when people are telling you to write ClassComponent, it's to be able to use and set
the state of an app which you can achieve in exactly the same way
using this useState Hook.