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.

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