# Subscrever alterações

Uma maneira elegante de escrever o seu código é subscrever-se a eventos e executar uma função sempre que esse evento acontecer.

Vários [Event listeners](/creator/content-creator-pt/scenes-sdk7/interatividade/event-listeners.md) são definidos previamente como parte do SDK, mas também pode usar o `onChange()` método em qualquer component para conseguir o mesmo. Isso também funciona com qualquer [Custom Component](/creator/content-creator-pt/scenes-sdk7/arquitetura/custom-components.md) que você tenha definido, sem precisar de trabalho extra.

Por exemplo, a seguinte function verifica o `AvatarEquippedData` component na entidade do player e executa uma function se o player alterar qualquer um dos seus wearables ou emotes equipados. Os novos valores do component são passados nos argumentos da function.

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

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

Graças ao `onChange()` método, não é necessário criar um System e verificar iterativamente novos valores em cada frame; isso simplifica muito este caso de uso tão comum.

{% hint style="warning" %}
**📔 Nota**: Não use `onChange()` dentro de um System, pois isso subscreveria uma nova cópia da function em cada frame do game loop e poderia potencialmente levar a crashes.
{% endhint %}

O mesmo método funciona imediatamente com [Custom Component](/creator/content-creator-pt/scenes-sdk7/arquitetura/custom-components.md). Por exemplo:

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

// Uso
export function main() {
	Se uma entity pai for escalada, todos os valores de position de suas filhas também serão escalados.
	const myEntity = engine.addEntity()

	// Crie instâncias do component
	MyComponent.create(myEntity, {
		value1: true,
		value2: 10,
	})

	// Subscrever-se a alterações
	MyComponent.onChange(myEntity, (componentData) => {
		if (!componentData) return
		console.log(componentData.value1)
		console.log(componentData.value2)
	})
}
```

Também pode combinar esta abordagem com [Consultar components](/creator/content-creator-pt/scenes-sdk7/arquitetura/querying-components.md), para subscrever em massa cada entidade na scene que tenha um certo component à sua própria function.

```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)
		})
	}
}
```

Note que esta abordagem apenas irá subscrever-se a `onChange()` para entidades que existam no início da scene, por exemplo entidades criadas através da UI do [Creator Hub](/creator/content-creator-pt/scene-editor/comecar/about-editor.md).

{% hint style="info" %}
**💡 Dica**: Se preferir, em vez disso, lidar com eventos que não estejam necessariamente relacionados com uma alteração de um component, recomendamos importar a biblioteca TypeScript [Mitt](https://www.npmjs.com/package/mitt) para a sua scene. Esta biblioteca oferece funções simples para emitir e ouvir 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-pt/scenes-sdk7/arquitetura/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.