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.

Practice

1. Why is app performance important for user retention in React Native apps?

easy

A. Because performance only affects app size, not users

B. Because fast apps keep users engaged and reduce frustration

C. Because slow apps use less battery

D. Because users prefer apps with many animations regardless of speed

Solution

1. Step 1: Understand user experience impact

   Users prefer apps that respond quickly without delays or freezes.

2. Step 2: Connect performance to retention

   Fast apps keep users happy and engaged, so they keep using the app longer.

3. Final Answer:

   Because fast apps keep users engaged and reduce frustration -> Option B

4. Quick Check:

   Fast apps = better retention [OK]

Hint: Think about what makes you keep using an app [OK]

Common Mistakes:

• Confusing battery use with user retention
• Ignoring user frustration from slow apps
• Assuming animations always improve retention

2. Which React Native code snippet shows a correct way to avoid heavy work during rendering?

easy

A. const MyComponent = () => { return {heavyCalculation()}; };

B. const MyComponent = () => { setTimeout(() => {}, 1000); return Delay; };

C. const MyComponent = () => { while(true) {} return Loop; };

D. const MyComponent = React.memo(() => Fast render);

Solution

1. Step 1: Identify heavy work in rendering

   Calling heavyCalculation() inside render causes slow rendering.

2. Step 2: Recognize React.memo usage

   React.memo prevents unnecessary re-renders, improving performance.

3. Final Answer:

   const MyComponent = React.memo(() => <Text>Fast render</Text>); -> Option D

4. Quick Check:

   React.memo = avoid heavy re-renders [OK]

Hint: Look for React.memo to optimize rendering [OK]

Common Mistakes:

• Using infinite loops inside render
• Running heavy functions directly in render
• Adding delays inside render function

3. What will happen if a React Native app frequently re-renders heavy components unnecessarily?

medium

A. The app will slow down and users may get frustrated

B. The app will run faster and use less memory

C. The app will crash immediately

D. The app will ignore the extra renders and stay the same

Solution

1. Step 1: Understand re-rendering cost

   Heavy components take time and resources to render, so frequent re-renders slow the app.

2. Step 2: Connect slow app to user frustration

   Slow apps frustrate users, causing them to leave the app.

3. Final Answer:

   The app will slow down and users may get frustrated -> Option A

4. Quick Check:

   Heavy re-renders = slow app = frustration [OK]

Hint: More renders usually mean slower app [OK]

Common Mistakes:

• Thinking more renders speed up the app
• Assuming app crashes immediately
• Believing extra renders have no effect

4. Identify the performance issue in this React Native code snippet:

const List = ({items}) => {
  return items.map(item => {
    console.log('Rendering', item);
    return <Text key={item.id}>{item.name}</Text>;
  });
};

medium

A. Missing unique key prop for list items

B. Using map inside render is not allowed

C. Logging inside render causes slow UI

D. No performance issue here

Solution

1. Step 1: Check for keys in list items

   The code uses key={item.id}, so keys are present and correct.

2. Step 2: Identify logging impact

   console.log inside render slows UI because it runs on every render.

3. Final Answer:

   Logging inside render causes slow UI -> Option C

4. Quick Check:

   console.log in render = slow UI [OK]

Hint: Avoid console.log inside render functions [OK]

Common Mistakes:

• Thinking missing keys cause this issue
• Believing map is disallowed in render
• Ignoring logging impact on performance

5. You want to improve user retention by optimizing a React Native app that loads a large list. Which combined approach best improves performance and keeps users engaged?

hard

A. Use FlatList with keyExtractor and avoid inline functions in renderItem

B. Render all items at once with heavy animations for each

C. Use ScrollView with many nested Views and no keys

D. Load all data synchronously on app start without caching

Solution

1. Step 1: Choose efficient list component

   FlatList renders only visible items, improving performance over ScrollView.

2. Step 2: Optimize rendering with keys and stable functions

   Using keyExtractor and avoiding inline functions prevents unnecessary re-renders.

3. Final Answer:

   Use FlatList with keyExtractor and avoid inline functions in renderItem -> Option A

4. Quick Check:

   FlatList + keys + stable functions = better retention [OK]

Hint: Use FlatList and stable keys for big lists [OK]

Common Mistakes:

• Rendering all items at once causing lag
• Using ScrollView for large lists
• Ignoring keys and inline functions in lists