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

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.

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:

• Improves readability
• Reduces complexity
• Facilitates maintenance

When Should You Refactor?

Consider refactoring when you see:

• Duplicate code
• Long, complicated functions or methods
• Complex conditional logic
• Performance issues
• Difficulties with testing and debugging
• A transition to newer technologies or librarie
  

Top 5 Benefits of Refactoring Code

1. Improves Code Readability

Readable code is easier to understand and maintain. Some examples:

Before Refactoring:

Problems:

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

After Refactoring:

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 

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:

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.

Before Refactoring:

Problems:

• Your codebase might contain legacy packages/libraries.

• Conditions are wrong but never caught by anyone.

• Hard coded values due to time constraints or any other reason.

• Poorly Named Variables & Functions. Not having enough comments to understand what that means.

• Generic issue - duplicated code

• Long & Complex Functions

• 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

Example 2:

Wrong condition on array:

4. Optimizes Performance

Refactoring can streamline logic to boost performance.

Before Refactoring:

After Refactoring:

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.

Counter.js file

Counter.test.jsx

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

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). We should always avoid this and try to use less and needed packages

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.

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)

Why Code Reviews Are Important

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

Key Benefits of Code Reviews

1. Ensures Code Quality
Example: Replace hard-coded values with constants.

2. Promotes Knowledge Sharing
Example: Teach better ways to handle asynchronous operations.

3. Encourages Consistency
Example: Enforce arrow function usage.

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

Pull Request format-

Merge Requests (MRs) or Pull Requests (PRs) play a crucial role in ensuring code quality, maintainability, and team collaboration. A well-structured PR description can make the review process smoother and more efficient.

1. Jira Link: Linking a JIRA ticket helps reviewers to understand the context of PR.

2. Description:
Fix: add two different APIs for update founder flow

3. Why It Matters:
The description summarizes the changes in a single line or a few bullet points.

• It helps reviewers understand the problem being solved.
• It sets the scope of the PR.
• The use of prefixes like Fix:, Feature:, or Refactor: can indicate the type of change.

4. Change List:
15 files changed
This section gives an overview of the impact of the changes.

• If a PR affects too many files, it might indicate the need to break it down into smaller PRs.
• It helps reviewers estimate the time required for review.

5. Validation:
Manual Testing: Even with automated testing, manual validation is important for edge cases, UI checks, and confirming that the feature works as expected.

6. Browser Validation

☑️ Chrome

⬜ Firefox

⬜ Safari

⬜ IE 11

⬜ iOS

⬜ Android

1. Ensures cross-browser compatibility.
2. Prevents browser-specific bugs, improving accessibility and user experience.
3. Helps identify rendering issues in different environments.

7. Unit Testing
Unit tests validate that individual functions and components work correctly.

• Improves maintainability.
• A PR without unit tests might be flagged for missing test coverage.

8. Other Validation (If any)
Sometimes, additional validations are needed beyond browsers and unit tests.
Examples:

• API response validation
• Performance benchmarks
• Security checks etc.

9. Review Instructions

• Mention if there's a complex logic that needs careful review.
• Add any setup instructions, such as environment variables or existing flow changes.
  

10. Output:

• Screenshots, videos, or links to staging environments provide proof of implementation.
• Helps reviewers visualize changes, especially for UI updates.

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.

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?