Amidst several benefits of React Native, there are some challenges that inherently come associated which experienced developers have come to accept and work around. This post will inform you about the most common mistakes that others make, and you can avoid.
- Mutate State Directly Inside the Redux Function
In React Native, View and State Store are linked with each other. React has a set state function which takes the new object state, comparing it with the previous state. The Data Store contains all data in the component and you render a view based on the state. You can view the new state taken from the Data Store on the screen. If you mutate state directly, it will corrupt all previous state and application will behave abnormally.
- Improper plan of Redux Store
When planning the application, the common mistake made is to think much about layout and less about data handling. Redux helps you store data correctly. Redux was used for managing and debugging of app states in larger applications. Improper planning of Redux Store leads to the generation of issues. However, it is equally important to realise that Redux does not play any role in app performance.
- Left console.log statements in the App
The developer can quickly detect bugs with the help of ‘console.log’ statement. These statements provide to track the app execution, point out the line of code causing the problem and explain why the app fails to perform as per expectations.After completing the debugging, the developer must make sure to remove these statements. If not removed, the statements make a negative impact on the app performance and slow down the app.
- Wrong Project Structure
If application is small, it is more useful to store redux modules separated from containers. If not, with containers — you will always know — which action concerns this container. There are a lot of different structures. You should only find out which of them will fit your requests better.
- Use of bad coding practices
Use of bad coding practices will derail your app making it difficult for you to extend the app. That is, if you get a lot of requirements then you will need to change the code from time to time. This becomes taxing since the code is not extensible.Try to follow the best coding practices to keep the readability of the codeusing property restructuring.Split the render elements into readable helper functions.Use the meaningful name for variables to define prop types, separate life cycles, methods, and elements in the component.
- Missing key attributes in item list
Missing key for items makes sure they specify your key property.If you don’t have a unique key for you a list item, then react will re-render every time when any item is modified from the list. Hence use the unique key on your every list item to give a stable identity as it avoids re-rendering.
- Use a stateless component to gain performance benefits
This is a common mistake since it was true before React 16, but not now. Some developers still make the mistake of using stateless component to gain performance, while the component doesn’t extend to any class.