React Best Practices with Ionic

React is a fully supported framework for building enterprise apps on the Ionic stack. Given the unique nature and constraints of mobile app development, there are some best practices to keep in mind as you build out your app.

Class-based vs Function Components

With React Hooks, the React ecosystem is increasingly embracing Function Components over class-based ones. While the difference in many cases is subjective, we do strongly encourage teams to embrace Function Components where possible. One of the best reasons is to stay aligned with the rest of the React ecosystem which is now treating Hooks as the primary API surface and innovating around it.

State Management

For state management in your React apps, we have a set of recommendations in our State Management guide.

Lazy Loading

For teams building apps that need to provide a fast initial load experience, lazy loading is critical.

For Progressive Web Apps, lazy loading is a must in order to reach performance standards and expectations. See the Lighthouse Metrics guide for a list of which metrics are important to optimize. The process of optimization involves whittling down the first set of modules your app will need immediately, and lazy loading all the rest.

See the Code-Splitting guide on the React docs and apply these lessons to your Ionic React app.

Virtual Scrolling

For building large lists that maintain performance for a quality user experience, a virtual scrolling library should be used.

We recommend using React Virtuoso, and have a demo using it in Ionic React.

Pick lightweight libraries

The libraries developers choose use in their apps can be the greatest source of code bloat and reduced loading performance if not careful.

Every library used in the app should be carefully considered. A few to watch out for:

Moment

Moment is one of the most popular date/time libraries, but it's also a major source of bloat as it is currently not built to be tree shaken so will add considerable weight to your final JavaScript bundles.

One alternative to try is date-fns.

Keep native dependencies up to date

Mobile is a unique environment in that it moves very quickly as new devices and operating systems are released yearly and mobile vendors push upgrades aggressively. For many enterprise teams this can come as a shock, especially relative to desktop or web. One consequence of this rapid upgrade pace is that classic approaches to software stability can actually worsen it as dependencies go stale or new operating system and device requirements force developers to upgrade frequently.

Constantly evaluate the status of every native Capacitor or Cordova plugin used in the app and adopt new iOS and Android releases often to ensure compatibility with app store submission requirements and supported versions of the native toolchains.

Don't store sensitive values in insecure locations

When working with Auth tokens (JWTs/etc), encryption keys, or other highly sensitive information, do not store these values in insecure locations such as LocalStorage or IndexedDB. Instead, use specific mobile APIs for secure storage. We strongly recommend Identity Vault which is an officially supported Ionic solution providing easy access to these complex, low-level security APIs and hardware.

Consult the Biometrics and Token Storage Guide for more information on how these values should be stored.