Intro to React Hooks [with examples]

[00:00 - 00:28] Module 3 - Introducing React Hooks So hooks aren't the newest addition to the React library, in fact they were introduced in version 16.8 The current version at the time of writing is 16.13.1 However, they've taken a little while to be more widely adopted by the community as standard practice when developing React components. In React hooks allow developers to tap into some of the more powerful features of React such as state and the component lifecycle without having to write some of the more cumbersome syntax required in the more traditional class-based components.

[00:29 - 00:32] But why hooks? Well, hooks offer us several big advantages.

[00:33 - 00:38] Number one, they allow us to write smaller, more manageable components. They allow us to reuse stateful logic between components.

[00:39 - 00:43] We'll discuss that next. They reduce complexity of dealing with the React component lifecycle.

[00:44 - 00:53] They eliminate the difficulties that learning about and dealing with JavaScript classes can bring, especially around how this works and binding event handlers. We can cover these advantages with a couple of examples.

[00:54 - 01:04] So the first, reusing stateful logic. By stateful logic we're referring to a component state, the data stored by the component and associated logic that alter the state.

[01:05 - 01:21] Before hooks came along, state was quite rigidly bound to a particular component and common or repeated logic wasn't easily removed into a separate space to be reused across other components. Hook solves this problem by allowing you to grab this stateful logic and create your own hook to reuse wherever you wish without changing your component hierarchy.

[01:22 - 01:29] Let's look at a quick example. So, state we wanted to know the status of a user compared with the amount of authorized roles they had within a system.

[01:30 - 01:37] We could use something like this. But then, in another component, we wanted to see a list of that user's roles, perhaps for an account page.

[01:38 - 01:43] That could look like this. As you can see, we've got a lot of shared logic between the two components.

[01:44 - 01:51] We can use a custom hook to abstract this into a shared state logic that deals with the roles list. Like this.

[01:52 - 01:57] And now we have our custom hook. We can update the examples we've just seen to use it.

[01:58 - 02:10] Like this. When it comes to reducing complexity, let's take a quick look at how hooks can reduce the complexity of our components when compared to previous class base syntax you might have seen in the past.

[02:11 - 02:32] So you can see already that whilst it's not a very complex component, in terms of what it does, it's already becoming quite long and will prove more difficult to manage over time if it grows. We've got data load in happening in several places across different parts of this component's lifecycle, as well as having an extra state manager work in the constructor function, not to mention the liberal use of this in reference to state and props values.

[02:33 - 02:39] But we can refactor this to use hooks, similar to how we did in the previous module. Like this.

[02:40 - 02:49] See how much smaller and more readable we've been able to make our component? We've also reduced a lot of the complexity and overhead involved in managing several lifecycle methods.

[02:50 - 02:56] But do I have to use them? No, not if you don't want to. That's one of the beauties of hooks, they're 100% completely opt in.

[02:57 - 03:04] You can also use them alongside class based components if you wish. Indeed, you might very well encounter a mixture of class based components and hooks based ones in a real world project.

[03:05 - 03:13] This is because hooks much like React itself offers a very adoptive experience. You can use them as much or as little as you need and gradually introduce them into your projects.

[03:14 - 03:28] That said, I would recommend that you get used to using them and employ them as your exclusive tool for building out components in new projects. They're widely adopted by the React community nowadays and there are countless articles and helpful advice out there on how to build your own hooks and use hooks in general.

[03:29 - 03:42] We'll be exclusively using hooks to power our components throughout this course so you'll have plenty of experience with them as we make progress through the modules. And for further reading, hooks are amazing and can transform your React development but they do require a different shift in thinking.

[03:43 - 04:02] I'd highly recommend my fellow author Amelia Wattenberg as excellent article on thinking in hooks as it offers a unique perspective on how to approach hooks, especially if you're more familiar with React classes. >> [BLANK_AUDIO]