Introducing React Hooks

[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