In Lightning Web Components (LWC), the decorator used to make a property reactive and update the user interface (UI) is the @track decorator.

Purpose of @track:

The @track decorator is applied to a JavaScript property within the LWC class.

When a property is marked with @track, it becomes reactive, meaning changes to its value trigger the re-rendering of the component to update the UI.

Without @track, changes to a property do not automatically cause a re-render, and the component does not reflect the updated values in the UI.

Usage:

Typically, properties that you want to bind to the UI or have their changes tracked should be marked with @track.

Reactive properties are crucial for ensuring that the UI dynamically reflects changes in the component's state.

Example:


In this example, the greeting property is marked with @track. When the handleChangeGreeting method is called and updates the greeting, the component automatically re-renders, reflecting the new value in the UI.

By using @track, LWC provides a straightforward mechanism for managing reactivity and ensuring a smooth and responsive user experience as the component's state changes.