Refactoring the Pro MERN App
By: Bertill Browne
Tags: Refactoring, React, Mern, React Hook, Functional Component

Photo by Caspar Camille Rubin on Unsplash

Introduction

I started learning the MERN stack by following the instruction in the book Pro MERN Stack by Vasan Subramanian. MERN is a full-stack technology that uses MongoDB for its database, Express.js as its web application framework, React for its frontend, and Node.js as its runtime engine on the server. All these technologies are JavaScript-based.

The Application

The book gives step by step instructions on building a CRUD-based Issue Tracker application. An issue is represented by the title, owner, status, creation date, effort and estimated completion time attributes in the database. The application allows the user to view the list of Issues, filter the issues by some of the attributes, and to add, update, and delete issues.

Motivation

The problem is that the book was published in 2017, before React added Hooks in version 16.8.0, in February 2019. Hooks allow the use of state and several other React features in functional components. Before Hooks, these features were only available in React’s class components. As a result, the React code in the book is written using React’s class components.

The benefits of using functional components are that they use less code than class components. The code is also much clearer, making it easier to read, understand, and test.

The Solution

I decided to refactor the code, using functional components and Hooks. The following is what I did, starting with Chapter 3 — React Components. This chapter introduces five class components: IssueFilter, IssueTable, IssueAdd, IssueRow, and IssueList. Outlines of these class components, before refactoring are shown below.

Outline of React Components Before Refactoring

Functional Components

First, I replaced the class declaration syntax of each of these components with the ES6 arrow function declaration, with “props” as an argument and “const” in front. The outlines of the refactored components with a functional declaration are shown in the code below.

Components with the class declaration syntax replaced with the ES6 arrow function declaration, props as a variable, and “const” in front.

The “render()” Function

The “render()” method is not required in functional components. So, I removed the “render()” function. The outlines of the refactored components with the “render()” method removed is shown below.

Components with the “Render()” function removed

The “this” Keyword

Finally, I removed the “this” keyword from in front of the “props” in the child components. The original and refactored code for a snippet of IssueRow is shown below.

The “this” keyword removed in the IssueRow component

The codes for IssueFilter, IssueAdd, and IssueList are refactored from Listing 3–2. Those for IssueTable and IssueRow are from Listing 3–7.

Summary

I have explained the first steps that I took to refactor the code in the third chapter of the book Pro MERN to allow for the use of Hooks. First, I replaced the class declaration syntax of each component with the ES6 arrow function declaration, with “props” as an argument and “const” in front. Then I removed the “render()” method. Finally, I removed the “this” keyword from in front of the “props” in the child components. In a future article, I will explain what I did for the fourth chapter — React State.

I hope that this article is of value to you. Thank you for reading.