in which life cycle of an LWC does it receive a value from aura?

Question

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!

Answer 1

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);
    });
}

Answer 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
  }
}