Common bugs in React apps

"With great power comes great responsibility." - Peter Parker

React enables developers to build complex and dynamic applications, but also requires them to implement the basic web application behavior that users have grown to expect and that comes "for free" in traditional web applications.

Out of sync state

The user creates a new "thing" and but that thing isn't available to be used in the rest of the app until the user force reloads the app or logs out and logs back in.

Routes that are not directly accessible

Apps advertise routes as being directly accessible, but they aren't. Bookmarking one of these routes, or trying to open it in a new tab, or sending someone a link, doesn't work. When someone opens the URL, instead of the desired route being displayed, the app displays another route.

Users hate wizards. Routes that are not directly accessible, routes that can only be accessible from another specific route, are like the second, third, or fourth step of a wizard.

Not properly handling authentication request failures

The app loads, the auth request or session validation request fails. The app doesn't handle the failure. The app doesn't redirect the user to the login page. Yet, they can still "use" the app with no data.

This bug appears to be more common with apps that use 3rd party APIs for authentication. These 3rd party APIs fail differently than the app's API and the app doesn't handle the differences.

Too many XHR requests and slow requests

The most important, and most ignored, performance metric in React app development is the time between when the user clicks and when the user can interact with the resulting loaded data.

In theory, React apps are faster because React minimizes DOM updates. However, users rarely wait on DOM updates. The benefits of all of those DOM performance optimizations disappear as soon as the user has to wait, and wait, and wait for their data to become available.

Improve user experience by optimizing the things that consume the most time. For React apps, that's loading data.

How to prevent these bugs

Because these bugs impact users directly, they all could have a significant negative impact on the business. The first step to preventing them is to recognize how important the user's experience is to the success of your application. The second step is to use testing tools that can find these bugs. Looking for these types of failures is difficult in traditional testing tools.

If any of these bugs exist in your React app, Proof'd will find them.

Our automated testing platform is built for startups, enterprises, and any other organization that develops software. Schedule a quick call with us and find out how we can help you test everything with the team you have.