useReducer hook in React Native - Mini App: Build & Ship

Build: Counter with useReducer

A simple counter app that uses the useReducer hook to increase, decrease, and reset the count.

Target UI

---------------------
|    Counter App    |
---------------------
|                   |
|       0           |
|                   |
|  [+]  [-]  Reset  |
---------------------

Display the current count starting at 0

Add three buttons: '+' to increase, '-' to decrease, and 'Reset' to set count back to 0

Use the useReducer hook to manage the count state

Buttons should update the count accordingly

Starter Code

React Native

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

const initialState = 0;

function reducer(state, action) {
  // TODO: Implement reducer logic here
  return state;
}

export default function Counter() {
  const [count, dispatch] = useReducer(reducer, initialState);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter App</Text>
      <Text style={styles.count}>{count}</Text>
      <View style={styles.buttons}>
        {/* TODO: Add buttons to dispatch actions */}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, marginBottom: 20 },
  count: { fontSize: 48, marginBottom: 20 },
  buttons: { flexDirection: 'row', justifyContent: 'space-between', width: 200 }
});

Task 1

Task 2

Solution

React Native

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

const initialState = 0;

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

export default function Counter() {
  const [count, dispatch] = useReducer(reducer, initialState);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter App</Text>
      <Text style={styles.count}>{count}</Text>
      <View style={styles.buttons}>
        <Button title="+" onPress={() => dispatch({ type: 'increment' })} />
        <Button title="-" onPress={() => dispatch({ type: 'decrement' })} />
        <Button title="Reset" onPress={() => dispatch({ type: 'reset' })} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, marginBottom: 20 },
  count: { fontSize: 48, marginBottom: 20 },
  buttons: { flexDirection: 'row', justifyContent: 'space-between', width: 200 }
});

We use the useReducer hook to manage the counter state instead of useState. The reducer function takes the current state and an action, then returns the new state based on the action type.

We handle three actions: increment adds 1, decrement subtracts 1, and reset sets the count back to 0.

The buttons dispatch these actions when pressed, updating the count displayed on the screen.

Final Result

Completed Screen

---------------------
|    Counter App    |
---------------------
|                   |
|       0           |
|                   |
|  [+]  [-]  Reset  |
---------------------

Tapping '+' increases the number by 1

Tapping '-' decreases the number by 1

Tapping 'Reset' sets the number back to 0

Stretch Goal

Add a limit so the count cannot go below 0

💡 Hint

Modify the reducer to return the current state if decrement would make it negative

Practice

1. What is the main purpose of the useReducer hook in React Native?

easy

A. To fetch data from an API asynchronously

B. To style components dynamically

C. To manage complex state logic using a reducer function and actions

D. To navigate between screens

Solution

1. Step 1: Understand the role of useReducer

   useReducer is designed to handle complex state changes by using a reducer function and dispatching actions.

2. Step 2: Compare with other options

   Fetching data, styling, and navigation are handled by other hooks or libraries, not useReducer.

3. Final Answer:

   To manage complex state logic using a reducer function and actions -> Option C

4. Quick Check:

   useReducer = complex state management [OK]

Hint: useReducer organizes state updates with actions and reducers [OK]

Common Mistakes:

• Confusing useReducer with useEffect for data fetching
• Thinking useReducer is for styling or navigation
• Believing useReducer automatically fetches data

2. Which of the following is the correct syntax to initialize useReducer in a React Native component?

easy

A. const state = useReducer(reducer, initialState);

B. const [state, setState] = useReducer(reducer, initialState);

C. const {state, dispatch} = useReducer(reducer, initialState);

D. const [state, dispatch] = useReducer(reducer, initialState);

Solution

1. Step 1: Recall useReducer return value

   useReducer returns an array with two elements: current state and dispatch function.

2. Step 2: Match correct destructuring syntax

   Array destructuring uses square brackets, so const [state, dispatch] is correct.

3. Final Answer:

   const [state, dispatch] = useReducer(reducer, initialState); -> Option D

4. Quick Check:

   useReducer returns [state, dispatch] array [OK]

Hint: useReducer returns [state, dispatch], use array destructuring [OK]

Common Mistakes:

• Using object destructuring {} instead of array []
• Naming dispatch as setState incorrectly
• Assigning useReducer result to a single variable

3. Given the code below, what will be the value of state.count after dispatching { type: 'increment' }?

const initialState = { count: 0 };
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}
const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'increment' });

medium

A. 1

B. -1

C. 0

D. undefined

Solution

1. Step 1: Analyze reducer behavior for 'increment'

   The reducer returns a new state with count increased by 1 from current state.count.

2. Step 2: Calculate new count value

   Initial count is 0, so after increment it becomes 0 + 1 = 1.

3. Final Answer:

   1 -> Option A

4. Quick Check:

   Increment action adds 1 to count [OK]

Hint: Increment action adds 1 to count in reducer [OK]

Common Mistakes:

• Forgetting to return new state object
• Assuming state changes without dispatch
• Confusing increment with decrement

4. Identify the error in the following useReducer setup:

const initialState = { count: 0 };
function reducer(state, action) {
  if (action.type === 'increment') {
    state.count += 1;
    return state;
  }
  return state;
}
const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'increment' });

medium

A. Reducer function does not handle 'increment' action

B. Mutating state directly instead of returning a new object

C. dispatch is not defined

D. Missing initialState argument in useReducer

Solution

1. Step 1: Check reducer state mutation

   The reducer modifies state.count directly, which is not recommended in React.

2. Step 2: Understand why mutation is wrong

   React expects reducers to return new state objects to detect changes and update UI correctly.

3. Final Answer:

   Mutating state directly instead of returning a new object -> Option B

4. Quick Check:

   Reducers must return new state objects, not mutate [OK]

Hint: Never mutate state directly; always return new object [OK]

Common Mistakes:

• Mutating state instead of copying
• Forgetting to return new state
• Assuming dispatch is undefined without context

5. You want to toggle a boolean isVisible state using useReducer. Which reducer function correctly toggles the state when dispatching { type: 'toggle' }?

hard

A. function reducer(state, action) { if (action.type === 'toggle') return { isVisible: !state.isVisible }; return state; }

B. function reducer(state, action) { if (action.type === 'toggle') state.isVisible = !state.isVisible; return state; }

C. function reducer(state, action) { if (action.type === 'toggle') return state.isVisible = !state.isVisible; return state; }

D. function reducer(state, action) { if (action.type === 'toggle') return { isVisible: state.isVisible }; return state; }

Solution

1. Step 1: Identify correct state update pattern

   The reducer must return a new state object with isVisible toggled using !state.isVisible.

2. Step 2: Check each option

   function reducer(state, action) { if (action.type === 'toggle') return { isVisible: !state.isVisible }; return state; } returns a new object with toggled value. function reducer(state, action) { if (action.type === 'toggle') state.isVisible = !state.isVisible; return state; } mutates state directly. function reducer(state, action) { if (action.type === 'toggle') return state.isVisible = !state.isVisible; return state; } returns a boolean, not an object. function reducer(state, action) { if (action.type === 'toggle') return { isVisible: state.isVisible }; return state; } returns unchanged state.

3. Final Answer:

   function reducer(state, action) { if (action.type === 'toggle') return { isVisible: !state.isVisible }; return state; } -> Option A

4. Quick Check:

   Return new state object with toggled boolean [OK]

Hint: Always return new state object; toggle with !state.value [OK]

Common Mistakes:

• Mutating state directly instead of returning new object
• Returning boolean instead of state object
• Returning unchanged state without toggling