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.