# Suscribirse a cambios

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

Un número de [Listeners de eventos](https://github.com/decentraland/docs/blob/main/creator/sdk7/interactivity/event-listeners.md) vienen predefinidos como parte del SDK, pero también puedes usar el `onChange()` método en cualquier componente para lograr lo mismo. Esto también funciona con cualquier [entrypoint](https://github.com/decentraland/docs/blob/main/creator/sdk7/architecture/custom-components.md) que hayas definido, sin necesidad de trabajo adicional.

Por ejemplo, la siguiente función verifica el `AvatarEquippedData` componente en la entidad del jugador y ejecuta una función si el jugador cambia cualquiera de sus wearables o emotes equipados. Los nuevos valores del componente 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('New wearables list: ', equipped.wearableUrns)
		console.log('New emotes list : ', equipped.emoteUrns)
	})
}
```

Gracias al `onChange()` método, no es necesario crear un system y verificar iterativamente nuevos valores en cada frame; simplifica en gran medida 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 bucle del juego y podría potencialmente provocar fallos.
{% endhint %}

El mismo método funciona de forma inmediata con [entrypoint](https://github.com/decentraland/docs/blob/main/creator/sdk7/architecture/custom-components.md). Por ejemplo:

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

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

	// Crear instancias del componente
	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 [. Las escenas de Decentraland se renderizan a 30 ticks por segundo, siempre que sea posible. Si la máquina tiene dificultades para renderizar cada tick, puede resultar en actualizaciones menos frecuentes.](https://github.com/decentraland/docs/blob/main/creator/sdk7/architecture/querying-components.md), para suscribirte en masa a cada entidad en la escena que tenga cierto componente 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 las entidades que existen al inicio de la escena, por ejemplo entidades creadas a través de la UI del [Creator Hub](https://github.com/decentraland/docs/blob/main/creator/scene-editor/get-started/about-editor.md).

{% hint style="info" %}
**💡 Consejo**: Si prefieres en su lugar manejar eventos que no estén necesariamente relacionados con el cambio de un componente, recomendamos importar la librería de TypeScript [Mitt](https://www.npmjs.com/package/mitt) en tu escena. Esta librería ofrece funciones simples para emitir y escuchar eventos.
{% endhint %}