render() and renderedCallback() in LWC

render()

This function used for conditional rendering and use to override the standard rendering functionality. This function get called before and after connectedCallback().

render() must return a valid HTML template.

render() method is not part of lifecycle hook but its a protected method on the LightningElement class. A hook usually tells you that something happened, and it may or may not exist on the prototype chain. The render() method must exist on the prototype chain.

 renderedCallback()

renderedCallback() method is called after render() method. This method called after every render of the component. This hook flows from child to parent. This method called after every render of the component, so you need to be careful, if you want to perform some operation is specific conditions like performing one time operation, use a private boolean property like hasRendered to track whether renderedCallback() has been executed.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s