State management comparison in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a state variable using React Native hooks.

React Native

const [count, [1]] = useState(0);

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

AsetCount

BgetCount

CcountSetter

DupdateCount

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong function name that does not start with 'set'.

Confusing the state variable with the update function.

The useState hook returns a pair: the current state and a function to update it. The convention is to name the update function starting with 'set'.

2fill in blank

medium

Complete the code to update the state variable when a button is pressed.

React Native

const increment = () => [1](prev => prev + 1);

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

Acount

BchangeCount

CupdateCount

DsetCount

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to update the state variable directly instead of using the update function.

Using the wrong function name.

To update the state, you call the update function returned by useState. Here, setCount is called with a function that increments the previous value.

3fill in blank

hard

Fix the error in the code to correctly use the useReducer hook for state management.

React Native

const [state, [1]] = useReducer(reducer, initialState);

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

Adispatch

BsetState

CupdateState

DchangeState

Attempts:

3 left

💡 Hint

Common Mistakes

Using setState instead of dispatch with useReducer.

Confusing useReducer with useState syntax.

When using useReducer, the second element is the dispatch function used to send actions to the reducer.

4fill in blank

hard

Fill both blanks to create a context provider and consume the context in a child component.

React Native

const MyContext = createContext();

function MyProvider({ children }) {
  const [value, [1]] = useState('Hello');
  return <MyContext.Provider value=[2]>{children}</MyContext.Provider>;
}

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

AsetValue

Bvalue

C{ value, setValue }

DupdateValue

Attempts:

3 left

💡 Hint

Common Mistakes

Passing only the state value without the setter function.

Using incorrect variable names.

The provider needs to pass the state and the update function as an object to allow consumers to read and update the context value.

5fill in blank

hard

Fill all three blanks to correctly use the useContext hook inside a functional component.

React Native

function MyComponent() {
  const context = useContext([1]);
  return <Text onPress={() => [2]('New Value')}>{context.[3]</Text>;
}

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

AMyContext

BsetValue

Cvalue

DOtherContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong context object in useContext.

Trying to update the state variable directly instead of using the setter.

Inside the component, useContext is called with the context object. Then you can use the setter function to update the value and display the current value.

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