State management comparison in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is local state in React Native?

Local state is data managed within a single component using hooks like useState. It affects only that component and its children.

beginner

What problem does Context API solve in React Native?

Context API helps share data across many components without passing props manually at every level, useful for global settings like themes or user info.

intermediate

How does Redux manage state differently than local state?

Redux stores all app state in a single global store. Components read state and dispatch actions to update it, making state predictable and easier to debug.

intermediate

What is a key advantage of using Recoil for state management?

Recoil allows fine-grained state management with atoms and selectors, enabling components to subscribe only to the state they need, improving performance.

beginner

When should you prefer local state over global state management?

Use local state when data is only relevant inside one component or a small part of the app to keep things simple and avoid unnecessary complexity.

Which state management method is best for sharing theme settings across many components?

A Redux

B Local state

C Context API

D Component props only

Context API is designed to share data like themes globally without prop drilling.

What is a main feature of Redux?

A State only inside one component

B Single global store with actions

C Automatic UI updates without actions

D No need to write reducers

Redux uses a single global store and actions to update state predictably.

Which hook is commonly used for local state in React Native?

A useState

B useEffect

C useContext

D useReducer

useState is the basic hook for managing local state.

Recoil state management uses what to represent pieces of state?

A Atoms

B Reducers

C Props

D Contexts

Recoil uses atoms to represent individual pieces of state.

When is it better to use local state instead of global state?

A When you want to use Redux

B When state is shared across many components

C When you want to avoid using hooks

D When state is only needed inside one component

Local state is simpler and best when data is only relevant inside one component.

Explain the differences between local state, Context API, and Redux in React Native.

Think about how and where the state is stored and shared.

Describe a scenario where using Recoil would be more beneficial than Redux or Context API.

Consider how Recoil manages atoms and selectors.

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