Rendering issues with lightning web component @wire decorator

apexjavascriptlightning-web-components

I am building a lightning web component and have a couple of wire decorated properties; one of them calls a custom apex method, the other calls getRecord from the lightning/uiRecordApi module. I am then rendering some custom code in the renderedCallback method. It is my understanding that the renderedCallback method detects changes in properties that are marked with the wire decorator; however, I am having trouble with this behavior. Here is my code (pretty condensed down for proof of concept):

@wire(getRecord, { recordId: '$recordId', layoutTypes: ['Full']})
wiredRecord({ data, error }) {
  if (data) {
    console.log('Data');
    console.log(data);
  } else if (error) {
    console.log('Error');
    console.log(error);
  }
}
renderedCallback() {
  console.log('testing');
  console.log(this.recordId);
  console.log(this.wiredRecord.data);
}

Currently, the values in renderedCallback print first. recordId is defined and is the correct value, and wiredRecord.data is undefined. Then the values in wiredRecord print out. Data is logged and is what I would expect it to be. According to the salesforce documentation, renderedCallback will rerender if a change is detected to a wire property. Since the wire property is clearly changing, I would expect the renderedCallback method to run again and log those values, this time with wiredRecord.data defined; however, renderedCallback is NOT rendering a second time.

Do I have a misunderstanding of how the wire decorator works? What am I doing wrong here, and how can I get the renderedCallback method to re-render when the wire properties update?

Just for context, here is the documentation I have referenced: https://lwc.dev/guide/reference#javascript-decorators
and https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_lifecycle_hooks_rendered

Also, I have tried the suggestion here and tried to update a track and api variables from my conditional to trigger a rerender, and that also did not work: @track decorated property not updating LWC after imperative call

Best Answer

The renderedCallback is only called if the template needs to change. If you set the data from the wired function to a property that is also in the template, then you'll see the renderedCallback get called again. Something like this

@wire(getRecord, { recordId: '$recordId', layoutTypes: ['Full']})
wiredRecord({ data, error }) {
  if (data) {
    console.log('Data');
    console.log(data);
    this.someProp = data;
  } else if (error) {
    console.log('Error');
    console.log(error);
  }
}

Then in the .html

<template>
    {someProp}
<template>
Related Topic