MMKV for fast storage in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import MMKV storage in React Native.

React Native

import { [1] } from 'react-native-mmkv';

Drag options to blanks, or click blank then click option'

AMMKV

BStorage

CuseMMKV

DAsyncStorage

Attempts:

3 left

💡 Hint

Common Mistakes

Using AsyncStorage instead of MMKV

Importing a wrong name like Storage or useMMKV

You import MMKV from the react-native-mmkv package to use fast storage.

2fill in blank

medium

Complete the code to create a new MMKV storage instance.

React Native

const storage = new [1]();

Drag options to blanks, or click blank then click option'

AMMKV

BStorageManager

CStorage

DAsyncStorage

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to instantiate AsyncStorage which is not a class

Using wrong class names like Storage or StorageManager

You create a new instance by calling new MMKV().

3fill in blank

hard

Fix the error in the code to save a string value with MMKV.

React Native

storage.[1]('username', 'Alice');

Drag options to blanks, or click blank then click option'

Aput

Bsave

Cstore

DsetString

Attempts:

3 left

💡 Hint

Common Mistakes

Using save or put which are not MMKV methods

Trying to use AsyncStorage methods

The correct method to save a string is setString.

4fill in blank

hard

Fill both blanks to read a string value and provide a default if missing.

React Native

const name = storage.[1]('username') || [2];

Drag options to blanks, or click blank then click option'

AgetString

B'Guest'

CsetString

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using setString instead of getString to read

Using null instead of a default string

Use getString to read the value and provide a default like 'Guest' if it is missing.

5fill in blank

hard

Fill all three blanks to remove a stored key and check if it exists.

React Native

storage.[1]('username');
const exists = storage.[2]('username');
console.log(exists === [3]);

Drag options to blanks, or click blank then click option'

Adelete

Bcontains

Cfalse

Dremove

Attempts:

3 left

💡 Hint

Common Mistakes

Using remove which is not a method

Checking existence with wrong method

Comparing existence to true instead of false

Use delete to delete a key, contains to check if it exists, and compare to false after removal.

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