React is one of the best frameworks we can use for the development of the front-end size of our app. It is great at handling states, dealing with data and visualizing it, and responding to user input and actions seamlessly. This is good for the user experience, as they will interact with the app in a very efficient manner. However, there are a few very critical sectors to put into consideration when using React which will help in ensuring that we build a good, brilliantly performant app which is going to run as expected, very accurate and also very ‘well reactive’. The following are some of the practices, dos and don’ts of React which we could adopt into iBusiness.
1. WINDOWING/LIST VIRTUALIZATION
When dealing with very long lists in a React application, performance is one of the very important things to be keen on because rendering very large lists causes the app to decline in performance. Before the app is loaded, the entire list has to be loaded into DOM, causing a UI lag and hence affecting the performance of the application. To somehow reduce this effect, tools such as DevExtreme will come in handy for windowing such long lists and make it seamless, simple, and highly performant. Windowing is breaking down a list into different tabs and only render the data that is required at that moment in time.
2. ENSURING CORRECT KEY ASSIGNMENT FOR LISTS
Lists usually use keys so as to uniquely identify one item from the other. These keys are really important since we need to have an identifier for the items so as to enable us to work with one piece of data at a time when need be. The right key assignment must be done to ensure that data is correctly handled as this is very Important while dealing with tables and this will be key in the app’s performance.
3. FUNCTIONAL COMPONENTS AND COMPONENTS INTERACTIONS
Functional components are the most recommended method for building React apps. This is because it comes with some advantages such as:
- It requires less code
- Components are stateless
- Easy to test
- Much easy to understand for other engineers and by ourselves.
4. USING MORE STATELESS COMPONENTS
When we write too many stateful components, they end up getting too complex and performance is reduced drastically. Debugging, reusability and testing also becomes very difficult, especially when there’s too many states to consider.
5. MAINTAINING A CLEAR FOLDER STRUCTURE
Good folder and file structuring is highly important as it helps us as engineers to well visualize the app file locations and also make reference very easy. It will also help in imports as we’re able to import code from and to other code files instead of having a cluttered system with a bunch of files everywhere. Such practices can be done in ways such as grouping folders by features, similar files or routes. This will make maneuvering through the app easier for both us as the developers and the computer when it has to import files from one point to another.
6. MAKING USE OF NAMING CONVENTIONS
When we write code in a specific convention such as camelcase, development of the system becomes better and more efficient as we will all know what a specific name means, for instance a variable name. This is going to be helpful as code will be written in a simplified way for everyone to understand and collaboration should be as smooth as butter. This will also help majorly in debugging as we will easily understand where exactly an issue in the code is coming from.
7. DEPENDENCY OPTIMIZATION
When developing the front-end with React, we come across situations where installing a certain dependency is helpful. These dependencies contain some functionalities that we may need in order to run our app properly. However, there’s a downside when it comes to using dependencies. For instance, a dependency may contain 30 methods, and we need say for instance, 5 methods. What would happen when we install this dependency is that we end up containing a lot of unnecessary code that we may not need, ending up cluttering the app with such files. To avoid this, we may either use optimized versions of dependency packs for instance lodash-webpack-plugin instead of the whole loadsh package.
8. CHECKING FOR UNNECESSARY RERENDERS
One of the main causes of decline in performance is component re-rendering. This may happen without even the knowledge of us as the engineers and it could keep the app from running as expected. Due to this, we must perform checks using tools like React Profiler, and the useMemo hook, which will help us in detecting such behavior and dealing with it accordingly.
9. LAZY LOADING
This is a concept where we can load other segments of the app without certain components having loaded completely. This is important in performance as we can load the app while other components are still being processed to be rendered. This may apply where these components are not needed so urgently on the app. This can be good practice as users do not have to wait for important components to get rendered out. The app becomes rather performant because of this practice.
10. LIMITING COMPONENT CREATION
One of React’s best wins is the ability to reuse components across the whole application. This makes coding much easier and also, performance gets way better as there is not a lot of code for the computer to work with. Just reusable components which will definitely end up making work way easier, reduce errors by a great margin and also make the software well structured.
11. REUSABILITY
This is one very important concept that should be implemented correctly to make things easier for us as the engineers, and also for React itself to run with the optimum performance needed. Reusability is going to help the whole development process in ways such as error catching. When one piece of code is carefully examined by us as a team and we have ensured it is at its level best architecture, then we can use that piece of code to perform different tasks that the system will have to perform. This will help in a huge way, since the code is not individually reviewed, it is very less likely to produce an error or cause performance issues in the final product.
DOS AND DON’TS THAT WE MAY INCORPORATE FROM THE REMARKS ABOVE IN SUMMARY
DOS
Windowing of very large lists.
Dependency Optimization
Avoiding unnecessary component rerenders.
Implementing reusability of components.
Having a proper file structure, and using a specific convention for naming different things while writing the code.
Lazy loading
DON’TS
Writing unnecessarily complicated code.
Repeating oneself.
Storing components and any other code file in a messy structure.
Excessive use of plugins and dependencies.
NB: Always be careful while using Redux in development as when not used correctly, the performance of the app is drastically affected.
Top comments (0)