Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Hooks

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!

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