Why global state avoids prop drilling in React Native

Introduction

Global state helps share data easily across many parts of an app without passing it step-by-step through each screen or component.

When many components need the same data, like user info or theme settings.

When passing data through many layers feels complicated or messy.

When you want to update data in one place and see changes everywhere instantly.

Syntax

React Native

import React, { createContext, useContext, useState } from 'react';

const GlobalContext = createContext();

export function GlobalProvider({ children }) {
  const [value, setValue] = useState('Hello');
  return <GlobalContext.Provider value={{ value, setValue }}>
    {children}
  </GlobalContext.Provider>;
}

export function useGlobal() {
  return useContext(GlobalContext);
}

Create a context to hold global data.

Wrap your app with the provider to share data.

Examples

This creates a new context to hold global data.

React Native

const GlobalContext = createContext();

This provider shares the count state with all children components.

React Native

function GlobalProvider({ children }) {
  const [count, setCount] = useState(0);
  return <GlobalContext.Provider value={{ count, setCount }}>
    {children}
  </GlobalContext.Provider>;
}

Child component uses global state directly without props.

React Native

function Child() {
  const { count, setCount } = useGlobal();
  return <Button title={`Count: ${count}`} onPress={() => setCount(count + 1)} />;
}

Sample App

This app shows a number and a button. Pressing the button increases the number. Both components share the number using global state, so no props are needed.

React Native

import React, { createContext, useContext, useState } from 'react';
import { View, Text, Button } from 'react-native';

const GlobalContext = createContext();

function GlobalProvider({ children }) {
  const [count, setCount] = useState(0);
  return <GlobalContext.Provider value={{ count, setCount }}>
    {children}
  </GlobalContext.Provider>;
}

function DisplayCount() {
  const { count } = useContext(GlobalContext);
  return <Text accessibilityLabel="count-text" style={{ fontSize: 24, margin: 10 }}>Count: {count}</Text>;
}

function IncrementButton() {
  const { setCount } = useContext(GlobalContext);
  return <Button accessibilityLabel="increment-button" title="Increase" onPress={() => setCount(c => c + 1)} />;
}

export default function App() {
  return <GlobalProvider>
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <DisplayCount />
      <IncrementButton />
    </View>
  </GlobalProvider>;
}

Important Notes

Global state avoids the need to pass props through many layers, which is called prop drilling.

Use global state wisely; too much global data can make apps harder to understand.

React Context is a simple way to create global state in React Native.

Summary

Global state shares data directly with any component that needs it.

This avoids passing props through many components (prop drilling).

It makes code cleaner and easier to maintain when many parts use the same data.