Refactoring and Design Patterns

Rayhan Arwindra
Nov 19, 2020 · 4 min read
Image for post
Image for post
Source: Work vector created by stories —

Refactoring is a way to improve your code without changing its external behavior. This is done to transform your code from a mess that only a compiler can read, to a beautiful script that would leave your fellow developers in awe.

One way to refactor your app is to apply design patterns, which are a proven solution to a certain issue on your code. There are many design patterns out there, and chances are the issue you are facing already has a design pattern made just to solve it.


Refactoring is a process of fixing or cleaning up the internal structure of the code without changing its external functionality. By refactoring our app, we can improve the design, structure, and implementation of our code.

You should refactor your app every time you make a change, that way your app’s quality would remain high, and you can sleep soundly at night.

Here’s a checklist of whether or not you are refactoring the right way:

  • Your code should become cleaner, and have fewer smells

It’s important to note that refactoring is meant to improve the code structurally, not functionally.

The aim of refactoring is to clean up issues that could hinder maintainability and scalability, or otherwise known as code smells. But what are code smells exactly?

Code Smells

Code smells are an indicator that there exists structural or internal issues that can be fixed during refactoring. The more code smells we have, the lower the quality of code is on our application.

Code smells come in many shapes or forms, it could be that your function or class is too big, that there exist duplicate code, or many more.

While we could detect code smells manually, there are limits to how detailed our eyesight can be. Luckily, there exist tools at our disposal to aid in finding code smells on our application.


Sonarqube is an online tool that can help scan and detect numerous problems on our project. These can be security problems, bugs, code coverage, and of course code smells among many others.

You can hook sonarqube up to your code repository, and it will start scanning your project right away (assuming the job succeeds).

Image for post
Image for post
Source: Pilar Project Sonarqube

This sonarqube scan details all the things we need to know about the quality of our code. It displays the code coverage, code smells, bugs, and code duplications.

You can then use sonarqube to locate what, why, and where the issues occur, and fix it quickly to increase your code’s quality.

Design Pattern

Design patterns are a proven solution for commonly occurring issues in software design. If you’re confused about how to make your code scalable and eliminate smells, searching for a design pattern to solve your problem is one of the best ways to improve your code.

There are three types of design patterns:

Creational Patterns

These are patterns that help you in creating objects. Applying these patterns would help you increase the flexibility of your code, especially when creating new objects for your program.

Structural Patterns

The patterns that fall into this category help in improving the structure of your project. The structure created after applying these patterns help in making your code flexible and reusable.

Behavioral Patterns

The patterns here aid in assigning behaviors and algorithms for your objects. This aids you in making your code more scalable, as each object’s behaviors become more cohesive.

Refactoring Example in React

Let’s look at some examples of refactoring in React.js.

Conditional Rendering

Let’s say we are trying to implement conditional rendering on our React component. We could do a normal if-else block like this:

However, there is a better, cleaner alternative, which is called a ternary operator. See the image below:

Just like that, we successfully refactored our code and made it much cleaner than it was before.

Props Destructuring

Let’s say we have a component with multiple props. See the image below:

This is a maintenance nightmare. Imagine if we add another prop to this component, we not only have to add the component in the argument, but also call it when rendering the component.

Now imagine if we add multiple props at the same time. We then have to type in those props one by one, and if we miss one then our component might not display the correct information.

Let’s use JavaScript’s object spread operator to fix this:

Now our code is much cleaner and maintainable. No matter how many props we add, it’s always guaranteed to be rendered by this component.


While refactoring isn’t really a necessity, it’s highly recommended that programmers refactor their app every time they implement a change.

With the existence of tools such as sonarqube to automatically scan for design issues on your project and design patterns to fix and improve your code, there really is almost no reason for developers nowadays to not refactor their app.

Pilar 2020

Tiangku tiangmu, tiangmu tiangku.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store