Writing Clean Code With React
Tips and Conventions to Write Cleaner Code
Effectiveness, Efficiency and Simplicity
Whenever I need to think about how to implement a new feature into an already existing codebase, or how to tackle the solution of a specific problem, I always prioritize this three simple things.
Effectiveness
First, our code should be effective, meaning it should solve the problem it's supposed to solve. Of course this is the most basic expectation we could have for our code, but if our implementation doesn't actually work, it's worthless to think about any other thing.
Efficiency
Second, once we know our code solves the problem, we should check if it does so efficiently. Does the program run using a reasonable amount of resources in terms of time and space? Can it run faster and with less space?
To expand upon efficiency, here are two examples of a function that calculates the sum of all numbers in an array.
This implementation of the sumArrayInefficient function iterates over the array using a for loop and adds each element to the sum variable. This is a valid solution, but it is not very efficient because it requires iterating over the entire array, regardless of its length.
Simplicity
And last comes simplicity. This is the toughest one to evaluate because its subjective, it depends on the person who reads the code. But some guidelines we can follow are:
- Can you easily understand what the program does at each line?
- Do functions and variables have names that clearly represent their responsibilities?
- Is the code indented correctly and spaced with the same format all along the codebase?
- Is there any documentation available for the code? Are comments used to explain complex parts of the program?
- How quick can you identify in which part of the codebase are certain features of the program?
- Can you delete/add new features without the need of modifying many other parts of the code?
- Does the code follow a modular approach, with different features separated in components?
- Is code reused when possible?
- Are the same architecture, design, and implementation decisions followed equally all along the codebase?
By following and prioritizing these three concepts of effectiveness, efficiency, and simplicity, we can always have a guideline to follow when thinking about how to implement a solution. Now let's expand upon some of the guidelines that can help us simplify our code.
Format and Syntax
Using consistent formatting and syntax throughout a codebase is an important aspect of writing clean code. This is because consistent formatting and syntax make the code more readable and easier to understand.
When code is consistent, developers can easily identify patterns and understand how the code works, which makes it easier to debug, maintain, and update the codebase over time. Consistency also helps to reduce errors, as it ensures that all developers are following the same standards and conventions.