Decorators

The Lightning Web Components programming model has three decorators that add functionality to a property or function.

The ability to create decorators is part of ECMAScript, but these three decorators are unique to Lightning Web Components.

To expose a public property, decorate a field with @api. Public properties define the API for a component.

See Public Properties.

To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.

See Public Methods.

Previously, you had to use the @track decorator to make a field reactive. Beginning in Spring '20, all fields in a LWC class are reactive. If a field’s value changes, and the field is used in a template or in a getter of a property that’s used in a template, the component rerenders and displays the new value. If a field is assigned an object or an array, the framework observes some changes to the internals of the object or array, such as when you assign a new value.

You still need to decorate a field with @track in these use cases:

• Observing changes to the properties of an object
• Observing changes to the elements of an array

See Reactivity for Fields, Objects, and Arrays.

To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adapter or an Apex method.

See Understand the Wire Service and Call Apex Methods

See Also

• TC39: Decorators proposal