2

We could use this.recordId in wired getRecord function because properties are already reactive in LWC.

@wire(getRecord, { recordId: this.recordId, fields: FIELDS })
contact;

So what benefit is to use '$recordId'?:

@wire(getRecord, { recordId: '$recordId', fields: FIELDS })
contact;

2 Answers 2

6

From Understand the Wire Service:

We call the wire service reactive in part because it supports reactive variables, which are prefixed with $. If a reactive variable changes, the wire service provisions new data. We say "provisions" instead of "requests" or "fetches" because if the data exists in the client cache, a network request may not be involved.

Crucially:

If a reactive variable changes, the wire service provisions new data.

4
  • But properties in LWC are reactive as I know. Of course, I read the documentation before asking here Feb 22, 2021 at 15:33
  • 1
    My understanding is the wire itself would not be reactive using the syntax from your post. And as I do not know you, it is not obvious to me that you read the documentation. You could make it obvious by linking to it and quoting from it, but absent that it's just a guess one way or the other.
    – Adrian Larson
    Feb 22, 2021 at 16:08
  • 2
    There was a specific design decision to require use of "$propertyName" to represent "this.propertyName" in wire reactive parameters when LWC was developed, and I certainly found that an attempt to use this.propertyName didn't work when I naively tried it back in the day. Unless something changed in a recent release (and I don't recall seeing any documentation about it) use of "this.propertyName" simply won't work. Remember that your LWC gets compiled, and wire reactive properties are designed to work with these strings that name properties. It's a shame, but it is how it is.
    – Phil W
    Feb 22, 2021 at 17:35
  • 1
    (Worth also noting that when LWC was first developed not all properties were automatically reactive - you had to use @api and @track annotations explicitly)
    – Phil W
    Feb 22, 2021 at 17:55
3

The term "reactive" applies to redrawing the UI/templates every time a reactive variable is modified.

Variables are not reactive within the JavaScript short of using an explicit setter; this is how JavaScript (and most languages) work; there has to be some sort of syntax to let the runtime know that the variable needs to be tracked for other functions to be called.

The wire method uses $ to signify that it should set up a setter for the variable to be reactive for the wire method.

This is actually similar to how Svelte uses reactive variables in JavaScript. In Svelte, for example, you can write:

$: totalTodos = todos.length;

Whenever todos changes its length (via splice, push, pop, shift, unshift, or an assignment from slice, etc), Svelte automatically recalculates totalTodos.

We don't have this feature in LWC, but the concept is similar to how @wire methods operate. We label the property with $ to tell the wire method that it should listen for changes to this property and perform some server call in response.

Without the $, the string is just a normal string, and if you just use this.variableName, you only get one shot from the wire method (because it ends up looking like a string/number/whatever). We need this special symbol to make wire properties reactive.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .