0

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

1 Answer 1

1

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>
1
  • Thank you so much @Ben Nguyen!!! I guess that makes a lot of sense, and it definitely did the trick. I appreciate the help! Commented May 8, 2023 at 19:06

You must log in to answer this question.

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