MMKV for fast storage in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you store and retrieve a value using MMKV?

Consider this React Native code using MMKV storage. What will be the output shown on the screen after pressing the button?

React Native

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();

export default function App() {
  const [value, setValue] = useState('');

  const saveAndLoad = () => {
    storage.set('greeting', 'Hello MMKV');
    const stored = storage.getString('greeting');
    setValue(stored ?? '');
  };

  return (
    <View>
      <Button title="Save & Load" onPress={saveAndLoad} />
      <Text>{value}</Text>
    </View>
  );
}

A The text remains empty because MMKV does not save strings.

B The text 'Hello MMKV' appears below the button after pressing it.

C An error occurs because MMKV requires async/await for set and get.

D The app crashes because MMKV is not initialized properly.

💡 Hint

MMKV stores data synchronously and getString returns the saved string immediately.

MMKV's set and getString methods are synchronous. After saving 'Hello MMKV' with set, getString returns it immediately, so the text updates correctly.

❓ lifecycle

intermediate

When is MMKV storage data persisted in React Native?

In a React Native app using MMKV, when is the data saved by MMKV guaranteed to be persisted?

A Immediately after calling storage.set, data is saved to disk synchronously.

B Data is saved only when you call a special save method explicitly.

C Only when the app goes to background, MMKV flushes data to disk asynchronously.

D Data is saved only when the app is closed by the user.

💡 Hint

Think about synchronous vs asynchronous storage methods.

MMKV writes data synchronously to disk when you call set, so data is immediately persisted without waiting for app lifecycle events.

🔧 Debug

advanced

Why does this MMKV getString call return null unexpectedly?

Look at this code snippet: const storage = new MMKV(); storage.set('key', 'value'); const val = storage.getString('Key'); Why does val return null?

A Because MMKV keys are case-sensitive and 'Key' is different from 'key'.

B Because getString requires an async call and this is synchronous.

C Because MMKV does not support string values, only numbers.

D Because the storage instance was not initialized with a namespace.

💡 Hint

Check the spelling and casing of keys carefully.

MMKV keys are case-sensitive. 'key' and 'Key' are different keys, so getString('Key') returns null if only 'key' was set.

🧠 Conceptual

advanced

What is a key advantage of MMKV over AsyncStorage in React Native?

Choose the main advantage MMKV provides compared to AsyncStorage for React Native apps.

A MMKV automatically encrypts all data without configuration.

B MMKV requires no native setup unlike AsyncStorage.

C MMKV offers faster synchronous read/write operations with less CPU usage.

D MMKV supports only JSON objects while AsyncStorage supports strings.

💡 Hint

Think about performance and how data is accessed.

MMKV uses mmap and native code for very fast synchronous storage, making it faster and more efficient than AsyncStorage which is async and slower.

📝 Syntax

expert

Which MMKV usage snippet correctly stores and retrieves a boolean value?

Select the code snippet that correctly saves a boolean and retrieves it using MMKV in React Native.

A

storage.set('flag', 'true');
const val = storage.getBoolean('flag');

B

storage.setBoolean('flag', true);
const val = storage.get('flag');

C

storage.setBool('flag', true);
const val = storage.getBool('flag');

D

storage.set('flag', true);
const val = storage.getBoolean('flag');

💡 Hint

Check the MMKV API method names carefully.

The MMKV API uses set(key, value) for all types and getBoolean(key) to retrieve booleans. Option D uses correct method names and types.

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