Introduction

Lifecycle Hooks are functions that are called automatically at a specific time designed to help you manage and manipulate the behavior of a component and its elements, such as when it's about to be created, updated, or destroyed.

These functions allow you to control and manage various aspects of your components at runtime.

Here is the list of all methods:

• constructor: helps LWCs get ready before they start working.
• connectedCallback: called when the LWC is ready to be used and is displayed on the web page.
• disconnectedCallback: called when the LWC is no longer being used and is removed from the web page.
• render: this method allows selecting which template we want to show based on some conditions, and it is executed after the execution of connectedCallback.
• renderedCallback: helps the LWC know when it needs to be updated and show new information on the web page.
• errorCallback: helps the LWC know when there's a problem and how to deal with it.

<aside> ☝ You can find the latest official documentation here: https://lwc.dev/guide/lifecycle

</aside>

Constructor: running code when a component is created

• The constructor() method fires when a component instance is created.
• Don’t add attributes to the host element during construction. You can add attributes to the host element in any other lifecycle hook.
• These requirements from the HTML: Custom elements spec apply to the constructor().
  • The first statement must be super() with no parameters. This call establishes the correct prototype chain and value for this. Always call super() before touching this.
  • Don’t use a return statement inside the constructor body, unless it is a simple early return (return or return this).
  • Don’t use the document.write() or document.open() methods.
  • Don’t inspect the element’s attributes and children because they don’t exist yet.
  • Don’t inspect the element’s public properties because they’re set after the component is created.

This example is illegal because it adds an attribute to the host element in the constructor().