3

I know it may be a simple question, but I'm passing url parameters received in my aura component and passing it to my nested LWC, like this:

<aura:component implements="lightning:isUrlAddressable">
      <c:lwcVisualizarCuotas recordId="{!v.pageReference.state.c__id}" precio="{!v.pageReference.state.c__precio}"/>
</aura:component>

I want in my LWC to call an apex method as soon as the id is received from my aura component. Which life cycle is it? Connected or rendered? Or maybe the constructor? I want to use the most efficient way to automatically call that apex method. Thanks for the help!

2

EDIT

I ran a test on 10 loads each of a setter based call and a connectedCallback based call.

Turns out that the average finish time of the function is (I think) statistically significantly faster via the connectedCallback

  • Average time for the setter based call was 445ms
  • Average time for the connectedCallback based call was 408ms

That's nearly 10% quicker. I haven't tested a wired callback... I may do that later today.

Here's the code I used (apex method just returns a string):

_recordId;
@api
set recordId(value) {
  this._recordId = value;
  //console.time('setter');
  //this.callTestMethodDeleteMe()
}
get recordId() {
  return this._recordId;
}

connectedCallback(){
  console.time('connectedCallback');
  this.callTestMethodDeleteMe();
}

callTestMethodDeleteMe() {
  testMethodDeleteMe({})
    .then((result) => {
      //console.timeEnd('setter');
      console.timeEnd('connectedCallback');
    })
    .catch((error) => {
      console.log(error);
    });
}
4
  • ok thanks! so based on your experience and knowledge on best practices, you recommend I call my method in the setter or in the connectedCallback? It's just to learn and code better in the future. Jun 8 at 19:17
  • Actually, the milliseconds won't matter; no api calls can happen before connectedCallback is invoked anyways (they're placed into a queue for later execution).
    – sfdcfox
    Jun 8 at 19:22
  • I'm just doing a test.... Jun 8 at 19:25
  • @sfdcfox results are in - connectedCallback is not just similar... it seems faster Jun 8 at 20:18
2

@api properties are set before connectedCallback is called.

The connectedCallback() hook is invoked with the initial properties passed to the component. If a component derives its internal state from the properties, it's better to write the logic in a setter than in connectedCallback(). For sample code, see this StackExchange post by Salesforce engineer, Pierre-Marie Dartus.

That means that, for an initial callback, you can use connectedCallback():

connectedCallback() {
  this.callApex(); // properties are already set
}

If the property changes, then you do may need to react to it via a setter:

@api set recordId(value) {
  this._recordId = value;
  this.callApex();
}
// Set @api only once on get or set, not both
get recordId() {
  return this._recordId;
}

If that's the case, then connectedCallback isn't necessary, as you'll get the callback called every time the property changes. That's probably ideal, since the parent is allowed to change the value at any time.

Finally, you can always wire the method if you want the callback handled automatically:

@wire(myApexMethod, { recordId: '$recordId' })
apiData;

Or:

@wire(myApexMethod, { recordId: '$recordId' })
apiDataHandler({data, error}) {
  if(data) { 
    // Do something with the data
  }
  if(error) {
    // Display an error
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.