useReducer hook in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this counter component using useReducer?

Consider this React Native component using useReducer to manage a counter. What will the displayed number be after pressing the 'Increment' button twice?

React Native

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

const 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, { count: 0 });

  return (
    <View>
      <Text>{state.count}</Text>
      <Button title="Increment" onPress={() => dispatch({ type: 'increment' })} />
    </View>
  );
}

A 2

B 1

C 0

D Error: dispatch not defined

💡 Hint

Each press of the 'Increment' button sends an 'increment' action to the reducer which adds 1 to count.

The initial count is 0. Each 'increment' action adds 1. Pressing twice adds 2, so the displayed count is 2.

❓ lifecycle

intermediate

When does the reducer function run in a useReducer hook?

In React Native, when is the reducer function passed to useReducer called?

A Every time the component re-renders

B Only once when the component mounts

C Only when the dispatch function is called with an action

D When the component unmounts

💡 Hint

Think about what triggers state changes in useReducer.

The reducer function runs only when an action is dispatched via the dispatch function. It calculates the new state based on the current state and action.

📝 Syntax

advanced

What error does this useReducer code produce?

Identify the error in this React Native useReducer snippet:

React Native

function reducer(state, action) {
  if(action.type === 'increment') {
    state.count += 1;
    return state;
  }
  return state;
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

A Bug: State is mutated directly, causing unexpected behavior

B Error: Cannot assign to read only property 'count'

C No error, works correctly

D SyntaxError: Missing return statement

💡 Hint

Reducers should never change the existing state object directly.

The reducer mutates the existing state object by changing state.count directly. This can cause bugs because React expects state to be immutable and replaced with a new object.

❓ navigation

advanced

How to reset state with useReducer on screen focus in React Native?

You want to reset your useReducer state to initial when the screen gains focus in React Navigation. Which approach works best?

A Use useState instead of useReducer for easier reset

B Call dispatch({ type: 'reset' }) inside useEffect with empty dependency array

C Reset state by re-mounting the component manually

D Call dispatch({ type: 'reset' }) inside a useFocusEffect hook

💡 Hint

Screen focus events are best handled with useFocusEffect from React Navigation.

useFocusEffect runs a callback every time the screen comes into focus. Dispatching a 'reset' action there resets the reducer state when the user returns to the screen.

🧠 Conceptual

expert

Why prefer useReducer over useState for complex state in React Native?

Which reason best explains why useReducer is preferred over useState for managing complex state logic?

A useReducer is faster than useState in all cases

B useReducer allows grouping related state updates in one place, improving maintainability

C useReducer automatically batches state updates without extra code

D useReducer requires less code to update simple state values

💡 Hint

Think about how state logic complexity affects code clarity.

useReducer centralizes state update logic in a reducer function, making it easier to manage and reason about complex state changes compared to multiple useState calls.