Why global state avoids prop drilling in React Native - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is prop drilling in React Native?

In React Native, what does the term prop drilling mean?

A Passing data through many nested components via props even if intermediate components don't need it

B Using global state management libraries like Redux or Context API

C Directly modifying the state of a child component from a parent

D Rendering components conditionally based on state

💡 Hint

Think about how data is passed down through component layers.

Prop drilling means passing props through many layers of components even if some layers don't use the data, just to reach a deeply nested component.

❓ ui_behavior

intermediate

How does global state avoid prop drilling?

Which behavior best explains how global state helps avoid prop drilling in React Native?

A Global state duplicates data in every component to avoid passing props

B Global state forces all components to receive props from their parents

C Global state allows components to access shared data directly without passing props through intermediate components

D Global state disables component re-rendering

💡 Hint

Think about how components get data from a shared place.

Global state stores data in one place accessible by any component, so you don't need to pass props down many layers.

❓ lifecycle

advanced

Effect of prop drilling on component updates

When prop drilling is used, what happens to intermediate components when the deeply nested child component's data changes?

A Intermediate components skip rendering automatically

B Only the child component re-renders, intermediate components stay the same

C The app crashes due to too many renders

D Intermediate components re-render even if they don't use the data

💡 Hint

Consider how React re-renders components when props change.

When props change, React re-renders the component receiving them and all its children in the tree, causing unnecessary renders in intermediate components.

❓ navigation

advanced

Global state and navigation props

In a React Native app using navigation, how does global state simplify passing data compared to prop drilling?

A Global state lets screens access shared data without passing it through navigation params

B Global state requires passing data through navigation params explicitly

C Global state disables navigation between screens

D Global state duplicates navigation props in every screen

💡 Hint

Think about how screens get data when using global state.

With global state, screens can read shared data directly without needing to pass it as navigation parameters, reducing complexity.

🔧 Debug

expert

Identifying prop drilling impact on app performance

You notice your React Native app slows down when updating a deeply nested component's data passed via props. What is the most likely cause?

A Global state is not updating correctly

B Prop drilling causes many intermediate components to re-render unnecessarily

C The deeply nested component is not receiving props

D Navigation props are missing

💡 Hint

Think about how prop changes affect component rendering.

Prop drilling causes many components to re-render when props change, which can slow down the app if many components update unnecessarily.

Practice

1. Why is using global state preferred over prop drilling in React Native apps?

easy

A. Because global state requires more code to pass data

B. Because prop drilling improves performance by passing props deeply

C. Because prop drilling avoids using any state management

D. Because global state allows direct data sharing without passing props through many components

Solution

1. Step 1: Understand prop drilling

   Prop drilling means passing data through many layers of components even if intermediate ones don't need it.

2. Step 2: Understand global state benefits

   Global state shares data directly with any component that needs it, avoiding unnecessary prop passing.

3. Final Answer:

   Because global state allows direct data sharing without passing props through many components -> Option D

4. Quick Check:

   Global state avoids prop drilling = C [OK]

Hint: Global state shares data directly, skipping intermediate props [OK]

Common Mistakes:

• Thinking prop drilling improves performance
• Believing global state requires more code
• Confusing prop drilling with avoiding state

2. Which of the following is the correct way to access global state using React Context in React Native?

easy

A. const value = useReducer(MyContext);

B. const value = useState(MyContext);

C. const value = useContext(MyContext);

D. const value = useEffect(MyContext);

Solution

1. Step 1: Recall React Context usage

   To access global state via React Context, useContext hook is used with the context object.

2. Step 2: Identify correct hook

   useState manages local state, useEffect manages side effects, useReducer manages complex state logic, but none access context directly.

3. Final Answer:

   const value = useContext(MyContext); -> Option C

4. Quick Check:

   Access context with useContext = D [OK]

Hint: Use useContext to read global state from context [OK]

Common Mistakes:

• Using useState instead of useContext for context
• Confusing useEffect with state access
• Trying to use useReducer directly for context

3. Given this React Native code snippet using global state, what will be the output when the button is pressed?

const CountContext = React.createContext(0);

function Display() {
  const count = React.useContext(CountContext);
  return {count};
}

function App() {
  const [count, setCount] = React.useState(0);
  return (
    
      
       setCount(count + 1)} />
    
  );
}

medium

A. The displayed number stays 0 always

B. The displayed number increases by 1 each button press

C. The app crashes due to missing context

D. The button does not respond to presses

Solution

1. Step 1: Understand context and state connection

   The count state is provided via CountContext.Provider and updated on button press.

2. Step 2: Trace button press effect

   Pressing the button calls setCount(count + 1), updating count and re-rendering Display with new value.

3. Final Answer:

   The displayed number increases by 1 each button press -> Option B

4. Quick Check:

   Context updates with state changes = B [OK]

Hint: State update triggers context value change and re-render [OK]

Common Mistakes:

• Assuming context value never changes
• Thinking button does not update state
• Believing app crashes without provider

4. Identify the bug in this React Native code that tries to use global state but still requires prop drilling:

const UserContext = React.createContext();

function Profile({ user }) {
  return {user.name};
}

function App() {
  const user = { name: 'Anna' };
  return (
    
      
    
  );
}

medium

A. Profile component should use useContext(UserContext) instead of props

B. UserContext.Provider is missing a value prop

C. User object is not defined

D. Profile component should be a class component

Solution

1. Step 1: Check how Profile receives data

   Profile expects a user prop but is rendered without props, causing undefined user.

2. Step 2: Use context to avoid prop drilling

   Profile should use useContext(UserContext) to get user directly from global state.

3. Final Answer:

   Profile component should use useContext(UserContext) instead of props -> Option A

4. Quick Check:

   Use context hook to avoid prop drilling = A [OK]

Hint: Use useContext inside components to get global state [OK]

Common Mistakes:

• Forgetting to use useContext in child components
• Assuming Provider needs no value prop
• Thinking class components are required

5. You have a React Native app with deeply nested components needing the same user data. Which approach best avoids prop drilling and keeps code clean?

hard

A. Use React Context to create a global user state and access it with useContext in any component

B. Pass user data as props through every nested component manually

C. Store user data in local component state of the top-level component only

D. Use multiple useState hooks in each nested component to hold user data

Solution

1. Step 1: Understand prop drilling problem

   Passing props through many nested components is tedious and error-prone.

2. Step 2: Use global state with React Context

   React Context allows sharing user data globally, so any component can access it directly without prop passing.

3. Final Answer:

   Use React Context to create a global user state and access it with useContext in any component -> Option A

4. Quick Check:

   Global state with context avoids prop drilling = A [OK]

Hint: React Context shares data globally, no prop passing needed [OK]

Common Mistakes:

• Passing props through every nested component
• Using local state only at top level
• Duplicating state in nested components