Common mistakes Web Developers make when they start with React Native

React Native is a popular framework among developers for building mobile applications. However, web developers who are new to React Native may make some mistakes due to their familiarity with web development. One of the common mistakes is related to navigation state.

In web development, when a user navigates from route A to route B, the component rendered in route A becomes inactive or unmounted, and a new component is mounted for route B. The history object is maintained to track the user journey, and the browser back button is usually not used as websites and web apps are designed to have their own back button inside the app.

On the other hand, in mobile development, the back button is placed at the bottom of the screen, making it easily accessible to the user. Due to this, web developers need to consider what happens when the mobile back button is pressed.

Here are some common patterns in React Native codebase that web developers may encounter:

1. Just pushing new screens into the stack - While there is nothing wrong with pushing new screens, there are cases where you need to replace the current screen with a new screen. For example, when a user successfully authenticates and you want to navigate to the app's home screen, you should clear the current stack and push a new screen or replace the login screen with the home screen, so that when the user presses the back button, they don't end up on the login screen again.

2. Unnecessary re-rendering - All the screens that are not cleared from the navigation stack remain active. Any global state change consumed in these screens will trigger a re-render. The ideal solution is to create Pure components or High-Order Components to avoid unnecessary re-rendering.

3. Not clearing the navigation stack - Some code may push the Login screen into the stack on logout. This is not desirable, as the user should not be able to go back to the app's home screen when they press the back button on the login screen. In this case, the navigation stack should be cleared, and only the Login screen should be pushed.

As cross-platform technologies like React Native and Flutter become more popular, more web developers are transitioning to mobile development. By understanding the differences between web and mobile development and being mindful of these common mistakes, web developers can avoid issues when starting with React Native.