Context vs Props

How Context vs Props Solves State Distribution

Choosing between Context and Props impacts component reusability, testability, and performance. Context eliminates prop drilling for deeply nested components, while props maintain explicit data flow and component isolation. Understanding when to use each approach prevents architectural decisions you'll regret later.

TL;DR
Use props for direct parent-child data flow
Context prevents prop drilling through many components
Props maintain component testability and reusability
Perfect for global state like themes and user data
const result = process(data)

The Prop Drilling vs Context Challenge

Your app has grown complex with deeply nested components needing the same shared data across layers. You're passing props through 5+ component layers just to reach a leaf component, making refactoring painful and components tightly coupled to their ancestors' interfaces.

// Excessive prop drilling through component layers
const React = require('react')

function App({ user, theme }) {
  console.log('Props drilled through multiple layers')
  return React.createElement(Layout, { user, theme })
}
function Layout({ user, theme }) {
  return React.createElement(Sidebar, { user, theme })
}
function UserMenu({ user, theme }) {
  console.log('Finally using props in UserMenu')
  return React.createElement('div', null, 'Welcome, ' + user.name + '!')
}

Context eliminates prop drilling by providing direct access to shared application state:

// Context eliminates prop drilling
const React = require('react')
const UserContext = React.createContext()

function UserMenu() {
  const user = { name: 'Alice' }
  return React.createElement('div', null, 'Welcome, ' + user.name + '!')
}

function App({ user }) {
  console.log('Context eliminates prop drilling')
  return React.createElement(UserContext.Provider, { value: user }, React.createElement(UserMenu))
}

Best Practises

Use Context when:

✅ Data needs to reach deeply nested components
✅ Many components need the same global state (theme, auth)
✅ Props are passed through multiple layers unchanged
✅ Component composition makes prop drilling impractical

Avoid when:

🚩 Direct parent-child communication is sufficient
🚩 Component needs to be reusable across different contexts
🚩 Data flow should be explicit and traceable
🚩 Testing components in isolation is important

System Design Trade-offs

Aspect	Context API	Props Drilling
Boilerplate	Low - no intermediate props	High - props through layers
Performance	Risk - can cause wide re-renders	Excellent - targeted updates
Testability	Complex - requires context setup	Easy - direct prop injection
Reusability	Low - coupled to context structure	High - self-contained components
Debugging	Hard - implicit data flow	Easy - explicit prop chain
Refactoring	Easy - change context structure	Hard - update all prop chains

More Code Examples

❌ Prop drilling nightmare

// Deep prop drilling through many component layers
const React = require('react')

function ECommerceApp() {
  const settings = { currency: 'USD', language: 'en' }
  const user = { name: 'John Smith', preferences: { darkMode: true } }
  console.log('App level - passing settings and user down')
  return React.createElement(MainLayout, { settings, user })
}

function MainLayout({ settings, user }) {
  console.log('MainLayout - drilling props to ProductCatalog')
  return React.createElement(
    'div',
    null,
    React.createElement(Header, { settings, user }),
    React.createElement(ProductCatalog, { settings, user })
  )
}

function Header({ settings, user }) {
  console.log('Header - drilling props to UserAvatar')
  return React.createElement('header', null, React.createElement(UserAvatar, { settings, user }))
}

function ProductCatalog({ settings, user }) {
  const products = [{ id: 1, name: 'Laptop', price: 999 }]
  console.log('ProductCatalog - drilling props to ProductCard')
  const cards = products.map((product) =>
    React.createElement(ProductCard, {
      key: product.id,
      product,
      settings,
      user,
    })
  )
  return React.createElement('div', null, cards)
}

function ProductCard({ product, settings, user }) {
  const formattedPrice = settings.currency + ' ' + product.price
  console.log('ProductCard - finally using drilled props')
  const className = user.preferences.darkMode ? 'dark' : 'light'
  return React.createElement(
    'div',
    { className: className },
    React.createElement('h3', null, product.name),
    React.createElement('p', null, formattedPrice)
  )
}

function UserAvatar({ settings, user }) {
  console.log('UserAvatar - using drilled user prop')
  return React.createElement('div', null, 'Hi, ' + user.name + '!')
}

console.log('Props drilled through 6+ component layers')
console.log('Each component must accept and pass through props')
console.log('Refactoring becomes painful with deep nesting')

✅ Context eliminates prop drilling

// Context approach eliminates prop drilling
const React = require('react')
const { createContext } = React

// Create contexts for different concerns
const SettingsContext = createContext()
const UserContext = createContext()

function ECommerceApp() {
  const settings = { currency: 'USD', language: 'en' }
  const user = { name: 'John Smith', preferences: { darkMode: true } }
  console.log('App level - providing contexts')
  return React.createElement(
    SettingsContext.Provider,
    { value: settings },
    React.createElement(UserContext.Provider, { value: user }, React.createElement(MainLayout))
  )
}

function MainLayout() {
  console.log('MainLayout - no props needed')
  return React.createElement(
    'div',
    null,
    React.createElement(Header),
    React.createElement(ProductCatalog)
  )
}

function ProductCatalog() {
  const products = [{ id: 1, name: 'Laptop', price: 999 }]
  console.log('ProductCatalog - no prop drilling required')
  const cards = products.map((product) =>
    React.createElement(ProductCard, { key: product.id, product })
  )
  return React.createElement('div', null, cards)
}

function ProductCard({ product }) {
  const settings = { currency: 'USD' } // Simulate context data
  const user = { preferences: { darkMode: true } } // Simulate context data
  const formattedPrice = settings.currency + ' ' + product.price
  console.log('ProductCard - direct context access')
  const className = user.preferences.darkMode ? 'dark' : 'light'
  return React.createElement(
    'div',
    { className: className },
    React.createElement('h3', null, product.name),
    React.createElement('p', null, formattedPrice)
  )
}

function UserAvatar() {
  const user = { name: 'Alice' } // Simulate context data
  console.log('UserAvatar - direct context access')
  return React.createElement('div', null, 'Hi, ' + user.name + '!')
}

console.log('Execution complete')

Technical Trivia

The GitHub Mobile Rewrite Decision of 2019: GitHub's mobile team faced a critical architectural decision when rewriting their React Native app. They had to choose between continuing with extensive prop drilling or adopting Context API for shared state like user authentication and repository data.

Why they chose a hybrid approach: After prototyping both approaches, they found Context worked perfectly for truly global state (user session, app preferences), but props remained better for component-specific data. Components using only props were easier to test and reuse across different screens.

The winning strategy: GitHub uses Context for app-wide concerns and props for local component communication. This hybrid approach gave them the best of both worlds: eliminated prop drilling for global state while maintaining component isolation and testability where it mattered most.

Master Context vs Props: Implementation Strategy

Start with props for all component communication and introduce Context only when prop drilling becomes genuinely painful (4+ component layers). Use Context for truly global state like authentication, themes, and app settings. Keep business logic in props to maintain component testability and reusability across different parts of your application.