A Frontend Engineer’s Guide to Code Refactoring and Code Reviews

1. Introduction

In software development, code refactoring and code reviews play crucial roles in maintaining a high-quality codebase. These practices ensure that code is clean, efficient, and easy to maintain over time. This blog explores the importance of code refactoring in software, with my personal experiences of how refactoring can improve code quality.

In this blog, we’ll dive into why these practices matter and how they can transform your development process. Working with different clients across various industries, I’ve seen firsthand how important refactoring code is. It’s a simple but powerful process that every developer should follow to keep their code clean, efficient, and easy to work with.

2. What is Code Refactoring?

Refactoring code is the process of improving the internal structure of the code without altering its external behavior. It’s like reorganizing a cluttered room; everything works the same but looks and functions much better.

Key Benefits of Code Refactoring:

1. Improves readability
2. Reduces complexity
3. Facilitates maintenance

3. When Should You Refactor?

1. Consider refactoring when you see:
2. Duplicate code
3. Long, complicated functions or methods
4. Complex conditional logic
5. Performance issues
6. Difficulties with testing and debugging
7. A transition to newer technologies or libraries

4. Top 5 Benefits of Refactoring Code

1. Improves Code Readability Readable code is easier to understand and maintain. Some examples:

// Before Refactoring:

const orderStatus = isPaid
  ? isShipped
    ? isDelivered
      ? "Delivered"
      : "Shipped"
    : "Paid"
  : isCancelled
  ? "Cancelled"
  : "Pending";

Problems:

1. Hard to read, understand conditions and debug.
2. Adding a new condition later makes it even worse.

// After Refactoring:

const getOrderStatus = ({isPaid, isShipped, isDelivered, isCancelled}) => { if (isCancelled) return "Cancelled"; 
if (isPaid) { 
   if (isShipped) { 
      return isDelivered ? "Delivered" : "Shipped"; 
   }
   return "Paid";
 }
 return "Pending"; 
}; 
const orderStatus = getOrderStatus(isPaid, isShipped, isDelivered, isCancelled);

Benefits:

1. The if statements clearly define conditions, making it easier to understand.
2. Debugging is now easy as compared to nested ternary operators
3. The function-based approach allows easy modifications. For example, if more statuses need to be handled, you can extend the logic without restructuring the entire expression.
4. The getOrderStatus function can be reused elsewhere in the code.

2. Enhances Maintainability
Breaking down reusable components or logic improves maintainability.

// Before Refactoring

const convertToExcelDataWithError = async function (records, errors, file) {
  const headersCheck = await parseHeaderFromFile(file.buffer, file.mimetype);

  /*there is no constant here, need to use the same string again and again in multiple files which is irrelevant. */
  const fieldMapping = {
    Category: 'Task',
    Farm: 'Farm'
  };
};

Problems:

1. Names were hardcoded across multiple files, requiring manual updates in each file if a change was needed.
2. If a string needs to be changed (e.g., "Farm address" → "Farm Address"), you must manually update it everywhere in the code.
3. If you need to support multiple languages, hardcoded strings prevent easy translation.

// After refactoring:

const convertToExcelDataWithError = async function (records, errors, file) {
  const headersCheck = await parseHeaderFromFile(file.buffer, file.mimetype);
  // use constant here
  const { TASK, FARM} = COLUMN_HEADINGS;
  const fieldMapping = {
    Category: TASK,
    Farm: FARM
  };
};

Benefits:

1. Using constants or enums makes your life easy
2. Typos or inconsistencies are minimized when using predefined constants instead of manually typing strings everywhere.
3. If a string needs to change (e.g., from "Farm address" → "Farm Address"), you only update it in one place instead of searching through the entire codebase.

3. Reduces Technical Debt
Refactoring removes inefficient or outdated code, reducing the burden of technical debt.

1. Your codebase might contain legacy packages/libraries.
2. Conditions are wrong but never caught by anyone.
3. Hard coded values due to time constraints or any other reason.
4. Poorly Named Variables & Functions. Not having enough comments to understand what that means.
5. Generic issue - duplicated code
6. Long & Complex Functions
7. Not using appropriate zIndex values (Not having this can cause multiple issues like Large z-index numbers might be ignored or cause inconsistencies across different browsers.)

Example 1
Unnecessary “&&” conditions

// Before refactoring
if (user && user.profile && user.profile.email) {
console.log(user.profile.email);
}

// After refactoring
if (user?.profile?.email) {
console.log(user.profile.email);
}

Example 2
Wrong condition on array:

// Before refactoring

const farmsData = [];
if( !!farmsData){
console.log("Farm has data");
}

// After refactoring

const farmsData = [];
if(farmsData?.length){
console.log("Farm has data");
}

4. Optimizes Performance
Refactoring can streamline logic to boost performance.

// Before refactoring

function getUniqueElements(arr) {
  let unique = [];
  for (let i = 0; i < arr.length; i++) {
    if (!unique.includes(arr[i])) {
      unique.push(arr[i]);
    }
  }
  return unique;
}

// After refactoring:

function getUniqueElements(arr) {
  return [...new Set(arr)];
}

Below is the chart showing Before Refactoring using “For loop” vs After Refactoring using Set” (Depends on number of data, currently using 1000000)

5. Simplifies Testing and Debugging

Simpler, modular code is easier to test and debug. Use techniques like:
Red-Green-Refactor Cycle: Write tests, implement just enough code to pass them, and then refactor.
Red - Write a failing test that exposes the issue or required functionality.
Ex: We’ll write a test for a Counter that doesn’t exist yet.
Error: ReferenceError: Counter is not defined

Green - Write the minimum code necessary to pass the test.
Ex: Now, implement the Counter to make the test pass.
Refactor- Improve the code while keeping the test green (i.e., without breaking the functionality).
Ex: Add prop types for better type checking.

This cycle of red-green-refactor is repeated for each new feature or bug fix, promoting a development process where the code is continuously tested and refactored, resulting in higher-quality and more reliable software.

Simplifying Methods: Break down long functions into smaller, more focused ones.

// Before refactoring

function manageFarm(farm) {
    // Feed animals
    farm.animals.forEach(animal => {
        if (animal.hungry) {
            animal.hungry = false;
        }
    });

    // Water crops
    farm.crops.forEach(crop => {
        if (!crop.watered) {
            crop.watered = true;
        }
    });

    // Harvest crops
    farm.crops.forEach(crop => {
        if (crop.readyToHarvest) {
            crop.harvested = true;
        }
    });
}

// After refactoring

function feedAnimals(animals) {
    animals.forEach(({hungry}) => {
        if (hungry) {
            console.log(`Feeding ${animal.name}...`);
            hungry = false;
        }
    });
}

function waterCrops(crops) {
    crops.forEach(({watered}) => {
        if (!watered) {
            console.log(`Watering ${crop.name}...`);
            watered = true;
        }
    });
}

function harvestCrops(crops) {
    crops
        .filter({readyToHarvest} => readyToHarvest) // Only process crops that are ready
        .forEach(({harvested}) => {
            console.log(`Harvesting ${crop.name}...`);
            harvested = true;
        });
}

function manageFarm({animals, crops}) {
    console.log("Starting farm management...");

    feedAnimals(animals);
    waterCrops(crops);
    harvestCrops(crops);

    console.log("Farm management completed.");
}

I have seen many devs install unnecessary packages (sometimes 2 or 3 different libraries for the same use cases without thinking how it will affect size of the application or affect website/app performance).

5. Disadvantages of Refactoring Code -
Although code refactoring has many positive effects, there are also certain drawbacks. In fact, significant time and resources are needed during the refactoring process, hence it may push back feature development. Without detailed planning, it can break existing features. Even some of the most advanced refactoring techniques for code are challenging to master with inexperienced developers.

Although code refactoring is an important part of software development, excessive refactoring without clear goals leads to unnecessary work. Reviewing examples of code refactoring ensures developers apply best practices effectively.

6. Key takeaways from code refactoring-

1. Avoid nested ternary operations in general. Keep the return statements clean.
2. Maintain sub-components in a main component
3. Ensure to maintain constants everywhere wherever applicable.
4. Avoid using indexes in the key field for any component.
5. Always use meaningful names with needed comments (if any)

7. Why Code Reviews Are Important

Code reviews go hand-in-hand with refactoring. They ensure quality, encourage collaboration, and promote consistency within the team.

8. Key Benefits of Code Reviews

a. Ensures Code Quality
Ex: Replace hard-coded values with constants.

b. Promotes Knowledge Sharing
Ex: Teach better ways to handle asynchronous operations.

c. Encourages Consistency
Ex: Enforce arrow function usage.

d. Facilitates Collaboration
Ex: Discuss architectural changes like adopting Redux or Context API for state management.

9. Steps for Effective Code Refactoring and Reviews

For Refactoring:

• Identify code smells.
• Plan refactoring tasks.
• Refactor incrementally.
• Test thoroughly after changes.
• Document updates.

For Reviews:

• Establish clear coding standards.
• Prepare by understanding the changes.
• Provide constructive feedback.
• Prioritize critical issues.
• Use reviews as a platform for discussion and learning.

10. Conclusion
Code refactoring and code reviews are essential practices in software development. By continually improving and reviewing code, teams can maintain a high-quality codebase that is easy to maintain, extend, and scale.

The importance of code refactoring in software development cannot be overstated—it helps prevent technical debt and ensures long-term project sustainability. Additionally, reviewing code refactoring examples can provide valuable insights into best practices.

Ultimately, this refactoring code approach fosters collaboration and results in a more efficient, scalable, and robust software system.

Have your own experiences with code refactoring or reviews? :)