Why performance affects user retention in React Native - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display a loading spinner while the app is fetching data.

React Native

return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    {isLoading ? <ActivityIndicator size=[1] /> : <Text>Data Loaded</Text>}
  </View>
);

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

A"medium"

B"small"

C"large"

D"extraLarge"

Attempts:

3 left

💡 Hint

Common Mistakes

Using an invalid size value causes the spinner not to show.

Forgetting to show the spinner during loading.

The ActivityIndicator component's size prop accepts "small" or "large". "large" shows a bigger spinner, which is more visible during loading.

2fill in blank

medium

Complete the code to prevent unnecessary re-renders by using React.memo.

React Native

const ListItem = React.memo(function ListItem({ item }) {
  return <Text>{item.name}</Text>;
});

export default function App() {
  const [data, setData] = React.useState([]);
  return <FlatList data={data} renderItem={({ item }) => <ListItem [1] />} keyExtractor={item => item.id} />;
}

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

Avalue={item}

Bdata={item}

Ckey={item}

Ditem={item}

Attempts:

3 left

💡 Hint

Common Mistakes

Passing wrong prop names causes the component to not render data.

Not using React.memo leads to unnecessary re-renders.

The ListItem component expects a prop named item. Passing item={item} ensures it receives the correct data.

3fill in blank

hard

Fix the error in the code to avoid blocking the UI thread during heavy computation.

React Native

function heavyCalculation() {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  return sum;
}

export default function App() {
  const [result, setResult] = React.useState(null);

  React.useEffect(() => {
    const res = [1];
    setResult(res);
  }, []);

  return <Text>{result}</Text>;
}

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

AheavyCalculation()

BsetTimeout(heavyCalculation, 0)

CPromise.resolve(heavyCalculation())

DrequestAnimationFrame(heavyCalculation)

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the function directly blocks the UI.

Using Promise.resolve does not defer the heavy calculation.

Using setTimeout with 0 delay defers the heavy calculation, allowing the UI to remain responsive.

4fill in blank

hard

Fill both blanks to optimize image loading with React Native's FastImage component.

React Native

import FastImage from 'react-native-fast-image';

export default function App() {
  return (
    <FastImage
      style={{ width: 200, height: 200 }}
      source={{ uri: [1], priority: [2] }}
    />
  );
}

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

A"https://example.com/image.png"

B"https://example.com/photo.jpg"

C"high"

D"low"

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid URLs causes image load failure.

Setting priority to "low" delays image loading.

The uri should be a valid image URL. Setting priority to "high" tells FastImage to load the image quickly, improving user experience.

5fill in blank

hard

Fill all three blanks to implement a simple caching mechanism for API data using React Native's AsyncStorage.

React Native

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

async function fetchData() {
  const cached = await AsyncStorage.getItem([1]);
  if (cached) {
    return JSON.parse(cached);
  }
  const response = await fetch([2]);
  const data = await response.json();
  await AsyncStorage.setItem([3], JSON.stringify(data));
  return data;
}

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

A"apiCache"

B"https://api.example.com/data"

D"https://api.example.com/info"

Attempts:

3 left

💡 Hint

Common Mistakes

Using different keys for getItem and setItem breaks caching.

Using wrong or inconsistent API URLs.

Use the same key "apiCache" to get and set cached data. The URL "https://api.example.com/data" is the API endpoint to fetch fresh data.