Written by Alex
Hello in the world of coding! The popularity of mobile applications is growing steadily. It has become much more convenient for users to receive information on a smartphone, make purchases, study and follow the news. The demand for development and requirements for it are growing and, therefore, the cost of services too. Cross-platform mobile app development is an opportunity to cut costs. This is a great solution for companies and online stores that want to expand their market influence and get even more customers.
Today, I want to share the most critical and painful mistakes that are made more often than others. With this information, you can be aware of these mistakes and avoid them when developing React Native apps.
The React Native framework has radically changed the mobile app development process, especially after creating hybrid mobile apps like Phone-gap, Ionichas, etc.
It is convenient and simple to use; most programmers with basic skills will cope with the tasks. It doesn’t take much time to implement any project, especially since the community is quite developed, and if you can’t solve the problem, other specialists will help you with pleasure.
With the help of modern technologies, we try to resolve issues raised by the community. However, we will most likely prioritize the issues that people also face inside Facebook. Perhaps, we think this is the main reason the community can rely on React.
Intensive internal use and the fact that React Native is a child of Facebook gives us confidence that React won’t disappear tomorrow. React was created by Facebook to solve their own problems. It brings the business value to the company and is used in many of its products. Using your product at home allows the vision of the project to remain clear and focused on moving forward.
However, a set of React Native components will not be enough for you if your goal is to develop a scalable and maintainable complicated application. In this case, you will face the need to create a project with various widely used npm packages developed by the cool free software community, and thereby speed up the application development process.
So, here we go the list of mistakes to avoid when developing a React Native app.
1. Using stateful components (classes) instead of hooks
Perhaps, it’s worth starting with the most sensational feature of React, which appeared in version 16.8+. Contrary to some beliefs, this feature has suffered through the mistakes of previous generations of developers and solves many problems. If you are still using class components instead of hooks in 2020, then you are making a big mistake and just have not yet figured out what their advantage is. I will not explain this in detail in this article, look better at the wonderful video on YouTube by Den Abramov.
2. Using anonymous functions as props
If the first mistake can still be perceived as a tribute to fashion and following certain trends, then I assure you, that the knowledge of this, will save you from sleepless nights and headaches. After all, it is the one that makes the application work so inadequately that its users can be disappointed in React Native forever. To avoid this error, you can use a very simple rule – never, NEVER pass an anonymous function as a prop to a component.
Another problem is that often, such a mistake does nothing wrong. The code just works for itself – that’s all. And nothing noticeably bad happens. Exactly until the moment when you once again cram there an anonymous call to receive data from the server – then you will understand the seriousness of the problem. The accumulation of such anonymous props will eventually slow your application down to the level of the 1995 experience when we had to ask the neighbours to free the phone line to load the page.
3. Multiple React Instances in the Application
This error, rather, refers to the architecture of the entire application in general, and not just React Native in particular. But this practical problem confronts developers very often and too often costs them sleepless nights.
Please do not try to cram more than one React application instance onto one page. In fact, in the React documentation, there is no prohibition on this approach, I even met recommendations to do just that in some articles, but optimizing this approach and harmonizing all parts of the application, in this case, begins to take up more than half of all working time. This can be easily avoided: for example, if you need to react to some events in legacy code in your new React application, you can use the event model.
4. Writing your own libraries instead of existing open-source
This problem is not about React Native at all, but about development in general. Of course, while you are just learning, writing a lot of your own libraries will allow you to grow faster and get better at it, but if you want to be on the cutting edge of programming development, you just have to at least try every open-source library that solves your problems. Just ask the search robots if there are any libraries that solve your problem – they are great at answering such questions.
I will not give an example of libraries that I use myself, because I know that half of them will become old-fashioned in a couple of months and others will take their place. And, it would seem, this is in conflict with the original statement. Indeed, why use libraries that will be out-of-date in a couple of months? The answer is very simple – you will be able to see a solution to those problems that you have not yet encountered. You will be able to improve existing developments or understand how to solve a problem much better by the example of problems in existing libraries. This can only be done by interacting with the developing world through the use of open-source libraries.
5. Fear of using someone else’s code
Like the previous error, this one is not unique to React Native applications, but it occurs quite often in them. How often do I see the magnificent developer boldly rushing into battle and rewriting parts of the code that work great and which have no problems, just because they read about one of the previous 4 errors. I was like that myself. I will not bend my soul, I often waste my time even now, simply because sometimes I can’t think adequately.
But I also learned to understand other developers, their thoughts and the problems they faced. I learned to see the amount of time and effort that was spent on solving problems. In 3 cases out of 5, when I take the responsibility to “improve” someone else’s code, the result is almost the same as it was. Simply because at the start of the task, you usually do not see all the problems that wait for you in the future. So, now I respect someone else’s code, no matter how strange and “outdated” it may seem to me. I recommend you also to do so.
In addition to all of the information above, in order to avoid mistakes, it is important to remember the following:
- The render method should remain a pure function, that is, it should not cause side effects, including changing the state of the component and calling callbacks in the parent component. This method is only for rendering content.
- Update stage methods should not cause state changes or facilitate props changes. This puts your program in an endless loop of execution and overflows the call stack.
- The shouldComponentUpdate method is needed to compare the current state with the next one and cancel unnecessary redrawing of the component depending on your conditions.
- The componentDidUpdate method is needed to call side effects after a component has been repainted, for example, calling third-party modules to process an updated list.
- The getSnapshotBeforeUpdate method is used as a helper for componentDidUpdate.
- The component Will Unmount method should not invoke new actions on the component, as it will be destroyed immediately after this method finishes executing. If you call setState in this method, the console will throw an error, because you offered to change the state of a component that you have already removed.
Conclusion
To conclude everything above, I hope that this article was a helpful guide for you about how to avoid mistakes during React Native development. Thank you for being interested and I wish you a few mistakes as possible in order to make your development process a pleasure!