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.

Practice

1. Which React Native state management method is best for simple, local component state?

easy

A. Redux

B. useState

C. Context API

D. MobX

Solution

1. Step 1: Understand local state needs

   Local state means data used only inside one component, like a toggle or input value.

2. Step 2: Match state method to simplicity

   useState is designed for simple, local state inside functional components.

3. Final Answer:

   useState -> Option B

4. Quick Check:

   Simple local state = useState [OK]

Hint: Simple local state? Use useState hook [OK]

Common Mistakes:

• Choosing Redux for simple local state
• Confusing Context API with local state
• Thinking MobX is simpler than useState

2. Which of the following is the correct syntax to declare a state variable using useState in React Native?

easy

A. state count = useState(0);

B. let count = useState(0);

C. var count, setCount = useState(0);

D. const [count, setCount] = useState(0);

Solution

1. Step 1: Recall useState syntax

   The correct syntax uses array destructuring: const [value, setter] = useState(initialValue);

2. Step 2: Check each option

   const [count, setCount] = useState(0); matches the correct syntax exactly.

3. Final Answer:

   const [count, setCount] = useState(0); -> Option D

4. Quick Check:

   useState syntax = const [value, setter] = useState(initial) [OK]

Hint: useState always returns [value, setter] array [OK]

Common Mistakes:

• Using let or var instead of const
• Not using array destructuring
• Trying to declare state with 'state' keyword

3. What will be the output of this React Native code snippet?

const [count, setCount] = useState(0);
setCount(count + 1);
setCount(count + 1);
console.log(count);

medium

A. 0

B. 1

C. 2

D. Error

Solution

1. Step 1: Understand state updates are asynchronous

   Calling setCount twice with count + 1 uses the same stale value of count (0), so both setCount calls set count to 1.

2. Step 2: Check console.log output

   console.log(count) runs before state updates complete, so it logs the initial value 0.

3. Final Answer:

   0 -> Option A

4. Quick Check:

   State updates async, console logs old value [OK]

Hint: State updates are async; console logs old value [OK]

Common Mistakes:

• Expecting count to be 2 immediately
• Thinking setCount updates synchronously
• Ignoring that console.log runs before update

4. Identify the error in this React Native state update code:

const [items, setItems] = useState([]);
function addItem(newItem) {
  items.push(newItem);
  setItems(items);
}

medium

A. Directly mutating state array before setItems

B. Using useState with an array is invalid

C. Missing return statement in addItem

D. setItems should be called without arguments

Solution

1. Step 1: Check how state is updated

   The code mutates the existing array with push, which is not allowed because state must be immutable.

2. Step 2: Understand correct update method

   Instead, create a new array copy with the new item and pass it to setItems.

3. Final Answer:

   Directly mutating state array before setItems -> Option A

4. Quick Check:

   State must be immutable; don't mutate arrays [OK]

Hint: Never mutate state directly; always create new objects [OK]

Common Mistakes:

• Mutating arrays or objects directly
• Thinking useState can't hold arrays
• Calling setItems with no arguments

5. You have a React Native app with multiple screens needing to share user login status. Which state management approach is best?

hard

A. Use useState in each screen separately

B. Use inline styles to store login state

C. Use React Context API to share login state globally

D. Use local variables in each screen

Solution

1. Step 1: Identify need for shared state

   Login status must be accessible across multiple screens, so state must be shared globally.

2. Step 2: Choose appropriate state management

   React Context API allows sharing state across components without prop drilling, ideal for global data like login status.

3. Final Answer:

   Use React Context API to share login state globally -> Option C

4. Quick Check:

   Shared state across screens = Context API [OK]

Hint: Share global state with Context API, not local useState [OK]

Common Mistakes:

• Using separate useState in each screen causing inconsistent state
• Trying to store state in local variables
• Confusing styles with state