7 Horrible Mistakes You’re Making With React Native
There’s no need delving into the history of React Native. Most developers are bored by it already. The whole idea behind React Native is built on simplifying the app development process without a compromise on user experience.
In short, React Native eliminated the challenge of building mobile apps by startups. However, despite being a great cross-platform framework for developing a mobile app, there are still inherent issues being faced by junior React Native developers and even the most experienced ones.
Note: this will not be one of the numerous React Native articles that discuss the pros and cons. We’ll be focusing strictly on the mistakes you make with React Native and how you can steer away from such mistakes.
To this end, we’ve identified 7 of these mistakes you are likely to find yourself repeating while using React Native;
1. So Far It Is State Changing, Then the setState Method Should Be Used
While we should expect that seasoned React Native developers should notice this obvious error, it’s still the most popular issue with RN.
You’ll still see React Native developers do something like this;
this.state.someValue = 10. Don’t ever repeat this blunder. Don’t expect it to work, as it will not work since the view will not be updated. Not to forget that you’ll not be hinted by the console that you’ve just done something wrong.
Solution; Utilize setState when you want to change something in the state. With this, the view is updated since the render is triggered.
2. Thinking Redux Will Improve App Performance.
You need to know that using Redux for your React Native project will do more harm than good.
When working on simple projects, you’ll rarely need Redux. Redux is best used for large applications. When you need to make the smallest of changes, you’ll find yourself writing a lot of code. Wasting an enormous amount of time and resources you don’t have.
The greatest mistake you can make is thinking there’s a relationship between Redux and app performance. There’s none.
Solution: Never use Redux for simple applications.
3. Strings Rather Than Number
This blunder could be because you do more HTML. That’s why you’ll see yourself sending props as strings when it should have been numbers.
This is what we are talking about;
<MyComponent value=”2” /> Solution; Do it the React Native way by using curly brackets when sending it.
4. Class Rather than className
You are doing it wrong if you are assigning CSS class name to component by doing this;
<h1 class="css-class-for-title”>Some title here</h1> There’s no way around it, but failure.
Solution: Do it this way by using the className;<h1 className=”css-class-for-title”>Some title here</h1>
5. Failing to Read Code of External Module
In the bid to save time, you’ll see React Native developers using an external module. Truly, with the documentation that comes with the extra modules, you can take the information you need and get things done faster and easier.
You don’t realize that this module may not perform as expected, or even the module is broken.
Solution; You’ll eventually have to read the code of the external module. An action you should have taken earlier on.
6. Failing To Optimize React Native Images
React Native developers often neglect the need to optimize images. Whereas, maximum attention should have been paid since the entirety of the application performance depends on it.
When images are unoptimized, the performance of the app is greatly affected. That’s because it drains your app of storage space and memory.
Solution: First, cache your image locally for fast loading. Another is to use only small-sized images. While you can also use PNG in place of JPG.
7. Wrong Estimation
Yes, React Native developers commit this blunder. Especially when making layout estimate for Android and iOS applications. Rather than separately, the estimation is done together.
Forgetting that the structure of the page is different on both platforms. It’s just because there are different reusable components on both ends.