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.