Why This Is Useful
You want some code to run before your Lightning Web Component shows itself to users. Setting default values, fetching something, working out what to display.
There’s a lifecycle hook for exactly that, and it’s called connectedCallback().
The Code
import { LightningElement } from 'lwc';
export default class QuickTipLwc extends LightningElement {
nonsenseText;
connectedCallback() {
this.nonsenseText = 'Taco Bell is that heat, fam';
}
}<template>
<p>{nonsenseText}</p>
</template>Refresh the page and the text is already there. It never renders empty and then pop in, because connectedCallback() fires when the component is inserted into the DOM, before the first render.
Obviously you’d do something more useful than setting a string, but that’s the mechanism.
Two Things To Watch Out For
1. It can fire more than once. If your component gets removed from the DOM and reinserted, it runs again. Don’t assume it’s a one time setup unless you’ve guarded it.
2. You cannot touch child elements yet. This is the one that catches people. The component isn’t rendered at this point, so this returns null:
connectedCallback() {
//null. The DOM doesn't exist yet.
const el = this.template.querySelector('.my-element');
}If you need to poke at rendered DOM, that’s renderedCallback(). But be careful there, because it fires on every re-render, and updating a reactive property inside it will send you into an infinite loop. Use a guard clause if you go down that road.
The Order Things Happen In
1. constructor() – component created. Don’t touch anything here, not even @api properties, they haven’t arrived yet.
2. connectedCallback() – inserted into the DOM. @api properties are available. Set up your state here.
3. render() – the template renders.
4. renderedCallback() – DOM now exists, you can query it.
5. disconnectedCallback() – component removed. Clean up subscriptions and intervals here.
That last one matters more than people realise. If you’ve subscribed to a message channel or started a setInterval, disconnectedCallback() is where you tear it down. Skip it and you’ve got a memory leak quietly running in the background.
For the full picture I’ve written up the complete guide to LWC lifecycle hooks, which goes through every one of these properly. Salesforce’s own lifecycle hooks documentation is worth a look too.
Get Coding With The Force Merch!!
We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.
Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!
Check Out More Coding With The Force Stuff!
If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!
Youtube
Patreon
Github
Facebook
Twitter
Instagram
Salesforce Development Books I Recommend
Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Good Non-SF Specific Development Books:
Clean Code
Clean Architecture
