I named it, Picasso code:
This is just a sample of the component
With a quick read of the code above, you will immediately see that:
1. The class is called
Always give meaningful names to classes, methods and variables. It will help your future self when you need to debug or extend the code, and more importantly, it will help your team understand you. If you copy & paste from StackOverflow, have the decency to adjust the code according to your project.
3. Mix of import / require
Mixing require and import is considered a bad practice, which might also cause bugs, as pointed out by @dan_abramov,
require should not be mixed.
Tip: don’t mix imports and requires. The order is not what you’d intuitively think. pic.twitter.com/phByWlwEvu— Dan Abramov (@dan_abramov) July 7, 2017
4. The component is 1600+ lines long
Way too much for what it does, the component is unreadable and untestable. All methods are coupled together. Try to keep the components short and simple. If you can, write the code using a decoupling pattern.
5. Lack of readability
I belong to the group of developers who think that comments in code are not needed. If your code is clear and organised, there is no need to explain what you’re doing. I use JSDoc comments to describe function signatures, but besides that, I don’t comment my code. I think that being able to write easy-to-understand code is a strong skill which makes a dev a good dev. If you are not sure, the code you have just written would be easy to understand later in the future, go back to it immediately and try to make it clearer. If you can’t make it clearer changing the code, use comments as a last resort.
7. No tests at all
There are no tests in place to see if the code is stable and working as expected. Having any sort of automated tests will help you building a better application and providing a better experience to the final users. Tests help you shipping better code to production.
5. The core React files has been manually changed
In order to solve an issue he had, the developer thought that it was a good idea to change one of the React core files. Avoid this at all costs, if you have any issue with a third-party tool, raise it on their GitHub repository and try to work with them. In this instance, I have noticed that a more recent version of React Native has included the change that the developer needed so it would have been enough upgrading.
6. Inconsistent use of semicolons
8. Missing PropTypes
The component uses nearly 30 props and none has been defined or validated at all. PropTypes in React helps you preventing bugs, using type-checking.
9. The component connects to Redux directly
It’s a best practice to use a Container component to connect to the Redux state, in this case, the component and the container are the same things.
10. No linting
Outsiders such as Project Managers, CEOs, Investors, often ignore this or don’t consider it an issue, but, in my opinion, it really is. Your product is not well structured or organised. It’s is messy and unstable. It will be difficult to involve experienced developers to improve it or change it without starting from scratch, which means you have wasted a lot of time and money.
- Building an accessible and re-usable React Component
- I wish I knew these before diving into React
- Bundling React 15, Bootstrap 4, Storybook 3 with Webpack 2
- The first book on Front-end Reactive Architectures