AsyncStorage for key-value in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output when saving and retrieving a value with AsyncStorage?

Consider this React Native code snippet using AsyncStorage. What will be displayed in the Text component after pressing the button?

React Native

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {
  const [storedValue, setStoredValue] = useState('');

  const saveValue = async () => {
    await AsyncStorage.setItem('greeting', 'Hello!');
    const value = await AsyncStorage.getItem('greeting');
    setStoredValue(value || '');
  };

  return (
    <View>
      <Button title="Save and Load" onPress={saveValue} />
      <Text>{storedValue}</Text>
    </View>
  );
}

A The Text component shows: undefined

B The Text component shows: Hello!

C The Text component shows: null

D The Text component remains empty

💡 Hint

Remember AsyncStorage stores strings and getItem returns the stored string or null if not found.

The code saves the string 'Hello!' under the key 'greeting'. Then it retrieves it immediately and sets it to state. So the Text component displays 'Hello!'.

❓ lifecycle

intermediate

When should you load AsyncStorage data in a React Native component?

You want to load a saved username from AsyncStorage when your screen appears. Which React hook is best to use for this?

A useEffect with no dependency array

B useState to load data directly

C useMemo to load data once

D useEffect with an empty dependency array []

💡 Hint

Think about running code once when the component mounts.

useEffect with [] runs once when the component mounts, perfect for loading data from AsyncStorage once on screen load.

🔧 Debug

advanced

What error does this AsyncStorage code produce?

Look at this code snippet. What error will it cause when run?

React Native

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

async function getData() {
  const value = await AsyncStorage.getItem('key');
  console.log(value);
}

getData();

A It logs a Promise object instead of the stored value

B SyntaxError due to missing await keyword

C TypeError because getItem is not a function

D It logs null if the key does not exist

💡 Hint

Remember AsyncStorage.getItem returns a Promise.

Without await, value is a Promise object, so console.log prints the Promise, not the resolved string.

🧠 Conceptual

advanced

How does AsyncStorage handle data types?

Which statement about AsyncStorage data storage is true?

A AsyncStorage stores only strings; other types must be converted before saving

B AsyncStorage stores data in binary format for efficiency

C AsyncStorage automatically serializes objects and arrays

D AsyncStorage supports storing numbers directly without conversion

💡 Hint

Think about what happens if you try to save an object directly.

AsyncStorage stores only strings. To save objects or arrays, you must convert them to strings (e.g., JSON.stringify) before saving.

❓ navigation

expert

What happens if you navigate away before AsyncStorage.setItem completes?

In a React Native app, you call AsyncStorage.setItem to save data, then immediately navigate to another screen. What is the likely outcome?

A Navigation waits automatically until setItem finishes saving

B The data is always saved instantly before navigation happens

C The data may not be saved because setItem is asynchronous and might be interrupted

D An error is thrown if navigation happens before setItem completes

💡 Hint

AsyncStorage operations are asynchronous and do not block navigation.

AsyncStorage.setItem is asynchronous and does not block navigation. If you navigate away immediately, the save might not complete before the app state changes.