Memory leak detection in React Native - Mini App: Build & Ship

Build: Memory Leak Detector

This screen helps detect and prevent memory leaks by showing a counter that updates every second. It includes a toggle button to start and stop the counter. Proper cleanup is implemented to avoid memory leaks.

Target UI

Memory Leak Detector

[Counter: 0]

[Start Counter]

Display a numeric counter starting at 0

Add a button labeled 'Start Counter' or 'Stop Counter' depending on state

When started, the counter increments by 1 every second

When stopped, the counter stops incrementing

Use useEffect hook with cleanup to prevent memory leaks

Toggle button text changes based on counter running state

Starter Code

React Native

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

export default function MemoryLeakDetector() {
  const [count, setCount] = useState(0);
  const [running, setRunning] = useState(false);

  // TODO: Add useEffect to handle counter increment and cleanup

  return (
    <View style={styles.container}>
      <Text style={styles.counter}>Counter: {count}</Text>
      <Button
        title={running ? 'Stop Counter' : 'Start Counter'}
        onPress={() => setRunning(!running)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16
  },
  counter: {
    fontSize: 32,
    marginBottom: 20
  }
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function MemoryLeakDetector() {
  const [count, setCount] = useState(0);
  const [running, setRunning] = useState(false);

  useEffect(() => {
    if (!running) return;
    const intervalId = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, [running]);

  return (
    <View style={styles.container}>
      <Text style={styles.counter}>Counter: {count}</Text>
      <Button
        title={running ? 'Stop Counter' : 'Start Counter'}
        onPress={() => setRunning(!running)}
        accessibilityLabel={running ? 'Stop the counter' : 'Start the counter'}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16
  },
  counter: {
    fontSize: 32,
    marginBottom: 20
  }
});

This solution uses the useEffect hook to start a timer only when the counter is running. The timer increments the count state every second. When the running state changes or the component unmounts, the cleanup function clears the timer to prevent memory leaks. The button toggles the running state and updates its label accordingly. Accessibility label is added for better screen reader support.

Final Result

Completed Screen

Memory Leak Detector

Counter: 0

[Start Counter]

When user taps 'Start Counter', the number increments by 1 every second

Button label changes to 'Stop Counter' while counting

When user taps 'Stop Counter', the counting stops

No memory leaks occur because timer is cleared properly

Stretch Goal

Add a reset button to set the counter back to zero

💡 Hint

Add another Button component with title 'Reset' that sets count state to 0 when pressed