MMKV for fast storage in React Native - Build, Publish & Deploy

Build & Publish - MMKV for fast storage

Performance Impact of MMKV for Fast Storage

MMKV is a key-value storage library optimized for speed and low latency. It uses memory-mapped files to read and write data quickly, which helps your app maintain smooth 60fps animations and fast UI responses. Because it avoids heavy disk I/O on the main thread, it reduces jank and battery drain compared to traditional storage methods like AsyncStorage.

💻

How to Optimize MMKV Usage for 60fps Rendering

To keep your app running smoothly, use MMKV asynchronously and avoid blocking the UI thread. Batch writes when possible and avoid frequent small writes. Use MMKV's native methods directly instead of wrapping them in extra JavaScript layers. Also, clear unused keys to keep the storage lean and fast.

Impact on App Bundle Size and Startup Time

Integrating MMKV adds a small native library to your app, typically increasing the bundle size by a few megabytes. This is a moderate increase but justified by the performance gains. Startup time impact is minimal because MMKV initializes quickly. Lazy loading MMKV instances can further reduce startup delays.

iOS vs Android Differences for MMKV

MMKV is supported on both iOS and Android with native implementations. On iOS, it uses NSFileHandle and memory mapping with mmap. On Android, it uses JNI to access native C++ code. Both platforms benefit from fast reads and writes, but Android requires proper ProGuard rules to avoid stripping MMKV classes. Also, Android apps must handle multi-process access carefully.

Relevant Store Review Guidelines and Requirements

Using MMKV complies with both Apple App Store and Google Play policies as it stores data locally without transmitting sensitive user data. Ensure you do not store sensitive information unencrypted. For sensitive data, use MMKV's encryption features. Also, respect user privacy and provide clear disclosure if you collect or store personal data.

Self-Check: Your App Takes 5 Seconds to Load This Screen. What's Likely Wrong?

If your screen loads slowly despite using MMKV, you might be doing heavy synchronous reads or writes on the main thread. Another cause could be loading large amounts of data at once instead of lazy loading. Check if you are initializing MMKV multiple times or not reusing instances. Optimizing these will improve load time.

Key Result

MMKV provides fast, low-latency key-value storage for React Native apps, improving UI smoothness and reducing battery use. Proper asynchronous use and batching optimize 60fps rendering. It adds moderate bundle size but minimal startup delay. iOS and Android implementations differ slightly, requiring platform-specific setup. Follow store guidelines by encrypting sensitive data and respecting privacy.

Practice

1. What is the main purpose of using MMKV in a React Native app?

easy

A. To design app layouts

B. To store small data quickly and keep it after app closes

C. To handle network requests

D. To create complex animations

Solution

1. Step 1: Understand MMKV's role

   MMKV is designed for fast storage of small data in apps.

2. Step 2: Compare options

   Options A, B, and C relate to app layouts, animations, and networking, which are not MMKV's purpose.

3. Final Answer:

   To store small data quickly and keep it after app closes -> Option B

4. Quick Check:

   MMKV = fast persistent storage [OK]

Hint: MMKV is for fast data storage, not UI or network [OK]

Common Mistakes:

• Confusing MMKV with UI or animation libraries
• Thinking MMKV handles network calls
• Assuming MMKV is for large file storage

2. Which of the following is the correct way to save a string value using MMKV in React Native?

easy

A. MMKV.set('key', 'value')

B. MMKV.save('key', 'value')

C. MMKV.store('key', 'value')

D. MMKV.put('key', 'value')

Solution

1. Step 1: Recall MMKV save method

   The correct method to save data is set.

2. Step 2: Check other options

   Methods like save, store, and put are not valid MMKV methods.

3. Final Answer:

   MMKV.set('key', 'value') -> Option A

4. Quick Check:

   Use set() to save data [OK]

Hint: Use set() to save data in MMKV [OK]

Common Mistakes:

• Using incorrect method names like save or put
• Confusing MMKV with AsyncStorage syntax
• Forgetting to pass both key and value

3. What will be the output of this code snippet?

const MMKV = require('react-native-mmkv').MMKV;
const storage = new MMKV();
storage.set('name', 'Alice');
const result = storage.getString('name');
console.log(result);

medium

A. undefined

B. null

C. 'Alice'

D. Error: getString is not a function

Solution

1. Step 1: Analyze storage.set call

   The code saves the string 'Alice' with key 'name'.

2. Step 2: Analyze storage.getString call

   Retrieves the string stored under 'name', which is 'Alice'.

3. Final Answer:

   'Alice' -> Option C

4. Quick Check:

   getString('name') returns 'Alice' [OK]

Hint: getString returns saved string value [OK]

Common Mistakes:

• Expecting undefined if not awaited
• Confusing getString with get() method
• Assuming getString returns null if key exists

4. Identify the error in this MMKV usage code:

const storage = new MMKV();
storage.set('count', 5);
const value = storage.getString('count');
console.log(value);

medium

A. Using getString to read a number value

B. Missing await before storage.set

C. MMKV constructor requires parameters

D. set method only accepts strings

Solution

1. Step 1: Check data type saved

   The code saves a number 5 using set.

2. Step 2: Check retrieval method

   getString expects a string value, but 'count' stores a number, causing mismatch.

3. Final Answer:

   Using getString to read a number value -> Option A

4. Quick Check:

   getString expects string data [OK]

Hint: Match getString with string data only [OK]

Common Mistakes:

• Trying to getString for non-string data
• Assuming set is async and needs await
• Thinking MMKV constructor needs arguments

5. You want to save a user's theme preference ('dark' or 'light') and retrieve it safely after app restart using MMKV. Which code snippet correctly does this?

hard

A. const storage = new MMKV();
storage.set('theme', 'dark');
const theme = storage.getString('theme');

B. const storage = new MMKV();
storage.set('theme', 'dark');
const theme = storage.get('theme');

C. const storage = new MMKV();
storage.save('theme', 'dark');
const theme = storage.getString('theme');

D. const storage = new MMKV();
storage.set('theme', 'dark');
const theme = storage.getString('theme') ?? 'dark';

Solution

1. Step 1: Save theme preference correctly

   Use set to save the string 'dark' under 'theme'.

2. Step 2: Retrieve with fallback

   Use getString('theme') and fallback to 'dark' if null or undefined using ??.

3. Final Answer:

   const storage = new MMKV(); storage.set('theme', 'dark'); const theme = storage.getString('theme') ?? 'dark'; -> Option D

4. Quick Check:

   Use set() and getString() with nullish fallback [OK]

Hint: Use ?? for safe fallback when reading MMKV data [OK]

Common Mistakes:

• Using non-existent save() method
• Not providing fallback value on getString
• Using get() instead of getString for strings