State management comparison in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding useState vs useReducer

Which statement best describes when to prefer useReducer over useState in React Native?

A Use useReducer when state logic is complex and involves multiple sub-values or when the next state depends on the previous one.

B Use useReducer only for managing global app state across multiple screens.

C Use useReducer when you want to update state directly without dispatching actions.

D Use useReducer when you want to avoid using any functions to update state.

💡 Hint

Think about complexity and how state updates depend on previous values.

useReducer is preferred for complex state logic or when the next state depends on the previous state. useState is simpler and better for simple state updates.

❓ ui_behavior

intermediate

Effect of Context API on component re-renders

In React Native, what happens to components consuming a Context when the Context value changes?

A No components re-render unless you manually call setState in them.

B Components re-render only if they are wrapped in React.memo.

C Only components that use the changed part of the Context value re-render automatically.

D All components consuming that Context re-render regardless of whether they use the changed value.

💡 Hint

Consider how Context propagates changes to consumers.

When Context value changes, all consuming components re-render because React cannot know which parts of the value changed.

❓ lifecycle

advanced

State update timing with useState and useEffect

Given this React Native code snippet, what will be the console output after the button is pressed once? code: """ const [count, setCount] = useState(0); useEffect(() => { console.log('Count changed:', count); }, [count]); const onPress = () => { setCount(count + 1); setCount(count + 1); }; """

A Count changed: 1

B Count changed: 2

C Count changed: 0

D Count changed: NaN

💡 Hint

Remember that state updates are asynchronous and may be batched.

Both setCount calls use the same stale count value (0), so the state updates to 1 only once. The effect logs 'Count changed: 1'.

❓ navigation

advanced

State persistence across React Navigation screens

In React Native using React Navigation, which approach ensures state persists when navigating back and forth between screens?

A Keep state only in local component useState hooks on each screen.

B Store state in a global context or state management library like Redux or Zustand.

C Reset state in useEffect cleanup when screen unmounts.

D Use React Navigation's useFocusEffect to reset state on screen focus.

💡 Hint

Think about where state lives when screens unmount and remount.

Local state in components resets when screens unmount. Global state or context persists across navigation.

🔧 Debug

expert

Identifying cause of stale state in React Native

Why does this React Native component always log the initial count value 0 when the button is pressed, despite updating state? code: """ const MyComponent = () => { const [count, setCount] = useState(0); const handlePress = () => { setTimeout(() => { console.log('Count is:', count); setCount(count + 1); }, 1000); }; return

A The count state is not initialized properly with useState.

B setTimeout delays state update causing React to ignore the setCount call.

C The handlePress closure captures the initial count value, so setTimeout logs stale count and increments from 0 every time.

D The Button component does not trigger onPress events correctly.

💡 Hint

Consider how closures capture variables in JavaScript functions.

The handlePress function closes over the initial count value 0, so the delayed callback always sees count as 0, causing stale logs and increments.

Practice

1. Which React Native state management method is best for simple, local component state?

easy

A. Redux

B. useState

C. Context API

D. MobX

Solution

1. Step 1: Understand local state needs

   Local state means data used only inside one component, like a toggle or input value.

2. Step 2: Match state method to simplicity

   useState is designed for simple, local state inside functional components.

3. Final Answer:

   useState -> Option B

4. Quick Check:

   Simple local state = useState [OK]

Hint: Simple local state? Use useState hook [OK]

Common Mistakes:

• Choosing Redux for simple local state
• Confusing Context API with local state
• Thinking MobX is simpler than useState

2. Which of the following is the correct syntax to declare a state variable using useState in React Native?

easy

A. state count = useState(0);

B. let count = useState(0);

C. var count, setCount = useState(0);

D. const [count, setCount] = useState(0);

Solution

1. Step 1: Recall useState syntax

   The correct syntax uses array destructuring: const [value, setter] = useState(initialValue);

2. Step 2: Check each option

   const [count, setCount] = useState(0); matches the correct syntax exactly.

3. Final Answer:

   const [count, setCount] = useState(0); -> Option D

4. Quick Check:

   useState syntax = const [value, setter] = useState(initial) [OK]

Hint: useState always returns [value, setter] array [OK]

Common Mistakes:

• Using let or var instead of const
• Not using array destructuring
• Trying to declare state with 'state' keyword

3. What will be the output of this React Native code snippet?

const [count, setCount] = useState(0);
setCount(count + 1);
setCount(count + 1);
console.log(count);

medium

A. 0

B. 1

C. 2

D. Error

Solution

1. Step 1: Understand state updates are asynchronous

   Calling setCount twice with count + 1 uses the same stale value of count (0), so both setCount calls set count to 1.

2. Step 2: Check console.log output

   console.log(count) runs before state updates complete, so it logs the initial value 0.

3. Final Answer:

   0 -> Option A

4. Quick Check:

   State updates async, console logs old value [OK]

Hint: State updates are async; console logs old value [OK]

Common Mistakes:

• Expecting count to be 2 immediately
• Thinking setCount updates synchronously
• Ignoring that console.log runs before update

4. Identify the error in this React Native state update code:

const [items, setItems] = useState([]);
function addItem(newItem) {
  items.push(newItem);
  setItems(items);
}

medium

A. Directly mutating state array before setItems

B. Using useState with an array is invalid

C. Missing return statement in addItem

D. setItems should be called without arguments

Solution

1. Step 1: Check how state is updated

   The code mutates the existing array with push, which is not allowed because state must be immutable.

2. Step 2: Understand correct update method

   Instead, create a new array copy with the new item and pass it to setItems.

3. Final Answer:

   Directly mutating state array before setItems -> Option A

4. Quick Check:

   State must be immutable; don't mutate arrays [OK]

Hint: Never mutate state directly; always create new objects [OK]

Common Mistakes:

• Mutating arrays or objects directly
• Thinking useState can't hold arrays
• Calling setItems with no arguments

5. You have a React Native app with multiple screens needing to share user login status. Which state management approach is best?

hard

A. Use useState in each screen separately

B. Use inline styles to store login state

C. Use React Context API to share login state globally

D. Use local variables in each screen

Solution

1. Step 1: Identify need for shared state

   Login status must be accessible across multiple screens, so state must be shared globally.

2. Step 2: Choose appropriate state management

   React Context API allows sharing state across components without prop drilling, ideal for global data like login status.

3. Final Answer:

   Use React Context API to share login state globally -> Option C

4. Quick Check:

   Shared state across screens = Context API [OK]

Hint: Share global state with Context API, not local useState [OK]

Common Mistakes:

• Using separate useState in each screen causing inconsistent state
• Trying to store state in local variables
• Confusing styles with state