Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing React Hooks

2:46 with Guil Hernandez and Reggie Williams

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!

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

[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

You need to sign up for Treehouse in order to set up Workspace

Sign up