useReducer hook in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the useReducer hook from React.

React Native

import React, { [1] } from 'react';

Drag options to blanks, or click blank then click option'

AuseReducer

BuseEffect

CuseState

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useState instead of useReducer

Forgetting to import useReducer

The useReducer hook is imported from React to manage complex state logic.

2fill in blank

medium

Complete the code to initialize the useReducer hook with a reducer and initial state.

React Native

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

Drag options to blanks, or click blank then click option'

Areducer

BinitialState

CuseState

DsetState

Attempts:

3 left

💡 Hint

Common Mistakes

Passing initial state as first argument

Passing useState instead of reducer

The first argument to useReducer is the reducer function that updates state.

3fill in blank

hard

Fix the error in the reducer function to correctly update the count on 'increment' action.

React Native

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count [1] 1 };
    default:
      return state;
  }
}

Drag options to blanks, or click blank then click option'

A/

B+

C*

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using minus instead of plus

Using multiplication or division

The reducer should add 1 to the current count when the action type is 'increment'.

4fill in blank

hard

Fill both blanks to dispatch an 'increment' action when the button is pressed.

React Native

return (
  <Button title="Increment" onPress={() => [1]([2])} />
);

Drag options to blanks, or click blank then click option'

Adispatch

B{ type: 'increment' }

C{ increment: true }

DsetState

Attempts:

3 left

💡 Hint

Common Mistakes

Using setState instead of dispatch

Wrong action object shape

To update state with useReducer, call dispatch with an action object having a type.

5fill in blank

hard

Fill all three blanks to create a reducer that handles 'increment' and 'decrement' actions.

React Native

function reducer(state, action) {
  switch (action.type) {
    case [1]:
      return { count: state.count + 1 };
    case [2]:
      return { count: state.count - 1 };
    default:
      return [3];
  }
}

Drag options to blanks, or click blank then click option'

A'increment'

B'decrement'

Cstate

D'reset'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong strings for action types

Returning wrong value in default case

The reducer must match action types as strings and return the current state by default.

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