Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
React Hooks are special built-in functions that allow you to "hook into" the power of class components with a cleaner and more straightforward syntax. Learn how to use state, lifecycle features, context, and more inside function components with Hooks!
Resources
[MUSIC]
0:00
The React library has traditionally
allowed developers to create and
0:09
manage state, as well as run certain code
based on the lifecycle of a component.
0:13
Class components provide one way to
declare and manage state, and call
0:18
lifecycle methods like componentDidMount
and componentWillUnmount.
0:22
Class components come with some
drawbacks though, especially for
0:26
folks who are new to React.
0:29
For example, class components can be
a little more challenging to learn and
0:31
require additional syntax,
making code organization more difficult,
0:34
compared to functions which
are more common in JavaScript.
0:38
Optimizing classes can be a slower
process for machines, and
0:41
make it more challenging to minify files.
0:45
In some cases, class components can also
interfere with React tools and features,
0:47
like hot reloading.
0:51
Until recently, developers referred
to function components which
0:53
are regular JavaScript functions,
as stateless components,
0:57
because you weren't able to access
features like state and lifecycle methods.
1:00
Well, that's where React hooks come in.
1:04
I'm Guil, a developer and
instructor here at Treehouse.
1:06
In this workshop, I'll teach you how
to use state lifecycle methods and
1:10
other React features,
inside function components with hooks.
1:13
React hooks are special built-in functions
that allow you to hook into the power
1:18
of class components, with a cleaner and
more straightforward syntax.
1:23
Hooks solve common tasks
like handling state, and
1:28
rendering UI when state changes.
1:31
They provide easier access to
your React app's context, and
1:34
keep your components up-to-date with
an alternative to lifecycle methods.
1:38
You'll learn how to use three of
React's standard built-in hooks.
1:42
useState, useEffect and useContext.
1:46
Now that you know
a little bit about hooks,
1:51
let's take a quick look at how much
cleaner they can make your code.
1:53
Here in the React Docs, is a stateful
component written as a class.
1:57
If you've used classes in React,
this code might look familiar.
2:01
Notice the constructor function and
the this.state object.
2:04
This example component also
has two lifecycle methods.
2:08
Now, here's how you'd simplify
this example component, and
2:12
achieve the same results using
a function component with hooks.
2:15
Don't worry about what any of
this new code means just yet.
2:19
Notice how it compared to the class.
2:23
You don't have to set a state object and
define the lifecycle methods, but
2:25
it all works in the same way as before.
2:29
At a glance, you can see how using hooks
saves you from having to write more code
2:31
than necessary, which helps make your
code less susceptible to errors.
2:36
Next, you'll start by learning how to
add React state to function components
2:39
using the useState hook.
2:44
You need to sign up for Treehouse in order to download course files.
Sign up