Development questions

What are the @api, @track and @wire decorators in LWC and when do you use each?

DevelopmentEasy
  • @api makes a field or method public so a parent can set it (or call the method). Public properties are reactive but should be treated as read-only inside the child.
  • @track makes a field deeply reactive, so mutations to properties of an object or elements of an array trigger a re-render. Since Spring '20 all fields are reactive for reassignment, so @track is only needed for in-place mutation of objects/arrays.
  • @wire connects a property or function to a wire adapter or Apex method, so data is provisioned reactively and re-fetched when reactive parameters (prefixed with $) change.
javascript
import { LightningElement, api, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class Demo extends LightningElement {
  @api recordId;
  @wire(getAccounts, { industry: '$industry' }) accounts;
}
lwcdecorators