function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Herish SurendranHerish Surendran 

In LWC which gets executed first connectedCallback() or @wire (property or function) in LWC ?

AbhishekAbhishek (Salesforce Developers) 
Your query is answered here,

https://salesforcediaries.com/2019/12/13/connectedcallback-in-lightning-web-component/

https://salesforce.stackexchange.com/questions/252699/when-do-wire-methods-run-lwc

The above Blogs have a clear explanation please check it.

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks.
dayana hanedayana hane
This is one of life cycle hook in web component JavaScript. connectedCallBack function invokes/fires automatically when certain lwc component inserted into web dom. It is works like init handler in lightning aura component, we can say it is lwc init handler. 


mylonestar (https://www.mylonestar.online/)
ramona archerramona archer
Have you tried calling getData() tocheck which parent component is returning first? What getter method are you using in the JS code?
https://hireessaywriter.onl/
Martha Simons 14Martha Simons 14
Look at this:
http://guidinghawk.com/wp-content/uploads/engineering.pdf
https://ottisk.com/wp-content/uploads/wp_dndcf7_uploads/2021/04/cs.pdf
https://ottisk.com/wp-content/uploads/wp_dndcf7_uploads/2021/04/writing_2.pdf
https://ottisk.com/wp-content/uploads/wp_dndcf7_uploads/2021/04/writing_4.pdf
Suraj Tripathi 47Suraj Tripathi 47
Hii Herish Surendran,


This is one of the life cycle hook in web component JavaScript.
connected callback function invokes/fires automatically when a certain lwc component inserted into web dom. 
It works like an init handler in the lightning aura component, we can say it is lwc init handle

You can go with this link for better reference(https://www.salesforcepoint.com/2020/10/connectedcallback-in-lightning-web.html).

Thanks and Regards,
Suraj

Please mark it as Best Answer if you find your solution.
Brandon Chang 9Brandon Chang 9

Short answer: wire, connectedCallback, wire again.  

Longer answer: If you have a @wire decorator to a property or in this case a function, which would mean the code looks like:

connectedCallback() {
  console.log('I run second);
}

@wire(functionName, { parameter: "sample"})
wiredFunctionName({error, data}) {
  console.log("I run first, then third");
}

Per SF documentation here (https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_wire_service_about), "the property is assigned a default value...before any other lifecycle event....with data and error properties of undefined".  So even though the wire function will fire first, it will not be returning any expected apex data from functionName (Even if the parameter is correctly defined like sample).  After that the connectedCallback will run when the component is inserted into the DOM. Then finally, the wire will get the expected data from Apex. 

If you need apex data in the connectedCallback, it is probably best to use an imperative call instead
Gary RalstonGary Ralston
Hey Herish,

In a Lightning Web Component (LWC), the connectedCallback() function is executed before the @wire property or function.
The connectedCallback() function is a lifecycle hook that is called after a component has been added to the DOM. This is the first method that gets called when a component is instantiated.
On the other hand, the @wire property or function is used to load data from a data source, such as an Apex class or a wire adapter. The @wire property or function is executed after the connectedCallback() function. The @wire property or function can also be used inside the connectedCallback() function, but it will still be executed after the connectedCallback() function.

For a complete understanding of the Lightning Web Component (LWC) lifecycle hooks, check out the article at https://logcodes.com/lwc-lifecycle-hooks/. This source will offer a comprehensive overview of the LWC lifecycle hooks in Salesforce.