Showing posts with label salesforce web components. Show all posts
Showing posts with label salesforce web components. Show all posts

Friday, October 23, 2020

Learn to code

Learn Coding

Before Getting Started...

IM1003 Object-oriented Programming

Java Basics
Java OOP
Java Graphics
Case Study / Assignment

IM2073 Web Programming

IM2073 Mobile (Android) Programming

How to Install & Get Started...

Windows
Unix, Ubuntu Linux & macOS

Android

Arduino

Power User Software Notes

ICPC

Java Programming - Part I

For First-Time Programmers
For New Comers to Java & OOP

Power Programmers

Java Programming - Part II

Intermediate Java
Special Topics in Java
Java Appendices

Java ME (Obsoleted)

Java Game Programming

Client-Side Programming

HTML/CSS
JavaScript
Client-Side Frameworks
Node.js & Server-Side JavaScript

Database Programming

MySQL
JDBC
PostgreSQL
MongoDB

Server-side Programming

Java Servlet/JSP
PHP
Perl
Python

Webapps

Basics
Testing
Security
Misc

Dapps

Blockchain

Web Protocols

3D Graphics & OpenGL

Setup on Various Platforms
Computer Graphics with OpenGL
OpenGL|ES
Physics Engine

C/C++ Programming

C++ Programming Language
C Programming Language
C/C++ Compilers and IDEs
Salesforce Admin and developer Tutorials
Web Hits

Monday, October 7, 2019

salesforce lightning component LWC life cycle hooks

LWC lifecycle hooks video tutorial



    
In Salesforce Lightning Web Components (LWC), lifecycle hooks are methods that allow developers to hook into the lifecycle of a component. These hooks enable you to perform actions at specific stages of a component's lifecycle, such as when the component is created, rendered, inserted into the DOM, or removed from the DOM. Here are the available lifecycle hooks in LWC along with explanations and code samples:

1. **constructor()**: This is the first lifecycle hook called when a component is created. It is used for initializing component state or setting up i
nitial values.

```javascript
import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    constructor() {
        super();
        // Initialize state or perform setup tasks
    }
}
```

2. **connectedCallback()**: This lifecycle hook is called when the component is inserted into the DOM. It's commonly used for setting up event listeners or performing one-time initialization tasks.

```javascript
import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    connectedCallback() {
        // Perform setup tasks or attach event listeners
    }
}
```

3. **renderedCallback()**: This hook is called after the component's template has been rendered and is applied to the DOM. It's useful for interacting with the DOM after rendering has occurred.

```javascript
import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    renderedCallback() {
        // Interact with the DOM after rendering
    }
}
```

4. **disconnectedCallback()**: This hook is called when the component is removed from the DOM. It's used for cleanup tasks like removing event listeners or resetting state.

```javascript
import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    disconnectedCallback() {
        // Clean up tasks like removing event listeners
    }
}
```

5. **reconnectedCallback()**: This hook is called when the component is removed from the DOM and then inserted back into the DOM. It's useful for reinitializing state or performing setup tasks after the component is reinserted.

```javascript
import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    reconnectedCallback() {
        // Reinitialize state or perform setup tasks
    }
}
```

6. **errorCallback()**: This hook is called when there's an error during rendering, updating, or within an event handler. It's used for error handling and logging.

```javascript
import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    errorCallback(error, stack) {
        // Handle errors or log them
    }
}
```

These lifecycle hooks provide flexibility and control over the behavior of your Lightning Web Components at various stages of their lifecycle. Utilize them according to your component's requirements for initialization, cleanup, and interaction with the DOM.