TL;DR
When I started my job at my organization, I thought I knew quite well, but there are some practices that I only knew but didn’t implement. It was not that complex with my project, as it was not complex enough. As the application grows, adhering to best practices becomes crucial to maintain a clean, scalable, and performing code.
Today, I am going to list down some of the React Essential Practices that I learned at my job. So, let’s get started.
Maintaining a Scalable Code Structure
A well-organized project structure is necessary to maintain a complex application that is going to grow bigger every day. In my organization, we divide Features into a separate folder with all the components that are specific to that feature in that folder only. This is a feature-based or module-based structure. Only components used throughout the entire application are created separately in the root folder.
React structure is sorted with starting with imports and ending with return, but what’s between them defines the code structure. Before starting the job, I didn’t have a proper code structure. In my organization, they use this code structure in order.
- Imports: All the necessary modules should be imported at the top. If it gets bigger, then divide with a line break to differentiate between UI components import and other.
- Constants: After import, rather than defining a React function, we define any constants such as dropdown options, initial value, etc.
- React Function: Now we define our React functions here.
- Variable Definition: Defining variables with the useState hook.
- Function: After the variable definition, we start by defining any functions that are required, such as JS functions, API call functions, etc.
- useEffect Calls: This was always after the function to make sure the useEffect can be called. I made a mistake by defining a function, then useEffect, then a function, and then useEffect.
- Return: Now return your React function.
Recommended Tools:
- ESLint: A linter that statically analyzes your code to quickly find problems and enforce coding standards. We used this at my organization for better code structure and standards.
- Prettier: An opinionated code formatter that ensures a consistent style across your entire codebase, eliminating debates over formatting.
Restrict Unnecessary API Calls
With a smaller application, you are going to make very few API calls, max 2 per file. But with a complex application, you might need to trigger the API fetch with new query params. One such situation, where we have a table to display information, and now we are working on the to add Filters. There were quite a lot of Filters, like almost 10 filters with different scenarios. So we made mistakes like calling unnecessary API calls due to some other scenario with is not required or making twice the initial call because in useEffect from the previous code was changing.
So, what I learn like making the Application make only necessary calls. This can be done using a few useEffect so that you don’t need to maintain a lot of useEffect that can make an API call as a side effect of that. By restricting calls, you will reduce the server load, lower data transfer costs, and have a much smoother application.
Recommended Tools:
- Lodash: A utility library that offers easy-to-use
debounceandthrottlefunctions.
Use State Management over Prop Drilling
Prop drilling is the process of passing state through multiple layers of nested components, even if the intermediate layer is not required. I did for a feature and was corrected by colleagues regarding that, using a Management state rather than props drilling. It can be helpful in case of when passing a state through React navigation.
Using a statement management solution makes the components simpler, simplifies state logic, and makes the application's data flow predictable and easier to debug.
Recommended Tools:
- Redux: At my organization, we use Redux for state management and sometimes to trigger the API calls too.
- Zustand: It is a very light-weight and modern alternative to Redux for simpler API calls and global state management capabilities.
Pagination for Web, Infinite Scroll for Mobile
This is not a code practice but a product design choice to make the application more responsive and useful. This can be helpful when there is large data that you might need to display. At my organization, we use React for web and mobile. For mobile, it is embedded in a mobile application. Here is the choice with an explanation.
- Pagination: Breaking data into discrete pages is generally better for web applications. It gives users a clear sense of scope, is better for SEO, and makes it easy to bookmark or return to a specific page.
- Infinite Scroll: Continuously loading content as the user scrolls is ideal for mobile applications and content feeds (like social media). It creates a seamless, engaging experience that encourages discovery.
Recommended Tools:
- react-infinite-scroll-component: We use this simple, light-weight library to enable infinite scroll in mobile components.
- Components Library’s Pagination: Most of the component libraries like MUI, ShadCN, etc., offer pagination that you can use.
Do a Unit Test Before Handing Off to QA
.webp)
Note: The Above image is from headspin.
It is not just React, but whenever you write a piece of code, testing has to be done. Even if there is a QA team, you first need to test the feature by yourself to make sure you give a more stable product to QA for testing. Initially, when I started, I used to just design and then integrate the application, and move the feature to QA, which resulted in quite a lot of bugs. So my colleagues advised me to do proper unit testing at my end before handing it to the QA team.
Doing unit testing will definitely increase the development time, but will make the feature go live sooner, and you will be dealing with fewer bugs in the future.
Recommended Tools:
- Jest: A popular JavaScript testing framework that provides a test runner, assertion library, and mocking capabilities all in one package.
Connect with Me🚀
Let's connect and stay informed on all things tech, innovation, and beyond!
Also, I am open to writing freelance articles if you are interested; then contact me via email or social media.
Conclusion
Mastering these practices for code structure, state management, data fetching, and testing is the key to engineering professional React applications. This foundation allows you to build products that are not only scalable and performant but also a pleasure for your team to maintain.
I hope you like the article. Thanks for reading the article.