# Suscribirse a cambios

Una forma ordenada de escribir tu código es suscribirte a eventos y ejecutar una función cada vez que ocurra ese evento.

Un número de [Event listeners](/creator/content-creator-es/scenes-sdk7/interactividad/event-listeners.md) se incluyen predefinidos como parte del SDK, pero también puedes usar el `onChange()` método en cualquier component para lograr lo mismo. Esto también funciona con cualquier [Custom Component](/creator/content-creator-es/scenes-sdk7/arquitectura/custom-components.md) que hayas definido, sin necesidad de hacer ningún trabajo extra.

Por ejemplo, la siguiente función comprueba el `AvatarEquippedData` component en el PlayerEntity, y ejecuta una función si el jugador cambia cualquiera de sus wearables o emotes equipados. Los nuevos valores del component se pasan como argumentos de la función.

```ts
import { AvatarEquippedData } from '@dcl/sdk/ecs'

export function main() {
	AvatarEquippedData.onChange(engine.PlayerEntity, (equipped) => {
		if (!equipped) return
		console.log('Nueva lista de wearables: ', equipped.wearableUrns)
		console.log('Nueva lista de emotes: ', equipped.emoteUrns)
	})
}
```

Gracias al `onChange()` método, no es necesario crear un System e ir comprobando iterativamente nuevos valores en cada frame; simplifica enormemente este caso de uso tan común.

{% hint style="warning" %}
**📔 Nota**: No uses `onChange()` dentro de un System, ya que eso suscribiría una nueva copia de la función en cada frame del game loop, y podría provocar crashes.
{% endhint %}

El mismo método funciona de forma nativa con [Custom Component](/creator/content-creator-es/scenes-sdk7/arquitectura/custom-components.md). Por ejemplo:

```ts
// define component
export const MyComponent = engine.defineComponent('myComponent', {
	value1: Schemas.Boolean,
	value2: Schemas.Float,
})

// Uso
export function main() {
	// Crear entities
	const myEntity = engine.addEntity()

	// Crea instancias del component
	MyComponent.create(myEntity, {
		value1: true,
		value2: 10,
	})

	// Suscribirse a cambios
	MyComponent.onChange(myEntity, (componentData) => {
		if (!componentData) return
		console.log(componentData.value1)
		console.log(componentData.value2)
	})
}
```

También puedes combinar este enfoque con [Consultar components](/creator/content-creator-es/scenes-sdk7/arquitectura/querying-components.md), para suscribir en bloque a cada entity de la scene que tenga un cierto component a su propia función.

```ts
export function main() {
	for (const [entity] of engine.getEntitiesWith(MyComponent)) {
		MyComponent.onChange(entity, (componentData) => {
			if (!componentData) return
			console.log(componentData.value1)
			console.log(componentData.value2)
		})
	}
}
```

Ten en cuenta que este enfoque solo se suscribirá a `onChange()` para entities que existan al inicio de la scene, por ejemplo entities creadas a través de la UI del [Creator Hub](/creator/content-creator-es/scene-editor/comenzar/about-editor.md).

{% hint style="info" %}
**💡 Consejo**: Si prefieres, en cambio, manejar eventos que no estén necesariamente relacionados con un cambio en un component, te recomendamos importar la biblioteca de TypeScript [Mitt](https://www.npmjs.com/package/mitt) en tu scene. Esta biblioteca ofrece funciones sencillas para emitir y escuchar eventos.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/arquitectura/subscribe-to-changes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.