Best Coding Practices — React Native Edition 2022
Looking into some of the standard best coding practices currently followed in the tech industry.
Ever wondered when you started coding as a beginner, and after a few months, the same piece of code you wrote becomes difficult to read or understand. This is a genuine problem for every beginner or new developer joining the team. Thus there is a need to follow coding protocols to rescue this basic problem. Following best coding practices helps us understand the code later. It becomes easy to maintain and extend our application whenever any new member joins the team as they will also be following the same set of principles maintaining uniformity across the team.
Going further, we will be looking into some of the standard best coding practices currently followed in the tech industry (probably in the React-Native world).
1. Structure the files and folder properly -
No matter what your application is all about, one basic principle popular in the react ecosystem is keeping all the code-related files and folders into the src folder (source folder) and images or any resource file into the separate assets folder. This src and assets folders are exposed in the root folder as depicted in the below layout (React-Native app)
2. Keep the component and screen clean -
The next important point to note is keeping the component clean which means for all the API fetch or DB operations we need to dispatch an action from the component and finally, the reducer should change the state.
One should also keep all the long-coded logic wrapped inside a helper function and call that function from the component.
3. Keep the app responsive and avoid Inline Styling -
Ensure your app doesn’t break when rendered on different-sized devices. Define styles at the proper breakpoint and use responsive elements such as flex and provide relative values instead of absolute ones while styling. Inline stylings should be avoided as it distracts the reader from the main code and confuses them with a lot of unnecessary lines. Keep them into a separate style.css file.
It’s good to use <SafeAreaView> when using react native to render the component. It ensures the component remains positioned correctly in all iPhone devices.
4. Utils Folder -
Ensure your utils folder contains helper, constant, and enum files only. For config files, keep them in a separate folder.
5. Ordering imports in the file -
Divide all imports into segments logically and provide one line gap between each segment as it helps during code review. Ensure you should order all the imports added in the component/screen file alphabetically and sequentially in the below order.
6. Use ES6 Concepts and get rid of legacy code
It’s always advisable to use the latest version of libraries present and use ES6 concepts if starting from scratch.
For instance: Usage of let or const instead of var.
7. Document everything neatly -
Ensure to add meaningful JSDoc comments to the function created by you. It will guide new developers on what this function is all about.
8. Remove logs from the final app build -
Remove all the console.log() statements from the final build as too many log statements may impact the performance of the app.
9. Add test cases in your app -
As we know no app is deployment ready until it’s tested thoroughly, so testing plays a vital role in app development. One can do unit testing, and snapshot testing using JEST and Enzyme to test the component being rendered as per expectation.
So these were some of the best coding practices which you can follow while building your project. It will definitely reduce the number of bugs and crashes in your application. Thanks for reading!
Further Reading
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.
Interested in scaling your software startup? Check out Circuit.
