1
00:00:00,000 --> 00:00:09,435
[MUSIC]

2
00:00:09,435 --> 00:00:13,388
The React library has traditionally
allowed developers to create and

3
00:00:13,388 --> 00:00:18,520
manage state, as well as run certain code
based on the lifecycle of a component.

4
00:00:18,520 --> 00:00:22,120
Class components provide one way to
declare and manage state, and call

5
00:00:22,120 --> 00:00:26,270
lifecycle methods like componentDidMount
and componentWillUnmount.

6
00:00:26,270 --> 00:00:29,150
Class components come with some
drawbacks though, especially for

7
00:00:29,150 --> 00:00:31,090
folks who are new to React.

8
00:00:31,090 --> 00:00:34,720
For example, class components can be
a little more challenging to learn and

9
00:00:34,720 --> 00:00:38,740
require additional syntax,
making code organization more difficult,

10
00:00:38,740 --> 00:00:41,740
compared to functions which
are more common in JavaScript.

11
00:00:41,740 --> 00:00:45,039
Optimizing classes can be a slower
process for machines, and

12
00:00:45,039 --> 00:00:47,334
make it more challenging to minify files.

13
00:00:47,334 --> 00:00:51,495
In some cases, class components can also
interfere with React tools and features,

14
00:00:51,495 --> 00:00:53,310
like hot reloading.

15
00:00:53,310 --> 00:00:57,170
Until recently, developers referred
to function components which

16
00:00:57,170 --> 00:01:00,670
are regular JavaScript functions,
as stateless components,

17
00:01:00,670 --> 00:01:04,570
because you weren't able to access
features like state and lifecycle methods.

18
00:01:04,570 --> 00:01:06,550
Well, that's where React hooks come in.

19
00:01:06,550 --> 00:01:10,000
I'm Guil, a developer and
instructor here at Treehouse.

20
00:01:10,000 --> 00:01:13,770
In this workshop, I'll teach you how
to use state lifecycle methods and

21
00:01:13,770 --> 00:01:18,250
other React features,
inside function components with hooks.

22
00:01:18,250 --> 00:01:23,180
React hooks are special built-in functions
that allow you to hook into the power

23
00:01:23,180 --> 00:01:26,890
of class components, with a cleaner and
more straightforward syntax.

24
00:01:28,425 --> 00:01:31,460
Hooks solve common tasks
like handling state, and

25
00:01:31,460 --> 00:01:33,350
rendering UI when state changes.

26
00:01:34,350 --> 00:01:38,130
They provide easier access to
your React app's context, and

27
00:01:38,130 --> 00:01:42,350
keep your components up-to-date with
an alternative to lifecycle methods.

28
00:01:42,350 --> 00:01:46,650
You'll learn how to use three of
React's standard built-in hooks.

29
00:01:46,650 --> 00:01:51,790
useState, useEffect and useContext.

30
00:01:51,790 --> 00:01:53,820
Now that you know
a little bit about hooks,

31
00:01:53,820 --> 00:01:57,020
let's take a quick look at how much
cleaner they can make your code.

32
00:01:57,020 --> 00:02:01,170
Here in the React Docs, is a stateful
component written as a class.

33
00:02:01,170 --> 00:02:04,251
If you've used classes in React,
this code might look familiar.

34
00:02:04,251 --> 00:02:08,980
Notice the constructor function and
the this.state object.

35
00:02:08,980 --> 00:02:12,260
This example component also
has two lifecycle methods.

36
00:02:12,260 --> 00:02:15,730
Now, here's how you'd simplify
this example component, and

37
00:02:15,730 --> 00:02:19,760
achieve the same results using
a function component with hooks.

38
00:02:19,760 --> 00:02:23,340
Don't worry about what any of
this new code means just yet.

39
00:02:23,340 --> 00:02:25,260
Notice how it compared to the class.

40
00:02:25,260 --> 00:02:29,200
You don't have to set a state object and
define the lifecycle methods, but

41
00:02:29,200 --> 00:02:31,800
it all works in the same way as before.

42
00:02:31,800 --> 00:02:36,010
At a glance, you can see how using hooks
saves you from having to write more code

43
00:02:36,010 --> 00:02:39,850
than necessary, which helps make your
code less susceptible to errors.

44
00:02:39,850 --> 00:02:44,040
Next, you'll start by learning how to
add React state to function components

45
00:02:44,040 --> 00:02:45,547
using the useState hook.