How I learned AsyncStorage

About me

I am a former consultant at Accenture, one of the most prestigious consulting firms in the world. I helped clients including Google, 3M, and Cisco, automate business intelligence.

Currently, I am following my passion of application development by utilizing ReactJS, React Native, NodeJS, and PostgreSQL. I use a combination of these frameworks and more to build amazing applications for clients.

Why I wanted to learn AsyncStorage

I wanted to learn about data persistence, in particular, so that a user doesn't have to log in every time he or she re-enters the application. This is something that is required for most, if not all, applications to optimize the user experience. It is imperative that an application developer knows about data persistence and the tools that are available for this function. For this scenario, I used it mainly for data persistence of users. However, there are use cases that are beyond just saving user data.

How I approached learning AsyncStorage

For this particular project, I was using React Native as that is my weapon of choice when building mobile applications. There are many options, of which included redux-persist and AsyncStorage. AsyncStorage is by far leaner because redux-persist requires the use of redux. Although I do use redux within all my applications for state management, I wanted to tackle the problem using a simple solution. Also, it had similarities with LocalStorage which is generally used inside the browser.

Main concepts

The first step is to persist the data using AsyncStorage. Anytime AsyncStorage is used, we need to import the feature as follow:

import { AsyncStorage } from 'react-native';

After, we can use the 'setItem' method to persist the data:

AsyncStorage.setItem('user', JSON.stringify(response.data.customer), () => {
  callback(response.data.customer);
});

The response portion indicates that this is done after data has been retrieve by an API. In the above example, response.data.customer represents the customer object retrieved by the application. We see that the data has been persisted under the name 'user.' The callback function is called to let our global state management layer (redux) know that we have retrieved the customer object.

To get the data object that has been persisted, we can use the follow code within the application:

const user = AsyncStorage.getItem('user');

In the above example, we simply declare a user variable and assign the variable with the value we retrieve from the 'getItem' method for the item 'user,' which we previously set with the customer data from the API. It is as simple as that!

The last remaining thing we need to understand is how to delete this data:

AsyncStorage.removeItem('user', () => {
  callback();
});

We simply use the 'removeItem' method to remove the item 'user' that we have previously set. The callback is usually called to notify the global state (in our case, redux).

Challenges I faced

The main challenge I faced in determining what type of data I should persist was the issue of security. This is because that data can easily be accessible in the iPhone or Android device's hard drive. The simple solution is that any data that is sensitive will not be requested from the API for the portion that is being saved into the hard drive.

Key takeaways

The key takeaway was that data persistence is CRUCIAL when developing an application that is user friendly. In the age of user experience, user data persistence is a basic but a key component of any React Native - or React for that matter - application.

Tips and advice

As part of the React Native documentation, the documentation goes in depth on how this feature of React Native is used: https://facebook.github.io/react-native/docs/asyncstorage

Final thoughts and next steps

To explore the idea of data persistence within a React Native application, redux-persist is a useful tool that complements the redux package. Moreover, there is a limitation of 6MB on Android devices for AysncStorage; therefore, redux-persist is a viable solution in case data needs to persist beyond the 6MB limit on Android devices. This can work because redux-persist can connect to storage types that are larger than 6MBs. However, a word of caution is that some of these storage types are buggy but worth exploring as potential long-term solutions.