Why performance affects user retention in React Native - Build It to Prove It

Build: Performance Impact Demo

This screen shows how app performance affects user retention by simulating a slow loading list and a fast loading list. Users can switch between them to see the difference.

Target UI

Performance Impact Demo

[Toggle: Slow Load | Fast Load]

Loading data...

[List of items appears here]

Add a toggle button to switch between slow and fast loading modes

Show a loading indicator while data is loading

Simulate slow loading by delaying data display by 3 seconds

Simulate fast loading by displaying data immediately

Display a list of 5 items after loading

Explain in UI how slow performance can cause users to leave

Starter Code

React Native

import React, { useState, useEffect } from 'react';
import { View, Text, Button, FlatList, ActivityIndicator, StyleSheet } from 'react-native';

export default function PerformanceImpactDemo() {
  const [isSlow, setIsSlow] = useState(true);
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    setLoading(true);
    setData([]);
    // TODO: Add loading simulation here
  }, [isSlow]);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Performance Impact Demo</Text>
      <View style={styles.toggleContainer}>
        <Button title={isSlow ? 'Switch to Fast Load' : 'Switch to Slow Load'} onPress={() => setIsSlow(!isSlow)} />
      </View>
      <View style={styles.content}>
        {/* TODO: Show loading indicator or list here */}
      </View>
      <Text style={styles.note}>
        {/* TODO: Add explanation text here */}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#fff' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  toggleContainer: { marginBottom: 20 },
  content: { flex: 1 },
  note: { marginTop: 20, fontSize: 16, color: '#555' }
});

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

React Native

import React, { useState, useEffect } from 'react';
import { View, Text, Button, FlatList, ActivityIndicator, StyleSheet } from 'react-native';

export default function PerformanceImpactDemo() {
  const [isSlow, setIsSlow] = useState(true);
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    setLoading(true);
    setData([]);
    if (isSlow) {
      const timer = setTimeout(() => {
        setData(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']);
        setLoading(false);
      }, 3000);
      return () => clearTimeout(timer);
    } else {
      setData(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']);
      setLoading(false);
    }
  }, [isSlow]);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Performance Impact Demo</Text>
      <View style={styles.toggleContainer}>
        <Button title={isSlow ? 'Switch to Fast Load' : 'Switch to Slow Load'} onPress={() => setIsSlow(!isSlow)} />
      </View>
      <View style={styles.content}>
        {loading ? (
          <ActivityIndicator size="large" color="#0000ff" accessibilityLabel="Loading indicator" />
        ) : (
          <FlatList
            data={data}
            keyExtractor={(item) => item}
            renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
            accessibilityLabel="List of items"
          />
        )}
      </View>
      <Text style={styles.note} accessibilityRole="text">
        {isSlow
          ? 'Slow loading frustrates users and may cause them to leave your app early.'
          : 'Fast loading keeps users happy and encourages them to stay longer.'}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#fff' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  toggleContainer: { marginBottom: 20 },
  content: { flex: 1 },
  item: { fontSize: 18, paddingVertical: 8 },
  note: { marginTop: 20, fontSize: 16, color: '#555' }
});

This React Native screen demonstrates how app performance affects user retention by letting users toggle between slow and fast loading modes.

We use useEffect to simulate loading data. When in slow mode, we delay showing the list by 3 seconds using setTimeout. In fast mode, data appears immediately.

While loading, an ActivityIndicator shows to inform users the app is working. After loading, a list of 5 items appears.

The text below explains why slow loading can cause users to leave, helping learners connect performance with user experience.

Final Result

Completed Screen

Performance Impact Demo

[Switch to Fast Load]

Loading indicator spinning...



Performance Impact Demo

[Switch to Slow Load]

- Item 1
- Item 2
- Item 3
- Item 4
- Item 5

Fast loading keeps users happy and encourages them to stay longer.

User taps the toggle button to switch between slow and fast loading modes.

When slow loading is active, a spinner shows for 3 seconds before the list appears.

When fast loading is active, the list appears immediately without delay.

The explanation text updates to reflect the current loading mode.

Stretch Goal

Add a progress bar that fills up during the slow loading delay to visually show loading progress.

💡 Hint

Use React Native's Animated API or a third-party progress bar component and update progress over the 3-second delay.

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