1

I understand that wired methods are called twice. (1) Once, before connectedCallback with the empty object (2) Second, after the renderedCallback.

Referred to this link

However, when tested out with a sample methods it seems to contradict the above points.

In the Image below, we can see that the time loaded for render method is at 609 millisecond, however for the wiredFunction it is showing 606 millisecond.

Code used to capture the time:

const d = new Date();
let time = d.getHours()+ ':'+ d.getMinutes() + ':' + d.getSeconds() + ':' +
d.getMilliseconds();

Why this wiredFunction is called at the wrong time?

Code to log time for each method

Timings

1
  • Please don't paste code as images, as it makes it hard to copy-paste, and may hinder those that are visually impaired.
    – sfdcfox
    Commented May 5 at 0:37

1 Answer 1

1

You're using an ordinary variable, not a list, so what you're seeing is the results of only the last value. Your code actually runs the following methods, in this order:

  • constructor (4:15:15.343)
  • ContactObjectData (unknown time)
  • connectedCallback (4:15:15.349)
  • render (unknown time)
  • ContactObjectData (4:15:15.606)
  • render (4:15:15.609)

In other words, the values from the first ContactObjectData and render are discarded, since the methods are called twice. You'll see that the second ContactObjectData occurs 3 milliseconds before the render method is called again.

Let's fix your code:

render() {
  const time = getFormattedTime();
  if(this.renderText1) {
    this.renderText2 = time;
  } else {
    this.renderText1 = time;
  }
  return templatePrimary;
}
@wire(getRecord, { recordId: 'theRecordId', fields: FIELDS })
ContactWireData({ data, error }) {
  const time = getFormattedTime();
  if(!data) {
    this.wiredFunction1 = time;
  } else {
    this.wiredFunction2 = time;
  }
}

This is the expected behavior.

2
  • Thanks, Brian for this helpful Insight. Now that I have updated the code as per the above suggestion. Below are the timings: constructor - 6:21:56:555 | Wired Function1 - 6:21:56:555 | connectedCallback - 6:21:56:566 | render1 - 6:21:56:566 | Wired Function2 - 6:21:56:832 | render2 - 6:21:56:834 | renderedCallback - 6:21:56:834 this all makes sense now. Thanks, Again! Commented May 5 at 0:55
  • @alekhsharma Of course, happy to help!
    – sfdcfox
    Commented May 5 at 1:42

You must log in to answer this question.

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