Scribd
Upload
29 views

Lifecycle hooks in LWC

Salesforce

Uploaded by

Sai prakash reddy Muthukuru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views

Lifecycle hooks in LWC

Salesforce

Uploaded by

Sai prakash reddy Muthukuru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Lifecycle Hooks in LWC

Lifecycle
Hooks
LWC
in
DHANANJAY AHER

👾A lifecycle hook is a callback method triggered at a specific phase of a component


instance’s lifecycle.
💻Constructor():This method calls when the component is first created. The
flow of this method is from the parent component to the child component. In
this phase, we can’t access child elements in the component body because they
don’t exist by that time. Even Properties are not passed.

Use of constructor:

We can set the Properties in Constructor();

We can not use navigation service in the constructor();

We can call an Apex method inside constructor method();

We can create and dispatch Event from an 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.

💻connectedCallback():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().
💻renderedCallback():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().


💻render():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.

💻disconnectedCallback():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.

💻errorCallback(error, stack):Called when a descendant 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.

:
Source https://developer.salesforce.com/docs/component-library/documentation/lwc/reference_lifecycle_hooks

You might also like