1
00:00:01,200 --> 00:00:04,080
At this point, we have definitely mastered it, class based components.

2
00:00:04,290 --> 00:00:07,800
We understand the state system, we understand life-cycle methods and so on.

3
00:00:08,350 --> 00:00:13,320
So now we're going to start to move ahead and discuss the hoax system in the world of react, the hoax

4
00:00:13,320 --> 00:00:14,490
system, you might recall.

5
00:00:14,580 --> 00:00:15,630
It's kind of a logical mess.

6
00:00:15,690 --> 00:00:18,540
Next step after understanding class components.

7
00:00:18,900 --> 00:00:23,070
So we really went through all that class component stuff, not only because you need to understand class

8
00:00:23,070 --> 00:00:27,630
components, but also because, well, it makes a lot easier to understand the whole system.

9
00:00:28,350 --> 00:00:30,950
Let's have a quick overview of what hooks are all about.

10
00:00:32,200 --> 00:00:36,180
So in the world of react, the hoax system is all about giving function components.

11
00:00:36,450 --> 00:00:38,220
A lot of additional functionality.

12
00:00:39,230 --> 00:00:43,100
As we have discussed, Function Koenen so far throughout this course, we have said that they could

13
00:00:43,100 --> 00:00:48,950
not make use of state or life-cycle methods and so on the hook system is all about changing that with

14
00:00:48,990 --> 00:00:49,760
the hook system.

15
00:00:50,120 --> 00:00:55,710
React gives us functions called things like use state use effect, use RF.

16
00:00:56,180 --> 00:01:01,190
These are all functions and each of them give additional functionality to a function component.

17
00:01:01,880 --> 00:01:06,740
For example, the use state function allows us to make use of state in a functional component.

18
00:01:07,390 --> 00:01:12,800
Now, when I say make use of state, I mean that we're going to have similar functions to that set state

19
00:01:12,800 --> 00:01:14,360
function that we've learned about quite a bit.

20
00:01:15,950 --> 00:01:21,280
With use effect, we get access to something like or something very similar to lifecycle methods and

21
00:01:21,290 --> 00:01:22,220
a function component.

22
00:01:22,970 --> 00:01:24,830
And finally with Use RF.

23
00:01:24,950 --> 00:01:30,350
This is also a function and allows us to create a ref or a reference to a particular element that is

24
00:01:30,350 --> 00:01:31,250
created by react.

25
00:01:32,090 --> 00:01:33,290
These are all functions.

26
00:01:33,530 --> 00:01:35,510
Everything in the hook system, all functions.

27
00:01:35,630 --> 00:01:39,680
So we need to understand what each of these different functions do and how we make use them.

28
00:01:40,690 --> 00:01:44,060
Now, as we start to discuss the hook system in general, a lot of the different concepts are going

29
00:01:44,060 --> 00:01:48,790
to go over are going to seem a little bit complicated and maybe more complicated than necessary.

30
00:01:49,390 --> 00:01:54,070
At the end of day, what I really want you to understand is that hooks are all about giving you tools

31
00:01:54,070 --> 00:01:55,420
to write reusable code.

32
00:01:55,900 --> 00:01:57,780
It's not about having fancy syntax.

33
00:01:58,030 --> 00:02:00,580
It's not about necessarily making react easier to work with.

34
00:02:01,000 --> 00:02:05,140
It's definitely not about somehow building out something better than class components.

35
00:02:05,500 --> 00:02:08,920
Instead, it is just about helping you write reusable code.

36
00:02:09,790 --> 00:02:14,890
And we're going to use this technique of the hook system rather than relying upon more classic techniques

37
00:02:14,950 --> 00:02:18,730
such as object oriented programming or inheritance or anything like that.

38
00:02:20,920 --> 00:02:25,510
With a hook system, we get a collection of different functions that we might refer to as primitive

39
00:02:25,570 --> 00:02:26,050
hooks.

40
00:02:26,610 --> 00:02:29,410
Now just, you know, react doesn't actually call these primitive hooks.

41
00:02:29,440 --> 00:02:30,940
It's a term that I'm applying to this.

42
00:02:30,940 --> 00:02:32,680
Just help you understand what these are all about.

43
00:02:33,380 --> 00:02:38,800
These are 10 functions that are included with react to give more functionality to function components.

44
00:02:39,280 --> 00:02:41,530
They each serve a very specific purpose.

45
00:02:41,620 --> 00:02:43,780
We'll take a look at a majority of them over time.

46
00:02:45,420 --> 00:02:49,080
To get started with hooks, we're going to understand how each of these different functions work and

47
00:02:49,080 --> 00:02:49,950
how we make use of them.

48
00:02:50,340 --> 00:02:55,740
But then eventually we're going to make use of these primitive hooks to write our own custom hooks.

49
00:02:56,430 --> 00:03:03,150
A custom hook is a piece of code that does one very repeatable or task, little chunk of code that we

50
00:03:03,150 --> 00:03:06,780
want to make as reusable as possible inside of a custom hook.

51
00:03:06,900 --> 00:03:11,010
We're going to reuse some of the different primitive folks that are given to us from react.

52
00:03:11,610 --> 00:03:16,820
So, for example, if you and I try to make a custom hook called something like use translate inside

53
00:03:16,820 --> 00:03:21,840
of there, we would make use of maybe use state and use effect, which are to primitive folks provided

54
00:03:21,840 --> 00:03:22,620
by react itself.

55
00:03:24,200 --> 00:03:24,470
All right.

56
00:03:24,560 --> 00:03:26,920
Now, this point, not a lot of information, but hooks.

57
00:03:27,140 --> 00:03:29,590
Chances are they still seem really confusing, ballistic.

58
00:03:29,690 --> 00:03:30,320
Paul's right here.

59
00:03:30,380 --> 00:03:34,250
The next video, we're going to start to discuss the application we're going to build to better understand

60
00:03:34,250 --> 00:03:35,870
what hooks are in how to use them.