--- title: "LemonadeJS Onchange | v5 docs" description: "LemonadeJS v5 archive. The onchange event is a powerful tool for tracking changes in component properties and attaching additional reactions in LemonadeJS." source: https://lemonadejs.com/docs/v5/onchange/ --- # Onchange The `onchange` event triggers whenever a **reactive property** of the component object `this` changes. Reactive properties are those bound to the template and directly affect the UI. Note that `state variables` have their dedicated callback and do not invoke the onchange event. ## Examples ### Reactive Properties Reactive properties are those defined on `this` object and referenced in the template. Changes to these properties automatically invoke the `onchange` event. #### Triggering Onchange In the example below, the name property is reactive because it is referenced in the template. ```html
``` ```javascript export default function Component() { // Track any changes on properties used in the template this.onchange = (prop) => { console.log('The new value of', prop, ' is: ', this[prop]); } // Default name this.name = 'Paul'; // Update name const update = () => { this.name = 'Jorge'; } // The component template return render => render`

Hello ${this.name}

`; } ``` #### Not Triggering Onchange If a property is not used in the template, its changes will not invoke the onchange event. ```html
``` ```javascript export default function Component() { // Track any changes on properties used in the template this.onchange = (prop) => { console.log('The new value of', prop, ' is: ', this[prop]); } // Default name this.name = 'Paul'; // Update name const update = () => { this.name = 'Jorge'; } // The component template return render => render`

Hello World

`; } ``` #### Forcing Property Tracking To monitor changes for properties not bound to the template, the track hook can be used to explicitly enable tracking. This ensures onchange is triggered even for properties that don’t directly affect the DOM. ```html
``` ```javascript export default function Component(children, { onchange, track }) { // Default value this.status = true; // Status is not used in the template, but force tracking track('status'); // Monitor changes on properties onchange((prop, newValue, oldValue) => { console.log(`${prop} has changed`, newValue, oldValue) }); // Update a property const update = () => { this.status = !this.status; } return render => render`
` } ``` ### Scope The `onchange event` can be defined as bound directly to the component or registered as a hook. #### Bind to the Component Self Define onchange directly on the component instance `this`, making it accessible throughout the component. ```html
``` ```javascript export default function Test() { this.onchange = function() { // Triggered when any property used in the template changes } return render => render`
Hello ${this.name}
`; } ``` #### Register The Event Privately Registering onchange privately encapsulates its logic within the component, ensuring it is not accessible externally. ```html
``` ```javascript export default function Component(children, { onchange }) { onchange(() => { // Triggered when any property used in the template changes }) return render => render`
Hello ${this.name}
`; } ``` ## What's Next? Another key feature for managing reactivity within components is the state feature. [Learn More About States](/docs/v5/state/)