Introduction to Refactoring a React Application to React Hooks

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

Let's get a quick overview of what this course is all about and how it's been structured to make sure you're as productive as possible with these new features.

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.

Anthony
Anthony
~ 3 years ago

Hi Kent, I get that hooks is a cool new feature but what’s the selling point? I was hoping to be sold on this upfront but I watched your intro and the second refactor video but couldn’t find a clear answer to “why” I should refactor to hooks.

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

This course is not intended to sell you on the "why" behind hooks, but the "how." If you're looking for the why, then you should start here: https://reactjs.org/hooks

Specifically watch this: https://www.youtube.com/watch?v=dpw9EHDh2bM

Also, I gave a talk about my take as well: https://www.youtube.com/watch?v=zWsZcBiwgVE&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf

I hope that helps.

Anthony
Anthony
~ 3 years ago

Thanks Ken, I’ve already reviewed those links and I get the “why”. I just think that any talk of refactoring should be accompanied with some selling on “why”. Looking forward to digging into the rest of the course!

Anthony
Anthony
~ 3 years ago

Sorry, Kent. I keep forgetting the "t", I've worked with too many "Kens".

kushal
kushal
~ 3 years ago

I think the format on egghead explains is like that. Maybe they can take a deeper approach towards understanding of concepts. Since you call it a course, so maybe concepts first and then overwhelming stuff later. Even for this I was aware of hooks and already coded a todo in that last week. I found just a shallow thing on first two instances I tried two times :D Doing things in advance is something not course oriented but demo oriented.

kushal
kushal
~ 3 years ago

Oh! Can I edit my comment? Lot many grammatical and typos. Sorry!

Shripada Hebbar
Shripada Hebbar
~ 2 years ago

Kent, would be helpful, if you point the source code before and after using hooks. Where can I get that?

Riccardo
Riccardo
~ 2 years ago

how could I acces to the existing project?

Joel Hooks
Joel Hooks
~ 2 years ago

The source code is linked in the next lesson!