useReducer hook in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the useReducer hook used for in React Native?

useReducer helps manage complex state logic by using a reducer function to update state based on actions.

beginner

What are the two main parts you provide to useReducer?

You provide a reducer function and an initial state.

intermediate

Explain the role of the reducer function in useReducer.

The reducer function takes the current state and an action, then returns a new state based on that action.

beginner

How do you dispatch an action in useReducer?

You call the dispatch function with an action object, like { type: 'increment' }.

intermediate

Why might you choose useReducer over useState?

Use useReducer when state logic is complex or involves multiple sub-values and actions.

What does the useReducer hook return?

A An array with state and dispatch function

B Only the current state

C Only the dispatch function

D A boolean indicating success

useReducer returns an array with the current state and a dispatch function to send actions.

Which argument is NOT passed to the reducer function?

A Dispatch function

B Action object

C Current state

D None of the above

The reducer function receives only the current state and the action object, not the dispatch function.

How do you define an action for useReducer?

A A string

B An object with a <code>type</code> property

C A number

D A boolean

Actions are objects with a type property describing what to do.

Which hook is better for simple state updates?

A useReducer

B useEffect

C useState

D useContext

useState is simpler and better for basic state updates.

What happens if the reducer returns the same state object?

A State resets

B React re-renders anyway

C App crashes

D React skips re-render

If the reducer returns the same state object, React skips re-rendering for performance.

Describe how to set up and use the useReducer hook in a React Native component.

Think about the reducer signature and how you call dispatch.

Explain when and why you would prefer useReducer over useState in managing component state.

Consider the complexity of state changes.

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