useReducer hook in React Native

Introduction

The useReducer hook helps you manage complex state in your React Native app in a clear and organized way.

When you have multiple related state values that change together.

When your state updates depend on the previous state.

When you want to keep your state logic outside the component for clarity.

When you want to handle different actions that update state in different ways.

Syntax

React Native

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

function reducer(state, action) {
  switch (action.type) {
    case 'ACTION_TYPE':
      return { ...state, /* new state changes */ };
    default:
      return state;
  }
}

reducer is a function that takes current state and an action, then returns new state.

dispatch is a function you call to send an action to the reducer.

Examples

A simple counter with increment and decrement actions.

React Native

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

Toggle a boolean value on and off.

React Native

const initialState = { on: false };

function toggleReducer(state, action) {
  switch (action.type) {
    case 'toggle':
      return { on: !state.on };
    default:
      return state;
  }
}

const [state, dispatch] = useReducer(toggleReducer, initialState);

Sample App

This app shows a number that you can increase or decrease by pressing buttons. It uses useReducer to manage the count state clearly.

React Native

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

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;
  }
}

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

  return (
    <View style={styles.container}>
      <Text style={styles.countText}>Count: {state.count}</Text>
      <View style={styles.buttonRow}>
        <Button title="-" onPress={() => dispatch({ type: 'decrement' })} />
        <Button title="+" onPress={() => dispatch({ type: 'increment' })} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0'
  },
  countText: {
    fontSize: 32,
    marginBottom: 20
  },
  buttonRow: {
    flexDirection: 'row',
    width: '40%',
    justifyContent: 'space-around'
  }
});

Important Notes

Always return a new state object from the reducer; do not modify the existing state directly.

Use descriptive action types to keep your code easy to understand.

useReducer is great for complex state but might be overkill for simple state changes.

Summary

useReducer helps manage complex state by using a reducer function and actions.

It keeps state logic organized and easy to follow.

Use dispatch to send actions that update the state.

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