Introduction to Refactoring a React Application to React Hooks

Kent C. Dodds: [00:00] Hi, there. My name is Kent C. Dodds. I am super excited to introduce you to my new course, all about React hooks and React suspense, two new features in React that are both going to blow your socks off and enable our function components to do way more than they were ever capable of doing before.

[00:16] In this course, we are going to take an existing application and apply these features to that application. The reason I'm doing this is because I have realized that playing around with hooks by themselves is a lot of fun, making new components, playing around in a new little app or whatever.

[00:31] But then, when we try to go and apply these new features to our existing applications, we bump into some interesting edge cases and some interesting use cases that our components were already enabled to do, but we don't really know how to do those things with hooks.

[00:50] My hope is that as you watch me bump into those little problems in the process of this course, you'll be able to internalize some of those things and apply them as you're applying these features to your applications.

[01:02] One example of this is we have a render-prop-based component. Render-prop-based components are really awesome ways of sharing code in our applications today, but hooks are a much better and more capable way of sharing logic across components.

[01:20] We refactor our query component -- is the render-prop-based component -- to a custom hook called useQuery.

[01:28] In the process of doing that, our tests are breaking. We realize that our useEffect -- which we are using to simulate the same componentDidUpdate, componentDidMount, componentWillUnmount -- it behaves slightly differently. That is going to break our tests. We'll see how we can fix that.

[01:46] We'll also see how in an application, typically, you have these reusable components. You're using them all over the codebase, and you may not be able to have time to refactor all of your codebase to use the new hook that you created.

[02:00] We'll see how we can wrap a hook in a component that exposes the same API that we had before we did the refactoring, so we can continue to use that new component just the same way we were using the old one, and then we benefit from the hook for any other parts of our codebase that can use that new custom hook.

[02:21] We also take a look at the useRef hook that's built into React, useContext, useState, useReducer, useEffect -- all these different hooks that are built into React that are really, really useful for making our function components more capable than they were before.

[02:39] Also in this course, we look at the new suspense feature in React and how we can use that to lazy load our code, to code split our code and load our components as they are needed, and so we don't ship as much to our user. I'm excited about showing you how we can accomplish that using React suspense and React.lazy.

[03:02] Anyway, I'm really excited about this course. I think you're going to love it. I think you're especially going to appreciate the practical application of this. We're going to see some edge cases and some weird situations, which you'll probably bump into as you're applying these features to your own codebase.

[03:21] Hopefully, this is helpful to you. I am pretty confident that you're going to love it and you're going to learn a lot. I hope you enjoy the course.