In the React world, all dependency injections are powered by a createContext method, which you then Provide to your child components. You consume the provided data from those child components with a useContext hook.

import { createContext, useContext } from "react";// We start by creating a context nameconst HelloMessageContext = createContext();function Parent() {	return (		// Then create a provider for this context		<HelloMessageContext.Provider value={"Hello, world!"}>			<Child />		</HelloMessageContext.Provider>	);}function Child() {	// Later, we use `useContext` to consume the value from dependency injection	const helloMessage = useContext(HelloMessageContext);	return <p>{helloMessage}</p>;}

import { createRoot } from "react-dom/client";import { createContext, useContext } from "react";// We start by creating a context nameconst HelloMessageContext = createContext();function Parent() {	return (		// Then create a provider for this context		<HelloMessageContext.Provider value={"Hello, world!"}>			<Child />		</HelloMessageContext.Provider>	);}function Child() {	// Later, we use `useContext` to consume the value from dependency injection	const helloMessage = useContext(HelloMessageContext);	return <p>{helloMessage}</p>;}createRoot(document.getElementById("root")).render(<Parent />);

While React and Vue both have minimal APIs to handle dependency injection, Angular's dependency injection API is simultaneously more complex and powerful.

In Angular, it all starts with an InjectionToken of some kind. We'll start by importing Angular InjectionToken API and creating a new token we can use later.

import { InjectionToken } from "@angular/core";const WELCOME_MESSAGE_TOKEN = new InjectionToken<string>("WELCOME_MESSAGE");

We'll then use this token to create a provider that we pass to a component's providers list:

@Component({	selector: "app-root",	changeDetection: ChangeDetectionStrategy.OnPush,	imports: [ChildComponent],	template: `<child-comp />`,	providers: [{ provide: WELCOME_MESSAGE_TOKEN, useValue: "Hello, world!" }],})class AppComponent {}

This API uses useValue to provide the value associated with the token we pass.

Finally, we use an inject function in our component class to tell Angular, "We want this value in our component."

import { inject } from "@angular/core";@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<p>{{ welcomeMsg }}</p>`,})class ChildComponent {	welcomeMsg: string = inject(WELCOME_MESSAGE_TOKEN);	constructor() {		console.log(this.welcomeMsg);	}}

import { bootstrapApplication } from "@angular/platform-browser";import {	InjectionToken,	Component,	inject,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";const WELCOME_MESSAGE_TOKEN = new InjectionToken<string>("WELCOME_MESSAGE");@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<p>{{ welcomeMsg }}</p>`,})class ChildComponent {	welcomeMsg: string = inject(WELCOME_MESSAGE_TOKEN);	constructor() {		console.log(this.welcomeMsg);	}}@Component({	selector: "app-root",	imports: [ChildComponent],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<child-comp />`,	providers: [{ provide: WELCOME_MESSAGE_TOKEN, useValue: "Hello, world!" }],})class AppComponent {}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

Vue's dependency injection API only has two parts to it:

1. A provide method is used to provide values from the parent component.
2. An inject method is used to get the provided values in the child component.

<!-- Parent.vue --><script setup>import { provide } from "vue";import Child from "./Child.vue";provide("WELCOME_MESSAGE", "Hello, world!");</script><template>	<Child /></template>

<!-- Child.vue --><script setup>import { inject } from "vue";const welcomeMsg = inject("WELCOME_MESSAGE");</script><template>	<p>{{ welcomeMsg }}</p></template>

<!-- Parent.vue --><script setup>import { provide } from "vue";import Child from "./Child.vue";provide("WELCOME_MESSAGE", "Hello, world!");</script><template>	<Child /></template>

As we mentioned before, all of React's dependency injection logic uses createContext, Provider, and useContext. As such, to provide an object is a minimal change from before, done by changing the value we pass to our provider:

const HelloMessageContext = createContext();const Child = () => {	const helloMessage = useContext(HelloMessageContext);	return <p>{helloMessage.message}</p>;};const Parent = () => {	const helloMessageObject = { message: "Hello, world!" };	return (		<HelloMessageContext.Provider value={helloMessageObject}>			<Child />		</HelloMessageContext.Provider>	);};

import { createRoot } from "react-dom/client";import { createContext, useContext } from "react";const HelloMessageContext = createContext();const Child = () => {	const helloMessage = useContext(HelloMessageContext);	return <p>{helloMessage.message}</p>;};const Parent = () => {	const helloMessageObject = { message: "Hello, world!" };	return (		<HelloMessageContext.Provider value={helloMessageObject}>			<Child />		</HelloMessageContext.Provider>	);};createRoot(document.getElementById("root")).render(<Parent />);

Because Angular's useValue accepts any arbitrary value, we can pass it an object to move away from a string injection:

@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<p>{{ welcomeMsg.message }}</p>`,})class ChildComponent {	welcomeMsg = inject(WELCOME_MESSAGE_TOKEN);}@Component({	selector: "app-root",	changeDetection: ChangeDetectionStrategy.OnPush,	imports: [ChildComponent],	template: `<child-comp />`,	providers: [		{ provide: WELCOME_MESSAGE_TOKEN, useValue: { message: "Hello, world!" } },	],})class AppComponent {}

import { bootstrapApplication } from "@angular/platform-browser";import {	InjectionToken,	Component,	inject,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";const WELCOME_MESSAGE_TOKEN = new InjectionToken<{ message: string }>(	"WELCOME_MESSAGE",);@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<p>{{ welcomeMsg.message }}</p>`,})class ChildComponent {	welcomeMsg = inject(WELCOME_MESSAGE_TOKEN);}@Component({	selector: "app-root",	imports: [ChildComponent],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<child-comp />`,	providers: [		{ provide: WELCOME_MESSAGE_TOKEN, useValue: { message: "Hello, world!" } },	],})class AppComponent {}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

While this functions, it's not very clean. In particular, some headaches present with this method include:

• Duplicative TypeScript typings between inject usage and useValue providing
  • Mismatches can cause undefined bugs intentionally

Luckily for us, Angular provides a better solution for this problem than useValue and InjectionToken.

Instead, let's create a class that we mark with an @Injectable decorator:

import { Injectable } from "@angular/core";@Injectable()class InjectedValue {	message = "Hello, world";}

Here, we're telling Angular to treat our InjectedValue class as a InjectionToken that we can use by name in our providers.

@Component({	selector: "app-root",	changeDetection: ChangeDetectionStrategy.OnPush,	imports: [ChildComponent],	providers: [InjectedValue],	template: `<child-comp />`,})class AppComponent {}

Now that our InjectedValue is a known type, we can remove our explicit type declaration to our consuming inject function in ChildComponent

@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<div>{{ injectedValue.message }}</div>`,})class ChildComponent {	injectedValue = inject(InjectedValue);	constructor() {		console.log(this.injectedValue);	}}

Much cleaner!

import { bootstrapApplication } from "@angular/platform-browser";import {	Injectable,	Component,	inject,	OnInit,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Injectable()class InjectedValue {	message = "Hello, world";}@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<div>{{ injectedValue.message }}</div>`,})class ChildComponent {	injectedValue = inject(InjectedValue);	constructor() {		console.log(this.injectedValue);	}}@Component({	selector: "app-root",	imports: [ChildComponent],	providers: [InjectedValue],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<child-comp />`,})class AppComponent {}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

Like React, Vue's simple dependency injection API means that we only need to change our provide value to an object, and we're off to the races!

<!-- Parent.vue --><script setup>import { provide } from "vue";import Child from "./Child.vue";const welcomeObj = { message: "Hello, world!" };provide("WELCOME_MESSAGE", welcomeObj);</script><template>	<Child /></template>

<!-- Child.vue --><script setup>import { inject } from "vue";const welcomeMsgObj = inject("WELCOME_MESSAGE");</script><template>	<p>{{ welcomeMsgObj.message }}</p></template>

<!-- Parent.vue --><script setup>import { provide } from "vue";import Child from "./Child.vue";const welcomeObj = { message: "Hello, world!" };provide("WELCOME_MESSAGE", welcomeObj);</script><template>	<Child /></template>

Because our Provider can pass down values of any kind, we can combine this with useState to allow React to update the values for children.

const HelloMessageContext = createContext();const Child = () => {	const helloMessage = useContext(HelloMessageContext);	return <p>{helloMessage}</p>;};const Parent = () => {	const [message, setMessage] = useState("Initial value");	return (		<HelloMessageContext.Provider value={message}>			<Child />			<button onClick={() => setMessage("Updated value")}>				Update the message			</button>		</HelloMessageContext.Provider>	);};

import { createRoot } from "react-dom/client";import { createContext, useContext, useState } from "react";const HelloMessageContext = createContext();const Child = () => {	const helloMessage = useContext(HelloMessageContext);	return <p>{helloMessage}</p>;};const Parent = () => {	const [message, setMessage] = useState("Initial value");	return (		<HelloMessageContext.Provider value={message}>			<Child />			<button onClick={() => setMessage("Updated value")}>				Update the message			</button>		</HelloMessageContext.Provider>	);};createRoot(document.getElementById("root")).render(<Parent />);

When we update the message value, it will trigger a re-render on the Child component and, in turn, update the displayed message.

Because we've marked our InjectedValue class as an Injectable, we can have the parent component request access in the constructor to mutate the class instance.

@Injectable()class InjectedValue {	message = signal("Initial value");}@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<p>{{ injectedValue.message() }}</p>`,})class ChildComponent {	injectedValue = inject(InjectedValue);}@Component({	selector: "app-root",	changeDetection: ChangeDetectionStrategy.OnPush,	imports: [ChildComponent],	providers: [InjectedValue],	template: `		<child-comp />		<button (click)="updateMessage()">Update the message</button>	`,})class AppComponent {	// We can access the `injectedValue` from the same component we provide it from	injectedValue = inject(InjectedValue);	updateMessage() {		this.injectedValue.message.set("Updated value");	}}

import { bootstrapApplication } from "@angular/platform-browser";import {	Injectable,	Component,	inject,	signal,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Injectable()class InjectedValue {	message = signal("Initial value");}@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<p>{{ injectedValue.message() }}</p>`,})class ChildComponent {	injectedValue = inject(InjectedValue);}@Component({	selector: "app-root",	imports: [ChildComponent],	providers: [InjectedValue],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<child-comp />		<button (click)="updateMessage()">Update the message</button>	`,})class AppComponent {	// We can access the `injectedValue` from the same component we provide it from	injectedValue = inject(InjectedValue);	updateMessage() {		this.injectedValue.message.set("Updated value");	}}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

Vue's minimal API surface allows us to compose ref and provide usage to provide values that we can change after injection.

<!-- Parent.vue --><script setup>import { provide, ref } from "vue";import Child from "./Child.vue";const welcomeMessage = ref("Initial value");provide("WELCOME_MESSAGE", welcomeMessage);function updateMessage() {	welcomeMessage.value = "Updated value";}</script><template>	<Child />	<button @click="updateMessage()">Update the message</button></template>

<!-- Child.vue --><script setup>import { inject } from "vue";// Worth mentioning, `welcomeMessage` is now _not_ a string, but rather a `ref`// If you needed to use `welcomeMessage` inside of `<script setup>`, you'd// need to use `.value`const welcomeMessage = inject("WELCOME_MESSAGE");</script><template>	<p>{{ welcomeMessage }}</p></template>

<!-- Parent.vue --><script setup>import { provide, ref } from "vue";import Child from "./Child.vue";const welcomeMessage = ref("Initial value");provide("WELCOME_MESSAGE", welcomeMessage);function updateMessage() {	welcomeMessage.value = "Updated value";}</script><template>	<Child />	<button @click="updateMessage()">Update the message</button></template>

Previously, we used the ability to use useState in our Provider to handle data changes from the parent provider. Continuing on this pattern, we'll utilize useState once again to handle changes in a child component.

This works because React's useContext enables us to pass data of any kind, functions included. This means that we can pass both the getter and setter functions of useState, like so:

const HelloMessageContext = createContext();function Parent() {	const [message, setMessage] = useState("Initial value");	// We can pass both the setter and getter	const providedValue = { message, setMessage };	return (		<HelloMessageContext.Provider value={providedValue}>			<Child />		</HelloMessageContext.Provider>	);}function Child() {	// And later, access them both as if they were local to the component	const { message, setMessage } = useContext(HelloMessageContext);	return (		<>			<p>{message}</p>			<button onClick={() => setMessage("Updated value")}>				Update the message			</button>		</>	);}

import { createRoot } from "react-dom/client";import { createContext, useContext, useState } from "react";const HelloMessageContext = createContext();function Parent() {	const [message, setMessage] = useState("Initial value");	// We can pass both the setter and getter	const providedValue = { message, setMessage };	return (		<HelloMessageContext.Provider value={providedValue}>			<Child />		</HelloMessageContext.Provider>	);}function Child() {	// And later, access them both as if they were local to the component	const { message, setMessage } = useContext(HelloMessageContext);	return (		<>			<p>{message}</p>			<button onClick={() => setMessage("Updated value")}>				Update the message			</button>		</>	);}createRoot(document.getElementById("root")).render(<Parent />);

Using a Reducer Pattern

Despite useState and useContext making a powerful combination for data passing and updating in dependency injection, it's far from a perfect solution when dealing with large data sets.

For example, what happens if we want to implement a counter that includes an increment and decrement function?

We could pass each individual function through the Provider:

function App() {	const [count, setCount] = useState(0);	const increment = () => {		setCount(count + 1);	};	const decrement = () => {		setCount(count - 1);	};	const set = (val) => {		setCount(val);	};	const providedValue = { count, increment, decrement, set };	return (		<CounterContext.Provider value={providedValue}>			<Child />		</CounterContext.Provider>	);}

import { createRoot } from "react-dom/client";import { createContext, useContext, useState } from "react";const CounterContext = createContext();function App() {	const [count, setCount] = useState(0);	const increment = () => {		setCount(count + 1);	};	const decrement = () => {		setCount(count - 1);	};	const set = (val) => {		setCount(val);	};	const providedValue = { count, increment, decrement, set };	return (		<CounterContext.Provider value={providedValue}>			<Child />		</CounterContext.Provider>	);}function Child() {	const { count, increment, decrement, set } = useContext(CounterContext);	return (		<>			<p>Count is: {count}</p>			<button onClick={increment}>Increment</button>			<button onClick={decrement}>Decrement</button>			<button onClick={() => set(0)}>Set to zero</button>		</>	);}createRoot(document.getElementById("root")).render(<App />);

But doing so creates a substantial amount of noise: each function has a dedicated variable and needs to be passed independently for the useContext to work as intended.

This is where useReducer might come into play. Let's take a step back for a moment and remove the useContext method.

A "reducer" pattern involves a list of actions that the user can take. These actions are provided the current state value, which will be updated based on the returned value from the reducer.

Let's take a look at the most basic version of a reducer that can only count up from 0:

import { useReducer } from "react";const initialState = { count: 0 };function reducer(state, action) {	return { count: state.count + 1 };}function App() {	const [state, dispatch] = useReducer(reducer, initialState);	return (		<>			<p>{state.count}</p>			<button onClick={() => dispatch()}>Add one</button>		</>	);}

import { createRoot } from "react-dom/client";import { useReducer } from "react";const initialState = { count: 0 };function reducer(state, action) {	return { count: state.count + 1 };}function App() {	const [state, dispatch] = useReducer(reducer, initialState);	return (		<>			<p>{state.count}</p>			<button onClick={() => dispatch()}>Add one</button>		</>	);}createRoot(document.getElementById("root")).render(<App />);

Whenever dispatch is called, it will run the reducer with no arguments for action, and React will automatically pass state for us. Then, when we return inside of the reducer, React will automatically keep track of the returned value as the new state value.

However, this isn't particularly useful and seems like more boilerplate than needed for what's effectively a simple useState. To make useReducer more worthwhile, we need to add more actions.

For example, we'll have an increment and decrement action that will add one and remove one from the state, respectively.

const initialState = { count: 0 };function reducer(state, action) {	switch (action.type) {		case "increment":			return { count: state.count + 1 };		case "decrement":			return { count: state.count - 1 };		default:			return state;	}}function App() {	const [state, dispatch] = useReducer(reducer, initialState);	return (		<>			<p>{state.count}</p>			<button onClick={() => dispatch({ type: "increment" })}>Add one</button>			<button onClick={() => dispatch({ type: "decrement" })}>				Remove one			</button>		</>	);}

import { createRoot } from "react-dom/client";import { useReducer } from "react";const initialState = { count: 0 };function reducer(state, action) {	switch (action.type) {		case "increment":			return { count: state.count + 1 };		case "decrement":			return { count: state.count - 1 };		default:			return state;	}}function App() {	const [state, dispatch] = useReducer(reducer, initialState);	return (		<>			<p>{state.count}</p>			<button onClick={() => dispatch({ type: "increment" })}>Add one</button>			<button onClick={() => dispatch({ type: "decrement" })}>				Remove one			</button>		</>	);}createRoot(document.getElementById("root")).render(<App />);

Here, we can pass a type object as a parameter of reducer's action, run a switch/case over it, and return relevant data changes as needed.

But that's not all we can do with a reducer! We can also pass in what's often called a payload to set raw data to our state as well:

const initialState = { count: 0 };function reducer(state, action) {	switch (action.type) {		case "increment":			return { count: state.count + 1 };		case "decrement":			return { count: state.count - 1 };		case "set":			return { count: action.payload };		default:			return state;	}}function App() {	const [state, dispatch] = useReducer(reducer, initialState);	return (		<>			<p>{state.count}</p>			<button onClick={() => dispatch({ type: "increment" })}>Add one</button>			<button onClick={() => dispatch({ type: "decrement" })}>				Remove one			</button>			<button onClick={() => dispatch({ type: "set", payload: 0 })}>				Set to zero			</button>		</>	);}

import { createRoot } from "react-dom/client";import { useReducer } from "react";const initialState = { count: 0 };function reducer(state, action) {	switch (action.type) {		case "increment":			return { count: state.count + 1 };		case "decrement":			return { count: state.count - 1 };		case "set":			return { count: action.payload };		default:			return state;	}}function App() {	const [state, dispatch] = useReducer(reducer, initialState);	return (		<>			<p>{state.count}</p>			<button onClick={() => dispatch({ type: "increment" })}>Add one</button>			<button onClick={() => dispatch({ type: "decrement" })}>				Remove one			</button>			<button onClick={() => dispatch({ type: "set", payload: 0 })}>				Set to zero			</button>		</>	);}createRoot(document.getElementById("root")).render(<App />);

It's worth mentioning that the reducer pattern is not unique to React. That said, React is unique in that it has a built-in method to build reducers, unlike many other frameworks.

Reducer Patterns within Contexts

Just like we were able to pass the setValue function from useState, we can pass both state and dispatch using our context's Provide and utilize useContext to inject those values into our child components.

const CounterContext = createContext();const initialState = { count: 0 };function reducer(state, action) {	switch (action.type) {		case "increment":			return { count: state.count + 1 };		case "decrement":			return { count: state.count - 1 };		case "set":			return { count: action.payload };		default:			return state;	}}function Parent() {	const [state, dispatch] = useReducer(reducer, initialState);	const providedValue = { state, dispatch };	return (		<CounterContext.Provider value={providedValue}>			<Child />		</CounterContext.Provider>	);}function Child() {	const { state, dispatch } = useContext(CounterContext);	return (		<>			<p>{state.count}</p>			<button onClick={() => dispatch({ type: "increment" })}>Add one</button>			<button onClick={() => dispatch({ type: "decrement" })}>				Remove one			</button>			<button onClick={() => dispatch({ type: "set", payload: 0 })}>				Set to zero			</button>		</>	);}

import { createRoot } from "react-dom/client";import { createContext, useReducer, useContext } from "react";const CounterContext = createContext();const initialState = { count: 0 };function reducer(state, action) {	switch (action.type) {		case "increment":			return { count: state.count + 1 };		case "decrement":			return { count: state.count - 1 };		case "set":			return { count: action.payload };		default:			return state;	}}function Parent() {	const [state, dispatch] = useReducer(reducer, initialState);	const providedValue = { state, dispatch };	return (		<CounterContext.Provider value={providedValue}>			<Child />		</CounterContext.Provider>	);}function Child() {	const { state, dispatch } = useContext(CounterContext);	return (		<>			<p>{state.count}</p>			<button onClick={() => dispatch({ type: "increment" })}>Add one</button>			<button onClick={() => dispatch({ type: "decrement" })}>				Remove one			</button>			<button onClick={() => dispatch({ type: "set", payload: 0 })}>				Set to zero			</button>		</>	);}createRoot(document.getElementById("root")).render(<Parent />);

Because we can inject a whole class instance into a child component, we can use methods in said class to mutate data of the injected class instance.

@Injectable()class InjectedValue {	message = signal("Hello, world");	// `this` is referring to the `InjectedValue` instance	changeMessage(val: string) {		this.message.set(val);	}}@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<div>{{ injectedValue.message }}</div>		<button (click)="changeMessage()">Change message</button>	`,})class ChildComponent {	injectedValue = inject(InjectedValue);	changeMessage() {		// This will update the value of the class, and		// re-render the component to reflect the new value		this.injectedValue.changeMessage("Updated value");	}}@Component({	selector: "app-root",	changeDetection: ChangeDetectionStrategy.OnPush,	imports: [ChildComponent],	providers: [InjectedValue],	template: `<child-comp />`,})class ParentComponent {}

import { bootstrapApplication } from "@angular/platform-browser";import {	Injectable,	Component,	inject,	signal,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Injectable()class InjectedValue {	message = signal("Hello, world");	// `this` is referring to the `InjectedValue` instance	changeMessage(val: string) {		this.message.set(val);	}}@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<div>{{ injectedValue.message() }}</div>		<button (click)="changeMessage()">Change message</button>	`,})class ChildComponent {	injectedValue = inject(InjectedValue);	changeMessage() {		// This will update the value of the class, and		// re-render the component to reflect the new value		this.injectedValue.changeMessage("Updated value");	}}@Component({	selector: "app-root",	imports: [ChildComponent],	providers: [InjectedValue],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<child-comp />`,})class ParentComponent {}bootstrapApplication(ParentComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

In our previous example, we used provide to inject a ref into the child component. Because of Vue's reactivity system, we can use this ref to change the .value of the ref in the child to modify the value injected across the app.

<!-- Parent.vue --><script setup>import { provide, ref } from "vue";import Child from "./Child.vue";const welcomeMessage = ref("Initial value");provide("WELCOME_MESSAGE", welcomeMessage);</script><template>	<Child /></template>

<!-- Child.vue --><script setup>import { inject } from "vue";const welcomeMessage = inject("WELCOME_MESSAGE");function updateMessage() {	welcomeMessage.value = "Updated value";}</script><template>	<p>{{ welcomeMessage }}</p>	<button @click="updateMessage()">Update the message</button></template>

<!-- Parent.vue --><script setup>import { provide, ref } from "vue";import Child from "./Child.vue";const welcomeMessage = ref("Initial value");provide("WELCOME_MESSAGE", welcomeMessage);</script><template>	<Child /></template>

In React, handling optionally injected values doesn't require a new API. We can still use the useContext hook in the child component, even without a provider.

const HelloMessageContext = createContext();function Parent() {	// Notice no provider was set	return <Child />;}function Child() {	// `messageData` is `undefined` if nothing is injected	const messageData = useContext(HelloMessageContext);	// If no value is passed, we can simply	// not render anything in this component	if (!messageData) return null;	return <p>{messageData}</p>;}

When this is done, useContext is undefined if no value is injected for a particular named context.

import { createRoot } from "react-dom/client";import { createContext, useContext } from "react";const HelloMessageContext = createContext();function Parent() {	// Notice no provider was set	return <Child />;}function Child() {	// `messageData` is `undefined` if nothing is injected	const messageData = useContext(HelloMessageContext);	// If no value is passed, we can simply	// not render anything in this component	// if (!messageData) return null	// But for now let's show a message	if (!messageData) return <p>There was no data</p>;	return <p>{messageData}</p>;}createRoot(document.getElementById("root")).render(<Parent />);

In Angular, we provide values to be injected using the providers array on a component.

@Injectable()class InjectedValue {	message = "Initial value";}@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<p>{{ injectedValue.message }}</p>`,})class ChildComponent {	injectedValue = inject(InjectedValue);}@Component({	selector: "app-root",	changeDetection: ChangeDetectionStrategy.OnPush,	imports: [ChildComponent],	providers: [InjectedValue],	template: `<child-comp />`,})class ParentComponent {}

However, if we remove the providers from ParentComponent to test our application without any user data, like so:

@Component({	selector: "app-root",	changeDetection: ChangeDetectionStrategy.OnPush,	imports: [ChildComponent],	template: `<child-comp />`,})class ParentComponent {}

We get the following error:

ERROR NullInjectorError: R3InjectorError(AppModule)[InjectedValue -> InjectedValue -> InjectedValue]:
  NullInjectorError: No provider for InjectedValue!

import { bootstrapApplication } from "@angular/platform-browser";import {	Injectable,	Component,	inject,	OnInit,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Injectable()class InjectedValue {	message = "Initial value";}@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<p>{{ injectedValue.message }}</p>`,})class ChildComponent {	injectedValue = inject(InjectedValue);}@Component({	selector: "app-root",	imports: [ChildComponent],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<child-comp />`,})class ParentComponent {}bootstrapApplication(ParentComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

This is because our inject function inside ChildComponent is marked as a required dependency by default, hence the error.

Fortunately, there's a way to tell Angular to mark that dependency as "optional" by passing a second argument to the inject function:

@Injectable()class InjectedValue {	message = "Hello, world";}@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		@if (injectedValue) {			<div>{{ injectedValue.message }}</div>		}		@if (!injectedValue) {			<div>There is no injected value</div>		}	`,})class ChildComponent {	injectedValue = inject(InjectedValue, { optional: true });	constructor() {		// undefined		console.log(this.injectedValue);	}}@Component({	selector: "app-root",	changeDetection: ChangeDetectionStrategy.OnPush,	imports: [ChildComponent],	template: `<child-comp />`,})class ParentComponent {}

Now, we get no error when injectedValue is not provided. Instead, we get a value of null, which we can guard against using @if inside our template.

import { bootstrapApplication } from "@angular/platform-browser";import {	Injectable,	Component,	inject,	OnInit,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Injectable()class InjectedValue {	message = "Hello, world";}@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		@if (injectedValue) {			<div>{{ injectedValue.message }}</div>		}		@if (!injectedValue) {			<div>There is no injected value</div>		}	`,})class ChildComponent {	injectedValue = inject(InjectedValue, { optional: true });	constructor() {		// undefined		console.log(this.injectedValue);	}}@Component({	selector: "app-root",	imports: [ChildComponent],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<child-comp />`,})class ParentComponent {}bootstrapApplication(ParentComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

Much like React's dependency injection system, when using Vue's inject without a parent provide, the inject defaults its value to undefined.

<!-- Parent.vue --><script setup>import Child from "./Child.vue";</script><template>	<Child /></template>

<!-- Child.vue --><script setup>import { inject } from "vue";const welcomeMessage = inject("WELCOME_MESSAGE");// undefinedconsole.log(welcomeMessage);</script><template>	<p v-if="welcomeMessage">{{ welcomeMessage }}</p>	<p v-if="!welcomeMessage">There is no welcome message</p></template>

<!-- Parent.vue --><script setup>import Child from "./Child.vue";</script><template>	<Child /></template>

You may see a warning like this in your console if you do this:

[Vue warn]: injection "WELCOME_MESSAGE" not found.

This is normal and expected — keep calm and code on.

Because of React's minimalistic dependency injection API, providing a default value to an optionally injected value can be done using JavaScript's built-in "OR" operator (||).

function Child() {	const injectedMessageData = useContext(HelloMessageContext);	const messageData = injectedMessageData || "Hello, world!";	return <p>{messageData}</p>;}

import { createRoot } from "react-dom/client";import { createContext, useContext } from "react";const HelloMessageContext = createContext();function Parent() {	// Notice no provider was set	return <Child />;}function Child() {	const injectedMessageData = useContext(HelloMessageContext);	const messageData = injectedMessageData || "Hello, world!";	return <p>{messageData}</p>;}createRoot(document.getElementById("root")).render(<Parent />);

When an inject function is marked as {optional: true}, the default value (when nothing is provided) is null.

As such, we can use JavaScript's built-in "OR" operator (||) to default to a different value as our default:

@Component({	selector: "child-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `<p>{{ injectedValue.message }}</p>`,})class ChildComponent {	injectedValue = inject(InjectedValue, { optional: true }) || { message: "Default Value" };}