Migrating from React Class Components

In the previous chapter we learned how to build our own Hooks by extracting custom Hooks from existing code. Then, we used our own Hooks in the blog app and learned about local Hooks and the interactions between Hooks. Finally, we learned how to write tests for Hooks using the React Hooks Testing Library, and implemented tests for our custom Hooks.

In this chapter, we are going to start by implementing a ToDo app using React class components. In the next step, we are going to learn how to migrate an existing React class component application to Hooks. Seeing the differences between function components using Hooks and class components in practice will deepen our understanding about the trade-offs of using either solution. Furthermore, by the end of this chapter we will be able to migrate existing React applications to Hooks.

The following topics...

Technical requirements

A fairly recent version of Node.js should already be installed (v11.12.0 or higher). The npm package manager for Node.js also needs to be installed.

The code for this chapter can be found on the GitHub repository: https://github.com/PacktPublishing/Learn-React-Hooks/tree/master/Chapter11.

Check out the following video to see the code in action:

http://bit.ly/2Mm9yoC

Please note that it is highly recommended that you write the code on your own. Do not simply run the code examples that have been provided. It is important that you write the code yourself in order to be able to learn and understand properly. However, if you run into any issues, you can always refer to the code example.

Now, let's get started with the chapter.

Handling state with class components

Before we start migrating from class components to Hooks, we are going to create a small ToDo list app using React class components. In the next section, we are going to turn these class components into function components using Hooks. Finally, we are going to compare the two solutions.

Designing the app structure

As we did before with the blog app, we are going to start by thinking about the basic structure of our app. For this app, we are going to need the following features:

• A header
• A way to add new todo items
• A way to show all todo items in a list
• A filter for the todo items

It is always a good idea to start with a mock-up. So, let's begin:

1. We start by drawing a mock-up of...

Migrating from React class components

After setting up our example project with React class components, we are now going to migrate this project to React Hooks. We are going to show how to migrate side effects, such as fetching todos when the component mounts, as well as state management, which we used for the inputs.

In this section, we are going to migrate the following components:

• TodoItem
• TodoList
• TodoFilterItem
• TodoFilter
• AddTodo
• App

Migrating the TodoItem component

One of the simplest components to migrate is the TodoItem component. It does not use any state or side effects so we can simply convert it to a function component.

Let's start migrating the TodoItem component:

1. Edit src/TodoItem.js and remove the class...

Trade-offs of class components

Now that we have finished our migration from class components to Hooks, let's revise and sum up what we have learned.

Counting the lines of code, we can see that with 392 total lines of JavaScript code, function components with Hooks are more concise than class components, which required 430 total lines of JavaScript code. Additionally, the function components with Hooks are easier to understand and test since they simply use JavaScript functions instead of complex React constructs. Furthermore, we were able to refactor all of the state-changing logic into a separate reducers.js file, thus decoupling it from the App component and making it easier to refactor and test. This reduced the file size of App.js from 109 lines to 64 lines, with an additional 50 lines in the reducers.js file.

We can see the reduced lines of code in the following table...

Summary

In this chapter, we first built a ToDo app using React class components. We started by designing the app structure, then implemented static components, and finally, we made them dynamic. In the next section, we learned how to migrate an existing project using class components, to function components using Hooks. Finally, we learned about the trade-offs of class components, when class components or Hooks should be used, and how one should go about migrating an existing project to Hooks.

We have now seen in practice how React class components differ to function components with Hooks. Hooks make our code much more concise and easier to read and maintain. We have also learned that we should gradually migrate our components from class components to function components with Hooks—there is no need to immediately migrate the whole application.

In the next chapter, we are...

Questions

In order to recap what we have learned in this chapter, try to answer the following questions:

1. How are React class components defined?
2. What do we need to call when using a constructor with class components? Why?
3. How do we set the initial state with class components?
4. How do we change the state with class components?
5. Why do we need to re-bind the this context with class component methods?
6. How can we re-bind the this context?
7. How can we use React context with class components?
8. What can we replace state management with when migrating to Hooks?
9. What are the trade-offs of using Hooks versus class components?
10. When and how should an existing project be migrated to Hooks?

Further reading

If you are interested in more information about the concepts that we have learned in this chapter, take a look at the following reading material:

• ES6 classes: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes
• React class components: https://www.robinwieruch.de/react-component-types/#react-class-components