React Course
React
/
Intermediate

Context vs Props

Definition

Props represent explicit, direct, one-to-one communication between components. Context represents implicit, broadcast, one-to-many communication across the component tree.

Explain Like I'm New

Props are like sending a text message directly to your friend. It is private, explicit, and easy to trace. Context is like making an announcement over a school PA system. Everyone in the building can hear it immediately without you having to find them, but if used too much, the school becomes chaotic and noisy.

Real World Example

Use Props for: The `label` on a specific button, the `imageUrl` on a profile picture, or the `items` in a shopping cart list. Use Context for: The active Theme (Dark/Light), the currently logged-in User Session, or the active Locale/Language (en-US).

Common Use Cases

  • •Props: High component reusability, strict data flow, isolated logic.
  • •Context: Global app state, avoiding Prop Drilling, ambient data.

Terminal Output

bash / terminal
// Conceptual comparison, no execution needed. console.log("Props are Explicit. Context is Implicit. Prefer Props until the pain of drilling outweighs the loss of component reusability.");

Interview Questions

basic

  • When should you use Props instead of Context?
  • When should you use Context instead of Props?

intermediate

  • Why does using Context make a component harder to reuse?
  • How does a Context Provider update its consumers?

advanced

  • What is the performance penalty of Context compared to Props?
  • How can you optimize Context to prevent unnecessary renders?

trick

  • Can a component receive data from both Props and Context at the same time?

Flash Cards

Question

Why does Context make a component harder to reuse?

Click to reveal answer
Answer

If a `<Button>` relies on `useContext(ThemeContext)`, you can never use that button in another project or another part of the app without ALSO wrapping it in a `ThemeContext.Provider`. It becomes tightly coupled to its environment. Props keep components pure and isolated.

Question

What is the performance penalty of Context?

Click to reveal answer
Answer

Whenever the `value` of a Provider changes, EVERY single component that calls `useContext` for that provider will re-render immediately. There is no built-in way to "bail out" of this render, unlike Props where you can use `React.memo`.

Question

Can you receive data from both at the same time?

Click to reveal answer
Answer

Yes! It is extremely common. A component might receive `text="Submit"` via Props, but receive the `theme` from Context.