How to build a React Application that ensures excellent user experience

As part of our Writer's Room blog series - articles and tutorials written by technologists from within our Andela Community - Fullstack JS Developer Jerry Chibuokem explains how to build a UX-focused React Application!

Having a great product is essential to holding your user's interest. While user experience has always been associated with the designer's role, being conscious and aware of ticking certain checkboxes as a front-end engineer can help you build better products and give your users a great experience of your application. In this blog, we'll look at some of the essentials you need to focus on to improve your user's experience.

1. Don't leave your user's stuck in limbo!

For interactions with an API, always account for the various states, don't leave your users stuck in limbo!

This seems to be common knowledge now, but once in a while I still come across applications that can leave you confused after/while performing an action. Your app should at least always account for loading, error, and actual loaded data states. In more complex cases, you should also account for other states that might be necessary while interacting with an API.

The loading state for which you didn't show the user a loader/skeleton, the API call that failed and your user didn't get any prompt/screen etc. can all make a huge (and negative) impact on how a user feels about your application.

2. Code splitting

Rather than having one large bundle that will be loaded up at once, which may even contain code the user will not interact with, consider using code splitting to serve multiple bundles that will be dynamically loaded. This can help reduce the initial load time of your app. This can be set up using a bundler such as Webpack. You can check out this section of Reactjs.org's documents to learn more about code splitting.

3. Caching

Caching can go a long way to improving your application's UX. This reduces latency, as you will have something to give the user after the initial data has been fetched for each API endpoint. While you can implement this yourself, I would recommend using a robust library that handles data fetching, caching, and invalidating the cache. Libraries such as React query, useSWR, Apollo client, and RTk query really come in handy. You can find a comparison for these libraries on the React query website.

4. Optimistic UI

Optimistic UI focuses on making the update on the front-end before talking to the server. If for any reason the update fails on the server, the change made on the front-end is reversed and the user is notified. This can help make changes like editing, liking a post, etc. feel instantaneous to the user and can help improve the user experience of your application. While you can implement this yourself, it's important to note that this can also be implemented by the libraries mentioned under caching.

5. Prefetching

In prefetching, the data is fetched ahead of time, before it is actually supposed to be displayed. This could come in handy when building out a table with server-side pagination. You can fetch the data for the next table page before the user goes to the page. React Query, RTK query and Apollo client let you easily implement this.

6. Error boundary

Although no one plans to have errors in their application, they are sometimes inevitable and have to be accounted for, in order to give your users a good experience. Error boundaries help prevent JavaScript errors in a part of the UI from breaking the whole application. With error boundaries you can catch errors and display a fallback UI when they occur; this can help you prevent your entire application from breaking in production.

7. Monitoring

Having a fallback UI to display to your users when an error occurs is useful, but you still want to know how your users interact with your application, even without them manually submitting a complaint. Monitoring helps you track errors and keeps you up to date with any changes or issues, to ensure a seamless performance. With monitoring, you can receive better insights on how your application is fairing in the hands of your users. Sentry and Datadog come in handy to help you with monitoring.

8. Animations

Having light animations across your application can make a lot of difference to how users feel about your platform. Framer motion is an easy to use library that can help you with animations.

9. Accessibility and Internationalization

Accessibility has to do with making your app usable for everyone while Internationalization is about making your app localized enough for audiences in different cultures, languages, or locations to use it easily. The degree to which you have to worry about internationalization certainly depends on the various target audience categories for your application, while accessibility is required so your application is easy to use for people with disabilities who rely on assistive technologies.

10. E2E tests for the most important flows

Writing tests certainly takes some engineering time and we need to assess if the time put into it outweighs the benefit it brings to the table. While we can afford not to sometimes, having E2E tests for your applications' most important flows could help you find out code changes that are breaking functionality before it actually gets shipped to the users. This could save you from certain problems which could have a dramatic impact on your end product.

11. Code optimizations where necessary

Optimizing when and where necessary could also improve your user's experience. Input in forms taking too long to update on every keystroke, to loading up large content all at once, etc. could all affect your user's experience. observing various performance issues in your app and making the necessary code optimization could go a long way towards improving your application's UX. You can rely on the React dev tools to measure/observe some performance issues with your app while optimizing using the useCallback and usememo hook and React.memo.

12. Analyze your app production build and make optimizations where necessary

Auditing your application build (production) bundle with Lighthouse can help find some areas where improvements and optimizations can still be made.

We certainly cannot have a product with great UX based on only how things are built in the front-end. This article highlights the important little things that can improve UX from a front-end engineering perspective with an emphasis on React (most of these can also apply to other libraries/frameworks).

Cheers to building better products!

Want to be part of the Andela Community? Then join the Andela Talent Network!

With more than 175,000 technologists in our community, in over 90 countries, we're committed to creating diverse remote engineering teams with the world's top talent. And our network members enjoy being part of a talented community, through activities, benefits, collaboration, and virtual and in-person meetups.

All you need to do to join the Andela Talent Network is to follow our simple sign-up process. 

Submit your details via our online application then's —

1. Complete an English fluency test 's — 15 minutes.
2. Complete a technical assessment on your chosen skill (Python, Golang, etc.) 's — 1 hour.
3. Meet with one of our Senior Developers for a technical interview 's — 1 hour.

Visit the Andela Talent Network sign-up page to find out more.

If you found this blog useful, check out our other blog posts for more essential insights!