Why global state avoids prop drilling in React Native - Why It Works This Way

Overview - Why global state avoids prop drilling

What is it?

In React Native, global state is a way to store data that many parts of an app can use without passing it through many layers of components. Prop drilling happens when you pass data step-by-step through components that don't need it, just to reach the ones that do. Global state solves this by letting components access shared data directly. This makes the app easier to build and change.

Why it matters

Without global state, developers must pass data through many components, which makes code long, confusing, and hard to fix. This slows down building apps and causes bugs when data is changed in one place but not updated everywhere. Global state keeps data in one place, so all parts of the app see the same information instantly. This improves app speed, reliability, and developer happiness.

Where it fits

Before learning this, you should understand React Native basics like components and props. After this, you can learn about specific global state tools like Redux or Context API. Later, you might explore advanced state management patterns and performance optimization.

Mental Model

Core Idea

Global state lets components share data directly, avoiding the need to pass it through many layers of components that don't use it.

Think of it like...

Imagine you have a family message board in the kitchen where everyone can see notes. Without it, you’d have to tell a message from one person to another through several family members until it reaches the right person. The message board avoids this long chain by showing the message to everyone at once.

App Root
├─ Component A
│  ├─ Component B
│  │  └─ Component C (needs data)
│  └─ Component D
└─ Global State Store

Without global state:
Data flows: Root → A → B → C

With global state:
Component C reads data directly from Global State Store

Build-Up - 6 Steps

1

Foundation

Understanding Props and Data Flow

Concept: Props are how React Native components receive data from their parents.

In React Native, components get data through props. For example, a parent component passes a value to a child like . The child uses this value to show or work with data. This is a one-way flow from parent to child.

Result

You can pass data down the component tree, and children can use it to render UI or logic.

Knowing props is key because prop drilling happens when you pass props through many components that don't need them.

2

Foundation

What is Prop Drilling?

Concept: Prop drilling is passing data through components that don't use it, just to reach deeper components.

Imagine you have a deep component tree: Root → A → B → C. If C needs data, Root passes it to A, A passes to B, and B passes to C. A and B don't use the data but must pass it along. This is prop drilling.

Result

Code becomes long and hard to read because many components handle data they don't need.

Understanding prop drilling shows why it can make apps complex and hard to maintain.

3

Intermediate

Introducing Global State Concept

Concept: Global state stores data in one place accessible by any component without passing props.

Instead of passing data through many components, global state keeps data in a shared store. Components that need data read it directly from this store. For example, React's Context API or Redux can hold global state.

Result

Components can get data directly, skipping intermediate components that don't need it.

Knowing global state helps avoid unnecessary prop passing and simplifies data sharing.

4

Intermediate

How Global State Avoids Prop Drilling

🤔Before reading on: do you think global state removes the need to pass any props at all, or just reduces some prop passing? Commit to your answer.

Concept: Global state lets components access shared data directly, so props don't need to be passed through unrelated components.

When using global state, components subscribe to the shared data store. They get updates automatically when data changes. This means you don't pass props through every parent component. Only components that need data read it from global state.

Result

The app code is cleaner, easier to read, and less error-prone because data flows directly to where it's needed.

Understanding this direct access clarifies why global state is a powerful tool for managing app data.

5

Advanced

Trade-offs of Using Global State

🤔Before reading on: do you think global state always improves app performance or can it sometimes cause issues? Commit to your answer.

Concept: Global state simplifies data flow but can cause performance issues if not managed carefully.

When many components read from global state, any change can cause many components to re-render, slowing the app. Also, global state can make debugging harder if data changes unexpectedly. Developers use techniques like memoization and selective subscriptions to manage this.

Result

You get simpler data flow but must balance performance and complexity.

Knowing these trade-offs helps you decide when and how to use global state effectively.

6

Expert

Advanced Patterns to Optimize Global State

🤔Before reading on: do you think splitting global state into smaller parts helps performance or makes it worse? Commit to your answer.

Concept: Splitting global state and using selectors or hooks can optimize performance and maintainability.

Experts divide global state into smaller slices so components subscribe only to needed parts. Using selectors or hooks, components re-render only when their slice changes. This reduces unnecessary updates and keeps the app fast. Tools like Redux Toolkit and React Query support these patterns.

Result

Apps remain fast and scalable even with complex global state.

Understanding these patterns unlocks professional-level app performance and maintainability.

Under the Hood

Global state works by storing data in a central place, often using JavaScript objects or libraries like Redux. Components subscribe to this store and listen for changes. When data updates, the store notifies subscribed components, triggering re-rendering with new data. This bypasses the normal parent-to-child prop passing, allowing direct access.

Why designed this way?

Global state was designed to solve the problem of deeply nested components needing shared data. Passing props through many layers was error-prone and tedious. Centralizing data simplifies updates and sharing. Early React lacked built-in global state, so libraries like Redux emerged to fill this gap with predictable state management.

┌───────────────┐
│ Global State  │
│   Store       │
└──────┬────────┘
       │
 ┌─────▼─────┐   ┌─────▼─────┐   ┌─────▼─────┐
 │Component A│   │Component B│   │Component C│
 │ (subscribes│  │ (subscribes│  │ (subscribes│
 │  to store)│  │  to store) │  │  to store) │
 └───────────┘   └───────────┘   └───────────┘

Myth Busters - 3 Common Misconceptions

Quick: Does global state mean you never use props again? Commit yes or no.

Common Belief: Global state replaces all props, so you never pass props again.

Reality: Global state reduces prop drilling but you still use props for local data and component configuration.

Why it matters: Thinking global state replaces all props leads to overusing global state, making apps harder to understand and maintain.

Quick: Does using global state always improve app speed? Commit yes or no.

Common Belief: Global state always makes apps faster by avoiding prop drilling.

Reality: Global state can cause many components to re-render on data changes, potentially slowing the app if not optimized.

Why it matters: Ignoring performance costs can cause slow apps and poor user experience.

Quick: Is global state the only way to share data in React Native? Commit yes or no.

Common Belief: Global state is the only way to share data across components.

Reality: There are other ways like passing props, using Context API, or local component state depending on needs.

Why it matters: Believing this limits design choices and can lead to overcomplicated solutions.

Expert Zone

1

Global state updates can be batched to reduce re-renders, but improper batching causes subtle bugs.

2

Using immutable data structures in global state helps detect changes efficiently and prevents accidental mutations.

3

Middleware in global state libraries can intercept actions to add logging, error handling, or async behavior, enhancing control.

When NOT to use

Avoid global state for simple or isolated data that only one or two components use; local state or props are simpler and more efficient. Also, for very large apps, consider domain-specific state management or server state libraries like React Query.

Production Patterns

In real apps, global state is often combined with local state. Developers use selectors and memoization to optimize performance. Middleware handles side effects like API calls. Code is organized by feature slices to keep state manageable.

Connections

Observer Pattern

Global state uses the observer pattern where components subscribe to changes.

Understanding observer pattern helps grasp how components react to state changes automatically.

Database Indexing

Both global state and database indexing optimize access to needed data efficiently.

Knowing indexing shows why splitting global state into slices improves performance like targeted queries.

Supply Chain Management

Global state centralizes data flow like a warehouse managing inventory for many stores.

Seeing global state as a central hub clarifies why it reduces redundant data passing and errors.

Common Pitfalls

#1 Passing global state data through many components as props anyway.

Wrong approach:

function Parent({ data }) {
return ;
}
function Child({ data }) {
return ;
}
function GrandChild({ data }) {
return {data};
}

Correct approach:

const DataContext = React.createContext();
function Parent() {
const data = useGlobalState();
return ;
}
function Child() {
return ;
}
function GrandChild() {
const data = React.useContext(DataContext);
return {data};
}

Root cause:

Not realizing global state allows direct access, so props are passed unnecessarily.

#2 Updating global state causes entire app to re-render.

Wrong approach:

const [state, setState] = useGlobalState();
setState(newState); // triggers all components to re-render

Correct approach:

Use selectors or memoization to subscribe only to needed parts:
const data = useSelector(state => state.part);
// only components using 'part' re-render

Root cause:

Not optimizing subscriptions leads to performance issues.

#3 Storing all app data in global state, including temporary UI states.

Wrong approach:

const [modalOpen, setModalOpen] = useGlobalState(); // modal open state in global store

Correct approach:

Use local component state for UI states:
const [modalOpen, setModalOpen] = React.useState(false);

Root cause:

Misunderstanding which data belongs in global state versus local state.

Key Takeaways

Global state centralizes shared data so components can access it directly without passing props through many layers.

Prop drilling makes code complex and hard to maintain by forcing data through components that don't need it.

Using global state improves code clarity and reduces bugs but requires careful management to avoid performance issues.

Advanced patterns like splitting state and selective subscriptions optimize app speed and scalability.

Knowing when to use global state versus local state or props is key to building clean, efficient React Native apps.

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