1
00:00:00,240 --> 00:00:06,300
All right, it's time to learn about Hucks now, the very first thing that we need to answer is what

2
00:00:06,300 --> 00:00:07,080
are hucks?

3
00:00:07,620 --> 00:00:14,070
Well, if we take a look at the documentation, there's a section here that says what is a hook?

4
00:00:14,490 --> 00:00:21,300
And we see over here that hooks are a function that let you hook into Riak state and life-cycle features

5
00:00:21,420 --> 00:00:23,550
for function components.

6
00:00:24,480 --> 00:00:33,180
Hooks don't work inside classes, and that's the thing, all hooks are, is if we go to our container.

7
00:00:34,740 --> 00:00:37,620
The app, James, let's minimize this.

8
00:00:37,800 --> 00:00:38,310
There you go.

9
00:00:38,760 --> 00:00:46,770
The app, James is using a class component and remember, hooks are a way for us to avoid using classes

10
00:00:46,770 --> 00:00:53,040
so that we can avoid the super keyword, that this key word that some people find confusing, even things

11
00:00:53,040 --> 00:00:58,610
like component did mount that these life-cycle hooks that sometimes can get confusing.

12
00:00:59,130 --> 00:01:08,280
So hooks allow us to use functional components which remember, we have talked about our components

13
00:01:08,280 --> 00:01:13,530
are functional components right there, just functions that render something.

14
00:01:14,620 --> 00:01:23,830
But before Hooke's, we only created functional components once when we didn't have any state inside

15
00:01:23,830 --> 00:01:28,420
of them, all these components are what we call just presentational components, right?

16
00:01:28,450 --> 00:01:30,310
They just returned something.

17
00:01:30,460 --> 00:01:33,900
They just received props and returned some sort of a view.

18
00:01:34,450 --> 00:01:42,580
But any time we wanted to use state, we had to convert those functions into a class component so that

19
00:01:42,580 --> 00:01:47,920
we can do this Dotts state and declare our state with Hooke's.

20
00:01:48,160 --> 00:01:52,980
What you get is that you can now add state to a function.

21
00:01:53,620 --> 00:02:01,390
So because we have a version sixteen point eight or higher overreact, we can convert this app class

22
00:02:01,600 --> 00:02:02,980
into a function.

23
00:02:04,030 --> 00:02:08,460
Now, here's a thing I want you to practice reading documentation here.

24
00:02:08,500 --> 00:02:14,350
Oftentimes, whenever we are introduced to a new concept, our default is to, hey, let's go find a

25
00:02:14,350 --> 00:02:15,370
tutorial online.

26
00:02:15,370 --> 00:02:17,380
Let's go buy a course that teaches us this.

27
00:02:17,620 --> 00:02:21,160
But the best resource is usually the documentation.

28
00:02:21,280 --> 00:02:27,040
The documentation is created by the people that actually created REACT, actually created the Hooke's

29
00:02:27,310 --> 00:02:27,940
API.

30
00:02:28,270 --> 00:02:33,510
So they usually have good resources for you to learn and use.

31
00:02:34,300 --> 00:02:41,290
So as an exercise before we dive into the next video and I show you how we can start converting this

32
00:02:41,470 --> 00:02:47,590
with hooks, I want you to go into the hook section of their REACT documentation and see if we can figure

33
00:02:47,590 --> 00:02:51,040
out how to keep this up the exact same way that it is.

34
00:02:51,040 --> 00:02:51,890
It still works.

35
00:02:51,910 --> 00:03:00,490
You can still search through your robot friends, but you convert this class app into a functional component.

36
00:03:00,760 --> 00:03:07,780
And instead of having things like constructor or component did amount to just convert this all into

37
00:03:07,780 --> 00:03:09,130
using hooks.

38
00:03:09,760 --> 00:03:10,900
I'll give you a little hint.

39
00:03:11,350 --> 00:03:16,270
In order for us to do this, we'll have to import two things.

40
00:03:17,210 --> 00:03:23,450
From react that we now have available, because we've updated one, is something called use state,

41
00:03:23,660 --> 00:03:30,380
which is a hook, so it's called the use state hook and the other one is called the use.

42
00:03:32,730 --> 00:03:40,290
Which is another hook, you see hooks essentially give us that they give us hooks like this from the

43
00:03:40,290 --> 00:03:48,210
Riak Library for us to implement and use inside of our functional component to finally have state and

44
00:03:48,210 --> 00:03:49,500
life-cycle methods.

45
00:03:50,680 --> 00:03:56,280
So if you want to give it a go and convert this into a functional component that uses hooks.

46
00:03:56,650 --> 00:03:57,160
Go ahead.

47
00:03:57,170 --> 00:04:00,130
Otherwise, I'll show you how to do this in the next video.

48
00:04:00,460 --> 00:04:00,820
Papy.