State management comparison in React Native - Mini App: Build & Ship

Build: State Management Demo

This screen demonstrates two ways to manage state in React Native: using useState hook and using useReducer hook. It shows two counters side by side that can be incremented independently.

Target UI

-----------------------------
| State Management Demo      |
|---------------------------|
| useState Counter: 0       |
| [Increment]               |
|                           |
| useReducer Counter: 0     |
| [Increment]               |
-----------------------------

Display two counters side by side labeled 'useState Counter' and 'useReducer Counter'.

Each counter starts at 0.

Below each counter, add an 'Increment' button that increases its counter by 1.

Use useState hook to manage the first counter's state.

Use useReducer hook to manage the second counter's state.

Layout should be responsive and accessible.

Starter Code

React Native

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

export default function StateManagementDemo() {
  // TODO: Add useState counter state here

  // TODO: Add useReducer counter state here

  return (
    <View style={styles.container}>
      {/* TODO: Add useState counter UI here */}

      {/* TODO: Add useReducer counter UI here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  counterContainer: {
    marginVertical: 20,
    width: '80%',
    alignItems: 'center',
  },
  counterText: {
    fontSize: 24,
    marginBottom: 10,
  },
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

export default function StateManagementDemo() {
  const [countUseState, setCountUseState] = useState(0);
  const [stateUseReducer, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <View style={styles.container}>
      <View style={styles.counterContainer} accessible accessibilityLabel="useState counter section">
        <Text style={styles.counterText}>useState Counter: {countUseState}</Text>
        <Button
          title="Increment"
          onPress={() => setCountUseState(countUseState + 1)}
          accessibilityLabel="Increment useState counter"
        />
      </View>

      <View style={styles.counterContainer} accessible accessibilityLabel="useReducer counter section">
        <Text style={styles.counterText}>useReducer Counter: {stateUseReducer.count}</Text>
        <Button
          title="Increment"
          onPress={() => dispatch({ type: 'increment' })}
          accessibilityLabel="Increment useReducer counter"
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  counterContainer: {
    marginVertical: 20,
    width: '80%',
    alignItems: 'center',
  },
  counterText: {
    fontSize: 24,
    marginBottom: 10,
  },
});

We use useState to manage the first counter because it is simple and straightforward for a single value. The countUseState variable holds the current count, and setCountUseState updates it.

For the second counter, we use useReducer which is useful when state logic is more complex or involves multiple actions. Here, the reducer function handles an 'increment' action to increase the count. The dispatch function sends actions to the reducer.

Both counters have their own increment buttons that update their respective states independently. The layout uses View containers with styles for spacing and alignment. Accessibility labels are added for screen readers.

Final Result

Completed Screen

-----------------------------
| State Management Demo      |
|---------------------------|
| useState Counter: 0       |
| [Increment]               |
|                           |
| useReducer Counter: 0     |
| [Increment]               |
-----------------------------

Tapping the 'Increment' button under 'useState Counter' increases that counter by 1.

Tapping the 'Increment' button under 'useReducer Counter' increases that counter by 1.

Each counter updates independently and immediately.

Stretch Goal

Add a Reset button below each counter to reset its value to zero.

💡 Hint

For useState, call setCountUseState(0). For useReducer, dispatch a 'reset' action and handle it in the reducer.