Why Consuming context in React? - Purpose & Use Cases

The Big Idea

Discover how to stop the endless prop passing and make your React app simpler!

The Scenario

Imagine you have a React app with many components, and you want to share user settings like theme or language across all of them.

You try passing these settings as props through every component layer manually.

The Problem

Passing props down many layers is tiring and error-prone.

If you add or change a setting, you must update every component in the chain.

This makes your code messy and hard to maintain.

The Solution

Consuming context lets components access shared data directly without passing props through every layer.

This keeps your code clean and makes updates easy.

Before vs After

✗ Before

function App() {
  return <Parent userTheme="dark" />;
}
function Parent(props) {
  return <Child userTheme={props.userTheme} />;
}
function Child(props) {
  return <div>Theme: {props.userTheme}</div>;
}

✓ After

const ThemeContext = React.createContext('light');
function App() {
  return <ThemeContext.Provider value="dark">
    <Child />
  </ThemeContext.Provider>;
}
function Child() {
  const theme = React.useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

What It Enables

You can share data easily across many components without messy prop passing.

Real Life Example

A user changes the app theme in settings, and all parts of the app update instantly without extra code.

Key Takeaways

Passing props through many layers is hard and error-prone.

Consuming context lets components access shared data directly.

This makes your React code cleaner and easier to maintain.