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.