Lifecycle Hooks

A lifecycle hook is a callback method triggered at a specific phase of a component instance’s lifecycle.

Called when the component is created. This hook flows from parent to child, which means that it fires in the parent first. You can’t access child elements because they don’t exist yet. Properties aren’t passed yet, either. Properties are assigned to the component after construction and before the connectedCallback() hook. For sample code, see Run Code When a Component Is Created.

Called when the element is inserted into a document. This hook flows from parent to child. You can’t access child elements because they don’t exist yet.

Use connectedCallback() to interact with a component's environment. For example, use it to:

• Establish communication with the current document or container and coordinate behavior with the environment.
• Perform initialization tasks, such as fetch data, set up caches, or listen for events
• Subscribe and Unsubscribe from a Message Channel.

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.

The connectedCallback() hook can fire more than one time. For example, if you remove an element and then insert it into another position, such as when you reorder a list, the hook fires several times. If you want code to run one time, write code to prevent it from running twice.

For sample code, see Run Code When a Component Is Inserted or Removed from the DOM.

Called after every render of the component. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification. This hook flows from child to parent.

A component is rerendered when the value of a property changes and that property is used either directly in a component template or indirectly in the getter of a property that is used in a template. See Reactivity.

If you use renderedCallback() to perform a one-time operation, you must track it manually (using an initialRender private property, for example). If you perform changes to reactive attributes, guard them or they can trigger wasteful rerenders or an infinite rendering loop.

Use renderedCallback() to interact with a component's UI. For example, use it to:

• Compute node sizing
• Perform tasks not covered by our template declarative syntax, such as add a listener for a non-standard event from a component’s child

Updating the state of your component in renderedCallback() can cause an infinite loop. For example:

• Don’t update a wire adapter configuration object property in renderedCallback(). See Understand the Wire Service.
• Don’t update a public property or field in renderedCallback(). See Reactivity.

For more information, see Run Code When a Component Renders.

Call this method to update the UI. It may be called before or after connectedCallback().

It’s rare to call render() in a component. The main use case is to conditionally render a template. Define business logic to decide which template (HTML file) to use. The method must return a valid HTML template.

For example, imagine that you have a component that can be rendered in two different ways but you don’t want to mix the HTML in one file. Create multiple HTML files in the component bundle. Import them both and add a condition in the render() method to return the correct template depending on the component’s state.

For a code sample, see Render Multiple Templates.

Called when the element is removed from a document. This hook flows from parent to child.

Use disconnectedCallback() to clean up work done in the connectedCallback(), like purging caches or removing event listeners.

You can also use this hook to unsubscribe from a message channel.

Called when a descendent component throws an error. The error argument is a JavaScript native error object, and the stack argument is a string. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification.

Implement this hook to create an error boundary component that captures errors in all the descendent components in its tree. Use the error boundary component’s errorCallback()lifecycle hook to log stack information and render an alternative view to tell users what happened and what to do next. The method works like a JavaScript catch{} block for components that throw errors in their lifecycle hooks or in their event handlers declared in an HTML template. It’s important to note that an error boundary component catches errors only from its children, and not from itself.

For sample code, see Handle Component Errors.

See Also

• Component Lifecycle