Context vs Props

Context vs Props

When building a React application, you constantly have to decide how to pass data between components. The two primary methods are Props and Context.

Props (The Default Approach)

Props (short for properties) are the standard way to pass data down the component tree, from a parent to a direct child.

Pros of Props:

1. Explicit and Predictable: You can look at a component’s JSX and see exactly what data is flowing into it. This makes tracking data flow very easy.
2. Decoupled: A component that only relies on props is highly reusable. You can drop it anywhere in your app and just pass the necessary data.
3. Performance: Changing a prop only re-renders the component receiving it (and its children).

Cons of Props:

1. Prop Drilling: If you need to pass data from a high-level component to a deeply nested child, you have to pass it through every intermediate component. This clutters the code of components that don’t even care about the data.

Context (The Escape Hatch)

Context provides a way to “teleport” data directly to any component in the tree, bypassing intermediate components completely.

Pros of Context:

1. Solves Prop Drilling: You don’t need to pass props through intermediate components.
2. Global State: Perfect for data that is considered “global” to a tree (theme, user authentication, language).

Cons of Context:

1. Implicit Data Flow: It’s harder to see where a component is getting its data from just by looking at its parent’s JSX.
2. Coupling: A component that calls useContext is coupled to that specific context. It’s harder to reuse that component in a different app or a different part of the tree where that context doesn’t exist.
3. Performance Issues: When a Provider’s value changes, every component consuming that context re-renders. If abused for high-frequency data, it can severely degrade performance.

When to Use Which?

Always start with Props. Props are the core mental model of React.

If you find yourself passing the same prop through 3, 4, or 5 levels of components that don’t actually use the prop, it’s time to consider alternatives.

Before reaching for Context, consider Component Composition (passing JSX as children or other props).

// Prop Drilling Example
function App() {
  const user = { name: 'Alice' };
  return <Layout user={user} />;
}
function Layout({ user }) {
  // Layout doesn't care about 'user', it just passes it down
  return <Sidebar user={user} />; 
}

// Component Composition Example (Often better than Context!)
function App() {
  const user = { name: 'Alice' };
  // App passes the fully configured Sidebar as a prop to Layout
  return <Layout sidebar={<Sidebar user={user} />} />;
}
function Layout({ sidebar }) {
  return <div>{sidebar}</div>;
}

If component composition doesn’t solve the problem, and the data is genuinely needed by many components at different nesting levels (like a UI theme or User Session), then Context is the correct tool.

Interview Questions

Q: Should you always use Context instead of passing props?
A: Absolutely not. Context makes components much harder to reuse because they now implicitly depend on a specific Provider existing somewhere above them in the tree. If you are only passing data down one, two, or three levels, passing props (or using component composition) is much simpler, safer, and better for performance.