Explain AsyncStorage vs. SecureStore vs. Redux Persist.

React Native Practical - Interview Questions and Answers

AsyncStorage vs. SecureStore vs. Redux Persist in React Native

In React Native, AsyncStorage, SecureStore, and Redux Persist are used for storing and persisting data. Each has different use cases and security levels.

1. AsyncStorage (Built-in Storage)

AsyncStorage is a key-value storage system that allows you to store data persistently on the device.

* When to Use :

Storing small amounts of non-sensitive data (e.g., user preferences, app settings).
Caching API responses for offline access.

* Limitations :

Not secure (data is stored as plain text).
Slower performance for large datasets.

Installation :

npm install @react-native-async-storage/async-storage

Usage Example :

import AsyncStorage from '@react-native-async-storage/async-storage';

// Save data
const saveData = async () => {
  await AsyncStorage.setItem('username', 'JohnDoe');
};

// Retrieve data
const getData = async () => {
  const value = await AsyncStorage.getItem('username');
  console.log(value);
};

// Remove data
const removeData = async () => {
  await AsyncStorage.removeItem('username');
};

* Easy to use but not recommended for storing sensitive data.

2. SecureStore (Encrypted Storage)

SecureStore (from expo-secure-store) is a secure storage solution that encrypts data, making it ideal for storing sensitive information like tokens, passwords, and user credentials.

* When to Use :

Storing sensitive data (e.g., authentication tokens, passwords).
When security is a priority.

* Limitations :

Works only on physical devices (not on emulators/simulators).
Limited storage size (better for small pieces of sensitive data).

Installation (Expo Users Only) :

expo install expo-secure-store

Usage Example :

import * as SecureStore from 'expo-secure-store';

// Save data securely
const saveSecureData = async () => {
  await SecureStore.setItemAsync('token', 'secure-token-123');
};

// Retrieve data
const getSecureData = async () => {
  const value = await SecureStore.getItemAsync('token');
  console.log(value);
};

// Remove data
const removeSecureData = async () => {
  await SecureStore.deleteItemAsync('token');
};

* Best choice for storing sensitive user information.

3. Redux Persist (State Persistence)

Redux Persist is used to persist Redux state across app restarts. It integrates with storage solutions like AsyncStorage.

* When to Use :

Persisting global state (e.g., user authentication state, theme settings).
Avoiding data loss when the app is restarted.

* Limitations :

Can only store Redux state, not general app data.
Requires Redux as a dependency.

Installation :

npm install redux-persist @react-native-async-storage/async-storage

Usage Example :

import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { createStore } from 'redux';

// Define a reducer
const reducer = (state = { user: null }, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
};

// Configure Redux Persist
const persistConfig = { key: 'root', storage: AsyncStorage };
const persistedReducer = persistReducer(persistConfig, reducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);

* Great for persisting Redux state without losing data on app reload.

Comparison Table

Feature	AsyncStorage	SecureStore	Redux Persist
Security	Plain text (not secure)	Encrypted storage	Uses AsyncStorage (not secure)
Use Case	Caching, non-sensitive data	Sensitive data (passwords, tokens)	Persisting Redux state
Works Offline?	Yes	Yes	Yes
Performance	Slower for large data	Fast for small data	Optimized for Redux
Storage Limit	Device-dependent	Small size	Limited by AsyncStorage
Platform Support	Android & iOS	Android & iOS (Expo)	Android & iOS