const Comp = () => {	const sayHi = () => alert("Hi!");	return <button onClick={sayHi}>Say hello</button>;};

@Component({	selector: "comp-comp",    changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <button (click)="sayHi()">Say hello</button> `,})class CompComponent {	sayHi() {		alert("Hi!");	}}

<!-- Comp.vue --><script setup>const sayHi = () => alert("Hi!");</script><template>	<button @click="sayHi()">Say hello</button></template>

const Child = () => {	return <p>I am the child</p>;};const Parent = () => {	const [showChild, setShowChild] = useState(true);	return (		<div>			<button onClick={() => setShowChild(!showChild)}>Toggle Child</button>			{showChild && <Child />}		</div>	);};

import { createRoot } from "react-dom/client";import { useState } from "react";const Child = () => {	return <p>I am the child</p>;};const Parent = () => {	const [showChild, setShowChild] = useState(true);	return (		<div>			<button onClick={() => setShowChild(!showChild)}>Toggle Child</button>			{showChild && <Child />}		</div>	);};createRoot(document.getElementById("root")).render(<Parent />);

@Component({	selector: "child-comp",    changeDetection: ChangeDetectionStrategy.OnPush,	template: "<p>I am the child</p>",})class ChildComponent {}@Component({	selector: "parent-comp",    changeDetection: ChangeDetectionStrategy.OnPush,    imports: [ChildComponent],	template: `		<div>			<button (click)="setShowChild()">Toggle Child</button>			@if (showChild) {				<child-comp />			}		</div>	`,})class ParentComponent {	showChild = signal(true);	setShowChild() {		this.showChild.set(!this.showChild());	}}

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	signal,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Component({	selector: "child-comp",	template: "<p>I am the child</p>",})class ChildComponent {}@Component({	selector: "parent-comp",	imports: [ChildComponent],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<div>			<button (click)="setShowChild()">Toggle Child</button>			@if (showChild()) {				<child-comp />			}		</div>	`,})class ParentComponent {	showChild = signal(true);	setShowChild() {		this.showChild.set(!this.showChild());	}}bootstrapApplication(ParentComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

<!-- Child.vue --><template>	<p>I am the child</p></template>

<!-- Parent.vue --><script setup>import { ref } from "vue";import Child from "./Child.vue";const showChild = ref(true);function setShowChild() {	showChild.value = !showChild.value;}</script><template>	<div>		<button @click="setShowChild()">Toggle Child</button>		<Child v-if="showChild" />	</div></template>

<!-- Parent.vue --><script setup>import { ref } from "vue";import Child from "./Child.vue";const showChild = ref(true);function setShowChild() {	showChild.value = !showChild.value;}</script><template>	<div>		<button @click="setShowChild()">Toggle Child</button>		<Child v-if="showChild" />	</div></template>

Two Hooks handle all side effects within React components: useEffect and useLayoutEffect. Let's start by looking at useEffect:

import { useEffect } from "react";const Child = () => {	// Pass a function that React will run for you	useEffect(() => {		console.log("I am initialized");		// Pass an array of items to track changes of	}, []);	return <p>I am the child</p>;};

import { createRoot } from "react-dom/client";import { useState, useEffect } from "react";const Child = () => {	// Pass a function that React will run for you	useEffect(() => {		console.log("I am initialized");		// Pass an array of items to track changes of	}, []);	return <p>I am the child</p>;};const Parent = () => {	const [showChild, setShowChild] = useState(true);	return (		<div>			<button onClick={() => setShowChild(!showChild)}>Toggle Child</button>			{showChild && <Child />}		</div>	);};createRoot(document.getElementById("root")).render(<Parent />);

Here, we're completing the task of "run console.log when Child is rendered for the first time" by allowing React to run the console.log side effect inside of useEffect. The empty array hints to React that we'd only like this function to run once — when the component initially renders.

The empty array passed to useEffect has a fair bit of nuance to it, which we'll learn about later.

We mentioned earlier that there is another hook used to handle side effects: useLayoutEffect. While useLayoutEffect is useful, it requires a bit of pre-requisite knowledge that we'll touch on throughout this chapter. Let's put it to the side and come back to it later.

In Angular, there are two main methods to trigger a side effect from a component: effect and afterRenderEffect. While we'll touch on afterRenderEffect later, effects are created on the constructor of a component, which in this instance is called when the component first mounts:

import { Component, ChangeDetectionStrategy, effect } from "@angular/core";@Component({	selector: "child-comp",    changeDetection: ChangeDetectionStrategy.OnPush,	template: "<p>I am the child</p>",})class ChildComponent {	constructor() {		effect(() => {			console.log("I am initialized");		})	}}

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	effect,	signal,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Component({	selector: "child-comp",	template: "<p>I am the child</p>",})class ChildComponent {	constructor() {		effect(() => {			console.log("I am initialized");		});	}}@Component({	selector: "parent-comp",	imports: [ChildComponent],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<div>			<button (click)="setShowChild()">Toggle Child</button>			@if (showChild()) {				<child-comp />			}		</div>	`,})class ParentComponent {	showChild = signal(true);	setShowChild() {		this.showChild.set(!this.showChild());	}}bootstrapApplication(ParentComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

While Angular strictly uses lifecycle methods and React uses a useEffect hook to handle side effects, Vue does a bit of both.

Let's start by taking a look at Vue's lifecycle method of handling a side effect.

Vue's onMounted Lifecycle Method

<!-- Child.vue --><script setup>import { onMounted } from "vue";onMounted(() => {	console.log("I am initialized");});</script><template>	<p>I am the child</p></template>

<!-- Child.vue --><script setup>import { onMounted } from "vue";onMounted(() => {	console.log("I am initialized");});</script><template>	<p>I am the child</p></template>

Here, we're importing the onMounted lifecycle handler from the vue import. Vue's lifecycle methods all start with an on prefix when used inside a <script setup> component.

Vue's watchEffect Hook

Just like how React has a non-lifecycle method of running side effect, so too does Vue. This is done using Vue's watchEffect and watch APIs. Let's start with a simple example:

<!-- Child.vue --><script setup>import { watchEffect } from "vue";watchEffect(() => {	console.log("I am initialized");});</script><template>	<p>I am the child</p></template>

<!-- Child.vue --><script setup>import { watchEffect } from "vue";watchEffect(() => {	console.log("I am initialized");});</script><template>	<p>I am the child</p></template>

Here, we're using watchEffect to run console.log as soon as the Child component renders.

Instead, watchEffect is commonly expected to be used alongside reactive values (like ref variables). We'll touch on how this works later on in the chapter.

const WindowSize = () => {	const [height, setHeight] = useState(window.innerHeight);	const [width, setWidth] = useState(window.innerWidth);	return (		<div>			<p>Height: {height}</p>			<p>Width: {width}</p>		</div>	);};

import { createRoot } from "react-dom/client";import { useState } from "react";const WindowSize = () => {	const [height, setHeight] = useState(window.innerHeight);	const [width, setWidth] = useState(window.innerWidth);	return (		<div>			<p>Height: {height}</p>			<p>Width: {width}</p>		</div>	);};createRoot(document.getElementById("root")).render(<WindowSize />);

@Component({	selector: "window-size",    changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<div>			<p>Height: {{ height }}</p>			<p>Width: {{ width }}</p>		</div>	`,})class WindowSizeComponent {	height = window.innerHeight;	width = window.innerWidth;}

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Component({	selector: "window-size",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<div>			<p>Height: {{ height }}</p>			<p>Width: {{ width }}</p>		</div>	`,})class WindowSizeComponent {	height = window.innerHeight;	width = window.innerWidth;}bootstrapApplication(WindowSizeComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

<!-- WindowSize.vue --><script setup>const height = window.innerHeight;const width = window.innerWidth;</script><template>	<div>		<p>Height: {{ height }}</p>		<p>Width: {{ width }}</p>	</div></template>

<!-- WindowSize.vue --><script setup>const height = window.innerHeight;const width = window.innerWidth;</script><template>	<div>		<p>Height: {{ height }}</p>		<p>Width: {{ width }}</p>	</div></template>

const WindowSize = () => {	const [height, setHeight] = useState(window.innerHeight);	const [width, setWidth] = useState(window.innerWidth);	useEffect(() => {		function resizeHandler() {			setHeight(window.innerHeight);			setWidth(window.innerWidth);		}		// This code will cause a memory leak, more on that soon		window.addEventListener("resize", resizeHandler);	}, []);	return (		<div>			<p>Height: {height}</p>			<p>Width: {width}</p>		</div>	);};

import { createRoot } from "react-dom/client";import { useState, useEffect } from "react";const WindowSize = () => {	const [height, setHeight] = useState(window.innerHeight);	const [width, setWidth] = useState(window.innerWidth);	useEffect(() => {		function resizeHandler() {			setHeight(window.innerHeight);			setWidth(window.innerWidth);		}		// This code will cause a memory leak, more on that soon		window.addEventListener("resize", resizeHandler);	}, []);	return (		<div>			<p>Height: {height}</p>			<p>Width: {width}</p>		</div>	);};createRoot(document.getElementById("root")).render(<WindowSize />);

@Component({	selector: "window-size",    changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<div>			<p>Height: {{ height }}</p>			<p>Width: {{ width }}</p>		</div>	`,})class WindowSizeComponent {	height = window.innerHeight;	width = window.innerWidth;	resizeHandler = () => {		this.height = window.innerHeight;		this.width = window.innerWidth;	};	constructor() {        // This code will cause a memory leak, more on that soon		effect(() => {            window.addEventListener("resize", this.resizeHandler);				})	}}

You may notice that we're using an arrow function for resizeHandler. This arrow function helps us bind this in resizeHandler back to the WindowSizeComponent instance.

If this sentence feels unfamiliar, no worries; I wrote an article explaining what this means.

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	effect,	signal,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Component({	selector: "window-size",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<div>			<p>Height: {{ height() }}</p>			<p>Width: {{ width() }}</p>		</div>	`,})class WindowSizeComponent {	height = signal(window.innerHeight);	width = signal(window.innerWidth);	resizeHandler = () => {		this.height.set(window.innerHeight);		this.width.set(window.innerWidth);	};	constructor() {		// This code will cause a memory leak, more on that soon		effect(() => {			window.addEventListener("resize", this.resizeHandler);		});	}}bootstrapApplication(WindowSizeComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

<!-- WindowSize.vue --><script setup>import { ref, onMounted } from "vue";const height = ref(window.innerHeight);const width = ref(window.innerWidth);function resizeHandler() {	height.value = window.innerHeight;	width.value = window.innerWidth;}onMounted(() => {	// This code will cause a memory leak, more on that soon	window.addEventListener("resize", resizeHandler);});</script><template>	<div>		<p>Height: {{ height }}</p>		<p>Width: {{ width }}</p>	</div></template>

<!-- WindowSize.vue --><script setup>import { ref, onMounted } from "vue";const height = ref(window.innerHeight);const width = ref(window.innerWidth);function resizeHandler() {	height.value = window.innerHeight;	width.value = window.innerWidth;}onMounted(() => {	// This code will cause a memory leak, more on that soon	window.addEventListener("resize", resizeHandler);});</script><template>	<div>		<p>Height: {{ height }}</p>		<p>Width: {{ width }}</p>	</div></template>

const WindowSize = () => {	const [height, setHeight] = useState(window.innerHeight);	const [width, setWidth] = useState(window.innerWidth);	function resizeHandler() {		setHeight(window.innerHeight);		setWidth(window.innerWidth);	}	// This code doesn't work, we'll explain why soon	return (		<div onResize={resizeHandler}>			<p>Height: {height}</p>			<p>Width: {width}</p>		</div>	);};

import { createRoot } from "react-dom/client";import { useState, useEffect } from "react";const WindowSize = () => {	const [height, setHeight] = useState(window.innerHeight);	const [width, setWidth] = useState(window.innerWidth);	function resizeHandler() {		setHeight(window.innerHeight);		setWidth(window.innerWidth);	}	// This code doesn't work, we'll explain why soon	return (		<div onResize={resizeHandler}>			<p>Height: {height}</p>			<p>Width: {width}</p>		</div>	);};createRoot(document.getElementById("root")).render(<WindowSize />);

@Component({	selector: "window-size",	standalone: true,	template: `		<!-- This code doesn't work, we'll explain why soon -->		<div (resize)="resizeHandler()">			<p>Height: {{ height() }}</p>			<p>Width: {{ width() }}</p>		</div>	`,})class WindowSizeComponent {	height = signal(window.innerHeight);	width = signal(window.innerWidth);	resizeHandler() {		this.height.set(window.innerHeight);		this.width.set(window.innerWidth);    }}

import { bootstrapApplication } from "@angular/platform-browser";import { Component } from "@angular/core";@Component({	selector: "window-size",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<!-- This code doesn't work, we'll explain why soon -->		<div (resize)="resizeHandler()">			<p>Height: {{ height }}</p>			<p>Width: {{ width }}</p>		</div>	`,})class WindowSizeComponent {	height = window.innerHeight;	width = window.innerWidth;	resizeHandler() {		this.height = window.innerHeight;		this.width = window.innerWidth;	}}bootstrapApplication(WindowSizeComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

<!-- WindowSize.vue --><script setup>import { ref } from "vue";const height = ref(window.innerHeight);const width = ref(window.innerWidth);function resizeHandler() {	height.value = window.innerHeight;	width.value = window.innerWidth;}</script><template>	<!-- This code doesn't work, we'll explain why soon -->	<div @resize="resizeHandler()">		<p>Height: {{ height }}</p>		<p>Width: {{ width }}</p>	</div></template>

<!-- WindowSize.vue --><script setup>import { ref } from "vue";const height = ref(window.innerHeight);const width = ref(window.innerWidth);function resizeHandler() {	height.value = window.innerHeight;	width.value = window.innerWidth;}</script><template>	<!-- This code doesn't work, we'll explain why soon -->	<div @resize="resizeHandler()">		<p>Height: {{ height }}</p>		<p>Width: {{ width }}</p>	</div></template>

<div onClick={() => logMessage()}>	<p>		<span style={{ color: "red" }}>Click me</span> or even		<span style={{ background: "green", color: "white" }}>me</span>!	</p></div>

import { createRoot } from "react-dom/client";const EventBubbler = () => {	const logMessage = () => alert("Clicked!");	return (		<div onClick={() => logMessage()}>			<p>				<span style={{ color: "red" }}>Click me</span> or even				<span style={{ background: "green", color: "white" }}>me</span>!			</p>		</div>	);};createRoot(document.getElementById("root")).render(<EventBubbler />);

<div (click)="logMessage()">	<p>		<span style="color: red">Click me</span> or even		<span style="background: green; color: white;">me</span>!	</p></div>

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Component({	selector: "event-bubbler",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<div (click)="logMessage()">			<p>				<span style="color: red">Click me</span> or even				<span style="background: green; color: white;">me</span>!			</p>		</div>	`,})class EventBubblerComponent {	logMessage() {		alert("Clicked!");	}}bootstrapApplication(EventBubblerComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

<div @click="logMessage()">	<p>		<span style="color: red">Click me</span> or even		<span style="background: green; color: white;">me</span>!	</p></div>

<!-- EventBubbler.vue --><script setup>const logMessage = () => alert("Clicked!");</script><template>	<div @click="logMessage()">		<p>			<span style="color: red">Click me</span> or even			<span style="background: green; color: white">me</span>!		</p>	</div></template>

const Clock = () => {	const [time, setTime] = useState(formatDate(new Date()));	useEffect(() => {		setInterval(() => {			console.log("I am updating the time");			setTime(formatDate(new Date()));		}, 1000);	}, []);	return <p role="timer">Time is: {time}</p>;};function formatDate(date) {	return (		prefixZero(date.getHours()) +		":" +		prefixZero(date.getMinutes()) +		":" +		prefixZero(date.getSeconds())	);}function prefixZero(number) {	if (number < 10) {		return "0" + number.toString();	}	return number.toString();}

@Component({	selector: "clock-comp",	standalone: true,	template: ` <p role="timer">Time is: {{ time() }}</p> `,})class ClockComponent implements OnInit {	time = signal(formatDate(new Date()));	constructor() {		effect(() => {            setInterval(() => {                console.log("I am updating the time");                this.time.set(formatDate(new Date()));            }, 1000);        });	}}function formatDate(date: Date) {	return (		prefixZero(date.getHours()) +		":" +		prefixZero(date.getMinutes()) +		":" +		prefixZero(date.getSeconds())	);}function prefixZero(number: number) {	if (number < 10) {		return "0" + number.toString();	}	return number.toString();}

<!-- Clock.vue --><script setup>import { ref, onMounted } from "vue";const time = ref(formatDate(new Date()));onMounted(() => {	setInterval(() => {		console.log("I am updating the time");		time.value = formatDate(new Date());	}, 1000);});function formatDate(date) {	return (		prefixZero(date.getHours()) +		":" +		prefixZero(date.getMinutes()) +		":" +		prefixZero(date.getSeconds())	);}function prefixZero(number) {	if (number < 10) {		return "0" + number.toString();	}	return number.toString();}</script><template>	<p role="timer">Time is: {{ time }}</p></template>

function App() {	const [showClock, setShowClock] = useState(true);	return (		<div>			<button onClick={() => setShowClock(!showClock)}>Toggle clock</button>			{showClock && <Clock />}		</div>	);}

import { createRoot } from "react-dom/client";import { useState, useEffect } from "react";const Clock = () => {	const [time, setTime] = useState(formatDate(new Date()));	useEffect(() => {		setInterval(() => {			console.log("I am updating the time");			setTime(formatDate(new Date()));		}, 1000);	}, []);	return <p role="timer">Time is: {time}</p>;};function formatDate(date) {	return (		prefixZero(date.getHours()) +		":" +		prefixZero(date.getMinutes()) +		":" +		prefixZero(date.getSeconds())	);}function prefixZero(number) {	if (number < 10) {		return "0" + number.toString();	}	return number.toString();}function App() {	const [showClock, setShowClock] = useState(true);	return (		<div>			<button onClick={() => setShowClock(!showClock)}>Toggle clock</button>			{showClock && <Clock />}		</div>	);}createRoot(document.getElementById("root")).render(<App />);

@Component({	selector: "app-root",    changeDetection: ChangeDetectionStrategy.OnPush,	imports: [ClockComponent],	template: `		<div>			<button (click)="setShowClock(!showClock)">Toggle clock</button>			@if (showClock()) {				<clock-comp />			}		</div>	`,})class AppComponent {	showClock = signal(true);	setShowClock(val: boolean) {		this.showClock.set(val);	}}

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	effect,	signal,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Component({	selector: "clock-comp",	changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <p role="timer">Time is: {{ time() }}</p> `,})class ClockComponent {	time = signal(formatDate(new Date()));	constructor() {		effect(() => {			setInterval(() => {				console.log("I am updating the time");				this.time.set(formatDate(new Date()));			}, 1000);		});	}}function formatDate(date: Date) {	return (		prefixZero(date.getHours()) +		":" +		prefixZero(date.getMinutes()) +		":" +		prefixZero(date.getSeconds())	);}function prefixZero(number: number) {	if (number < 10) {		return "0" + number.toString();	}	return number.toString();}@Component({	selector: "app-root",	imports: [ClockComponent],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<div>			<button (click)="setShowClock(!showClock())">Toggle clock</button>			@if (showClock()) {				<clock-comp />			}		</div>	`,})class AppComponent {	showClock = signal(true);	setShowClock(val: boolean) {		this.showClock.set(val);	}}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

<!-- App.vue --><script setup>import Clock from "./Clock.vue";import { ref } from "vue";const showClock = ref(true);function setShowClock(val) {	showClock.value = val;}</script><template>	<div>		<button @click="setShowClock(!showClock)">Toggle clock</button>		<Clock v-if="showClock" />	</div></template>

<!-- Clock.vue --><script setup>import { ref, onMounted } from "vue";const time = ref(formatDate(new Date()));onMounted(() => {	setInterval(() => {		console.log("I am updating the time");		time.value = formatDate(new Date());	}, 1000);});function formatDate(date) {	return (		prefixZero(date.getHours()) +		":" +		prefixZero(date.getMinutes()) +		":" +		prefixZero(date.getSeconds())	);}function prefixZero(number) {	if (number < 10) {		return "0" + number.toString();	}	return number.toString();}</script><template>	<p role="timer">Time is: {{ time }}</p></template>

function AlarmScreen({ snooze, disable }) {	useEffect(() => {		setTimeout(() => {			// Automatically snooze the alarm			// after 10 seconds of inactivity			// In production, this would be 10 minutes			snooze();		}, 10 * 1000);	}, []);	return (		<div>			<p>Time to wake up!</p>			<button onClick={snooze}>Snooze for 5 seconds</button>			<button onClick={disable}>Turn off alarm</button>		</div>	);}function App() {	const [secondsLeft, setSecondsLeft] = useState(5);	const [timerEnabled, setTimerEnabled] = useState(true);	useEffect(() => {		setInterval(() => {			setSecondsLeft((v) => {				if (v === 0) return v;				return v - 1;			});		}, 1000);	}, []);	const snooze = () => {		// In production, this would add 5 minutes, not 5 seconds		setSecondsLeft((v) => v + 5);	};	const disable = () => {		setTimerEnabled(false);	};	if (!timerEnabled) {		return <p>There is no timer</p>;	}	if (secondsLeft === 0) {		return <AlarmScreen snooze={snooze} disable={disable} />;	}	return <p>{secondsLeft} seconds left in timer</p>;}

import { createRoot } from "react-dom/client";import { useState, useEffect } from "react";function AlarmScreen({ snooze, disable }) {	useEffect(() => {		setTimeout(() => {			// Automatically snooze the alarm			// after 10 seconds of inactivity			// In production, this would be 10 minutes			snooze();		}, 10 * 1000);	}, []);	return (		<div>			<p>Time to wake up!</p>			<button onClick={snooze}>Snooze for 5 seconds</button>			<button onClick={disable}>Turn off alarm</button>		</div>	);}function App() {	const [secondsLeft, setSecondsLeft] = useState(5);	const [timerEnabled, setTimerEnabled] = useState(true);	useEffect(() => {		setInterval(() => {			setSecondsLeft((v) => {				if (v === 0) return v;				return v - 1;			});		}, 1000);	}, []);	const snooze = () => {		// In production, this would add 5 minutes, not 5 seconds		setSecondsLeft((v) => v + 5);	};	const disable = () => {		setTimerEnabled(false);	};	if (!timerEnabled) {		return <p>There is no timer</p>;	}	if (secondsLeft === 0) {		return <AlarmScreen snooze={snooze} disable={disable} />;	}	return <p>{secondsLeft} seconds left in timer</p>;}createRoot(document.getElementById("root")).render(<App />);

@Component({	selector: "alarm-screen",	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<div>			<p>Time to wake up!</p>			<button (click)="snooze.emit()">Snooze for 5 seconds</button>			<button (click)="disable.emit()">Turn off alarm</button>		</div>	`,})class AlarmScreenComponent {	snooze = output();	disable = output();	constructor() {		effect(() => {			setTimeout(() => {				// Automatically snooze the alarm				// after 10 seconds of inactivity				// In production, this would be 10 minutes				this.snooze.emit();			}, 10 * 1000);		});	}}@Component({	selector: "app-root",	imports: [AlarmScreenComponent],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		@if (!timerEnabled()) {			<p>There is no timer</p>		} @else if (secondsLeft() === 0) {			<alarm-screen (snooze)="snooze()" (disable)="disable()" />		} @else {			<p>{{ secondsLeft() }} seconds left in timer</p>		}	`,})class AppComponent {	secondsLeft = signal(5);	timerEnabled = signal(true);	constructor() {		effect(() => {			setInterval(() => {				if (this.secondsLeft() === 0) return;				this.secondsLeft.set(this.secondsLeft() - 1);			}, 1000);		});	}	snooze() {		// In production, this would add 5 minutes, not 5 seconds		this.secondsLeft.set(this.secondsLeft() + 5);	}	disable() {		this.timerEnabled.set(false);	}}