What are provide and inject used for?

Question

IT Interview Practice · Accepted Answer

`provide`/`inject` let an **ancestor component supply data to any descendant**, no matter how deep, without passing props through every intermediate component. They solve **prop drilling**. ## The problem: prop drilling ```text App → Layout → Sidebar → Menu → MenuItem ``` If only `MenuItem` needs the `theme`, passing it as a prop through `Layout`, `Sidebar`, and `Menu` (which don't use it) is tedious and noisy. `provide`/`inject` skip the middle. ## Providing in an ancestor ```vue ``` ## Injecting in any descendant ```vue ``` ## Keep it reactive ```js // ✅ provide a ref/reactive so descendants see updates provide("theme", theme); // theme is a ref → reactive // ❌ provide("theme", theme.value) → passes a snapshot, not reactive ``` Provide the **reactive** object (the `ref`, not its `.value`) so when it changes, all injecting components update. ## Use a Symbol key in libraries ```js import { themeKey } from "./keys"; // export const themeKey = Symbol() provide(themeKey, theme); // avoids string-key collisions ``` ## provide/inject vs Pinia ```text provide/inject → pass data down a specific subtree (theme, form context, a service) Pinia → global, app-wide shared state (user, cart) usable anywhere ``` Use `provide`/`inject` for **dependency-injection within a subtree**; reach for Pinia when state is truly global or shared across unrelated parts of the app. ## Why it matters `provide`/`inject` eliminate prop drilling for data that many nested components share (themes, locale, form/context, plugin services). Knowing to provide reactive values (so updates propagate), use defaults/Symbol keys, and distinguish it from global state (Pinia) lets you pass shared context cleanly through deep component trees.

The problem: prop drilling

Providing in an ancestor

Injecting in any descendant

Keep it reactive

Use a Symbol key in libraries

provide/inject vs Pinia

Why it matters

Related questions