Phase 2: React Native & Cross-Platform

Async storage, MMKV & persistent state

Intermediate ~3 min read
Think of it this way A friendly analogy. Read this if the technical version feels dense. Show Hide

Have you ever closed a game on your tablet, then opened it again later and found it remembered your score, or what level you were on, or even your favorite character outfit? That’s because the game had a special way to remember things, even after it was turned off. In the world of building apps, we call this "persistent state." It's like your school backpack or locker: you put your books, pencils, and lunchbox inside, and they stay there overnight, ready for you the next day. The app needs its own "backpack" to keep important information safe and sound until you use it again. Without it, every time you opened an app, it would be like starting from scratch!

One simple way apps keep hold of information is a tool called AsyncStorage. Imagine it like a sturdy, basic locker where you can leave notes. Each note has a title (like "my high score") and then the actual message (like "500 points"). When you want to save something, you write a note and ask the locker attendant to put it inside. When you need it back, you ask them to find the note with that title. The attendant is good at their job, but they might be helping other kids, so it can take a tiny bit of time to put your note away or fetch it for you. This is perfectly fine for small, important things you don't need to access a hundred times a second, like your favorite color setting or if you're logged in.

But what if you needed to store and grab information super-fast, maybe thousands of times in a minute? Like a game that constantly saves your progress as you move, or an app that updates a list of items many times? For those speedy jobs, there's a special, super-quick storage system called MMKV. Think of this as a super high-tech locker with a robotic arm. You tell the robot what note to store or fetch, and zap! it’s done instantly. There’s no waiting for an attendant, and it can even put a secret code on your notes to keep them extra safe. Because it works so quickly and directly, it's perfect for apps that need to remember and change lots of information all the time without slowing down.

So, when you build your own apps, you'll get to decide which "locker" is best for your information. Do you need a simple, reliable spot for your username, like AsyncStorage? Or do you need a lightning-fast, super-secure system for a busy game, like MMKV? Knowing about these tools means you can make your apps remember things smartly, so they're always ready to pick up right where your users left off!

In React Native, "persistent state" refers to data that needs to survive when your app closes and reopens. Unlike in-memory state, which is lost on restart, persistent state ensures user preferences, login tokens, or cached data remain available. For this, React Native provides AsyncStorage, a simple, unencrypted, asynchronous, key-value storage system. Think of it as a small local database baked into your app, allowing you to setItem, getItem, and removeItem with string keys and string values. While easy to use for small, infrequent data, its asynchronous nature and JavaScript bridge overhead can lead to performance bottlenecks when dealing with frequent operations or larger datasets.

When performance becomes critical, especially for frequent reads/writes or larger chunks of data, MMKV (Multi-Media Key-Value) storage emerges as a superior alternative. Developed by Tencent, MMKV is a high-performance, synchronous, encrypted key-value store built natively using C++ for iOS and Android. Its synchronous nature means reads and writes are near-instantaneous as they bypass the JavaScript bridge and directly interact with native storage. This makes MMKV ideal for scenarios like caching API responses, storing user sessions, or managing complex offline data where speed and responsiveness are paramount.

Choosing between AsyncStorage and MMKV boils down to your specific needs. AsyncStorage is perfectly adequate for simple, less-frequent persistent data like a "dark mode" preference. For more demanding applications requiring blazing-fast access, larger data volumes, or even encryption, MMKV is the go-to solution. Many modern state management libraries (like Zustand or Redux Persist) also offer integration layers, allowing you to plug in either AsyncStorage or MMKV as their underlying persistence engine, abstracting away the low-level details. Understanding both tools empowers you to make informed decisions about how your app intelligently retains data across sessions, significantly impacting user experience and app performance.

Key Takeaways

  • Persistent State: Data that survives app restarts, crucial for user experience and data continuity.
  • AsyncStorage: React Native's built-in, simple, asynchronous key-value store; best for small, infrequent data.
  • MMKV: A high-performance, synchronous, native key-value store; ideal for large, frequent, or sensitive data due to speed.
  • Performance: MMKV offers superior speed by directly accessing native storage, bypassing the JavaScript bridge overhead of AsyncStorage.
  • Integration: Both can serve as underlying persistence engines for higher-level state management libraries (e.g., Redux Persist, Zustand).

Code Example

javascript
Preview

How this code works

This code demonstrates two ways to store and retrieve simple data persistently within a React Native app, ensuring information like user preferences or an ID is remembered even after the app is closed. The first section uses AsyncStorage, a built-in solution well-suited for smaller data sets. Functions use AsyncStorage.setItem(key, value) to save data and AsyncStorage.getItem(key) to retrieve it. A key characteristic of AsyncStorage is that its operations are async, meaning they run in the background without freezing the app. This requires using await when calling these functions, pausing the code execution until the storage operation completes.

The second part introduces MMKV, a high-performance alternative for persistent storage. An instance of MMKV is created using new MMKV(), providing a storage object to interact with. To save data, storage.set(key, value) is used, and to retrieve it, methods like storage.getString(key) are available. A subtle but important difference with MMKV is that its operations are synchronous, executing immediately without needing await. However, it's crucial to select the correct retrieval method (e.g., getString, getBool, getNumber) as MMKV stores and retrieves values based on their original type, unlike AsyncStorage which internally converts everything to a string.

Resources

Related Articles

Hand-picked reads to go deeper on state management in react native.

Back to Mobile Developer Roadmap