Beginner’s Guide: Wire Property vs Wire Function in LWC

Beginner’s Guide: Using Wire Property vs Wire Function in LWC

Lightning Web Components (LWC) provide a powerful and reactive way to fetch data from Apex using the @wire decorator. In this guide, we’ll compare two popular patterns:

Wire as a Property
Wire as a Function

What We Are Building

A simple Contact Search app that displays results using both wire methods.

🔧 Apex Class

This Apex method fetches contacts based on a search string:

public with sharing class searchContact {
    @AuraEnabled(cacheable=true)
    public static List<Contact> findContacts(String searchText) {
        if (String.isBlank(searchText)) {
            return new List<Contact>();
        }

        String sk = '%' + searchText + '%';
        return [
            SELECT Id, Name, Phone, Email 
            FROM Contact 
            WHERE FirstName LIKE :sk OR LastName LIKE :sk
            LIMIT 50
        ];
    }
}

Highlights:

@AuraEnabled(cacheable=true) enables reactive, cacheable access.
Uses LIKE operator for partial matching.

LWC JavaScript

import { LightningElement, wire } from 'lwc';
import findContacts from '@salesforce/apex/searchContact.findContacts';

export default class ContactFilters extends LightningElement {
    searchkey = '';

    // Wire Property
    contactsProperty;

    // Wire Function
    contactsFunction = [];
    errorFunction;

    @wire(findContacts, { searchText: '$searchkey' })
    wiredContactsProperty(value) {
        this.contactsProperty = value;
    }

    @wire(findContacts, { searchText: '$searchkey' })
    wiredContactsFunction({ data, error }) {
        if (data) {
            this.contactsFunction = data;
            this.errorFunction = undefined;
        } else if (error) {
            this.errorFunction = error;
            this.contactsFunction = [];
        }
    }

    handleSearch(event) {
        this.searchkey = event.target.value;
    }
}

📄 LWC HTML Template

<template>
  <lightning-card title="Search Contacts - Wire Property & Function">

    <lightning-input
      type="search"
      label="Enter Name"
      value={searchkey}
      onchange={handleSearch}>
    </lightning-input>

    <template if:true={searchkey}>

      <h3>Wire as Property</h3>
      <template if:true={contactsProperty.data}>
        <template for:each={contactsProperty.data} for:item="con">
          <p key={con.Id}><b>Name:</b> {con.Name} | <b>Email:</b> {con.Email}</p>
        </template>
      </template>

      <h3>Wire as Function</h3>
      <template if:true={contactsFunction.length}>
        <template for:each={contactsFunction} for:item="con">
          <p key={con.Id}><b>Name:</b> {con.Name} | <b>Email:</b> {con.Email}</p>
        </template>
      </template>

    </template>
  </lightning-card>
</template>

Pros & Cons: Property vs Function

Aspect	Wire Property	Wire Function
Syntax	Simpler & cleaner	More control, but verbose
Data Handling	Auto handles `data` and `error`	Manual control over variables
Error Handling	Basic error display	Granular logic for errors
Use Case	Simple data display	Custom logic and UI

Summary

Wire Property: Ideal for simple, declarative UI binding.
Wire Function: Use when custom data processing or error handling is needed.
Both respond reactively to changes in $searchkey.

📥 Download Full Guide as PDF