Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,573 --> 00:00:04,960
So what are "React Hooks"?
2
00:00:04,960 --> 00:00:07,400
If you come completed this course
3
00:00:07,400 --> 00:00:11,510
before I updated it entirely in 2021
4
00:00:11,510 --> 00:00:15,490
or if you finished some upper React resource,
5
00:00:15,490 --> 00:00:17,070
which did not focus
6
00:00:17,070 --> 00:00:19,900
on "React Hooks" and Functional Components,
7
00:00:19,900 --> 00:00:23,470
then you don't know about React Hooks, but you do know
8
00:00:23,470 --> 00:00:27,810
that there are two main ways of building React Components.
9
00:00:27,810 --> 00:00:30,240
You can build Functional Components
10
00:00:30,240 --> 00:00:32,973
and you can build Class-based Components.
11
00:00:33,830 --> 00:00:37,080
Now, Functional Components, historically
12
00:00:37,080 --> 00:00:42,080
without React Hooks were limited to outputting content.
13
00:00:42,290 --> 00:00:44,930
You could only use Functional Components
14
00:00:44,930 --> 00:00:47,260
for outputting something.
15
00:00:47,260 --> 00:00:51,480
They received props and returned JSX.
16
00:00:51,480 --> 00:00:55,920
You were not able to change some internal state
17
00:00:55,920 --> 00:00:58,510
in those components in the past.
18
00:00:58,510 --> 00:01:02,033
Nowadays you are, but in the past, this was not possible.
19
00:01:02,900 --> 00:01:06,760
That's why we had two different ways of building Components.
20
00:01:06,760 --> 00:01:10,040
That's why we had Class-based Components
21
00:01:10,040 --> 00:01:12,110
and we still have those by the way.
22
00:01:12,110 --> 00:01:15,180
You can still write Class-based Components
23
00:01:15,180 --> 00:01:17,030
and there is nothing wrong with that.
24
00:01:17,030 --> 00:01:20,240
But with the React Hooks, you actually don't need to
25
00:01:20,240 --> 00:01:22,970
create Class-based Components anymore.
26
00:01:22,970 --> 00:01:25,720
But in the past, we had to do that because
27
00:01:25,720 --> 00:01:29,790
in the past only Class-based Components could contain
28
00:01:29,790 --> 00:01:33,440
and manage "state," which of course is important
29
00:01:33,440 --> 00:01:36,803
to change what your application shows on the screen.
30
00:01:37,650 --> 00:01:41,440
But the downside with Class-based Components was
31
00:01:41,440 --> 00:01:44,940
and is that they have more overhead,
32
00:01:44,940 --> 00:01:48,860
more extra code than Functional Components.
33
00:01:48,860 --> 00:01:51,210
Functional Components are very lean.
34
00:01:51,210 --> 00:01:53,922
It's just a function that returns JSX,
35
00:01:53,922 --> 00:01:57,230
Class-based Components need a constructor
36
00:01:57,230 --> 00:02:00,120
maybe to initialize a state.
37
00:02:00,120 --> 00:02:03,700
You might add extra life cycle methods and therefore
38
00:02:03,700 --> 00:02:07,840
Class-based Components can quickly grow in size.
39
00:02:07,840 --> 00:02:10,960
They also suffer from other potential problems,
40
00:02:10,960 --> 00:02:13,980
but they definitely are more code to write
41
00:02:13,980 --> 00:02:16,380
than Functional Components.
42
00:02:16,380 --> 00:02:19,990
But because Class-based Components were the only kind
43
00:02:19,990 --> 00:02:22,620
of Components that could manage "state,"
44
00:02:22,620 --> 00:02:25,540
you had to convert Functional Components
45
00:02:25,540 --> 00:02:27,330
to Class-based Components
46
00:02:27,330 --> 00:02:31,330
if you wanted to manage "state," or if you wanted to
47
00:02:31,330 --> 00:02:36,330
add lifecycle methods prior to React 16.8,
48
00:02:36,650 --> 00:02:41,650
but with the release of React version 16.8 in 2018,
49
00:02:42,850 --> 00:02:45,240
React Hooks were introduced
50
00:02:45,240 --> 00:02:48,270
and React Hooks is a feature
51
00:02:48,270 --> 00:02:51,050
that now allows you to manage "state"
52
00:02:51,050 --> 00:02:54,430
in Functional Components and to kind of
53
00:02:54,430 --> 00:02:57,520
add life cycle methods stair as well.
54
00:02:57,520 --> 00:03:00,800
And I'm going to teach you all about React Hooks
55
00:03:00,800 --> 00:03:02,670
throughout this module.
56
00:03:02,670 --> 00:03:05,100
But as mentioned of course, if you already know
57
00:03:05,100 --> 00:03:07,850
what React Hooks are because you completed
58
00:03:07,850 --> 00:03:10,070
the most recent version of this course
59
00:03:10,070 --> 00:03:14,110
up to this point, then you don't need this module.
60
00:03:14,110 --> 00:03:19,070
Now React Hooks are just special JavaScript functions
61
00:03:19,070 --> 00:03:21,160
provided by React.JS
62
00:03:21,160 --> 00:03:23,570
though you can also write your own hooks
63
00:03:23,570 --> 00:03:24,750
and you will see this as
64
00:03:24,750 --> 00:03:26,470
well in this course section.
65
00:03:26,470 --> 00:03:30,650
And these special functions can only be called
66
00:03:30,650 --> 00:03:34,540
and used therefore in Functional Components.
67
00:03:34,540 --> 00:03:38,943
You can't use React Hooks in Class-based Components.
68
00:03:40,020 --> 00:03:43,120
Now, to mark those special functions so
69
00:03:43,120 --> 00:03:46,240
that you don't accidentally use them in the wrong place,
70
00:03:46,240 --> 00:03:49,500
they all start with the "use" word.
71
00:03:49,500 --> 00:03:53,728
The built in React Hooks are all called useState,
72
00:03:53,728 --> 00:03:57,170
useEffect, useRef, and so on.
73
00:03:57,170 --> 00:03:59,340
And if you build your own custom hooks,
74
00:03:59,340 --> 00:04:01,730
they also have to be named like this
75
00:04:01,730 --> 00:04:04,083
as you will see later in this module.
76
00:04:05,070 --> 00:04:08,540
Now these extra functions when called
77
00:04:08,540 --> 00:04:13,440
in your Functional Components, then add extra functionality,
78
00:04:13,440 --> 00:04:18,170
extra capabilities to your Functional Components.
79
00:04:18,170 --> 00:04:20,670
For example, with the useState hook,
80
00:04:20,670 --> 00:04:23,550
you can add the functionality to manage
81
00:04:23,550 --> 00:04:27,950
and change state in a Functional Component.
82
00:04:27,950 --> 00:04:31,830
And that's why React Hooks are amazing because with them,
83
00:04:31,830 --> 00:04:33,800
you don't need to switch
84
00:04:33,800 --> 00:04:36,860
between Functional and Class-based Components.
85
00:04:36,860 --> 00:04:40,430
Instead, you can build your entire React application
86
00:04:40,430 --> 00:04:43,450
with Functional Components only.
87
00:04:43,450 --> 00:04:45,100
And in this course section,
88
00:04:45,100 --> 00:04:48,330
we're now going to dive into all those built in hooks,
89
00:04:48,330 --> 00:04:50,260
how to use them and how they work.
90
00:04:50,260 --> 00:04:51,930
And we're also going to learn
91
00:04:51,930 --> 00:04:54,313
how to write our own custom hooks.
7247
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.