# Run Code When a Component Is Inserted or Removed from the DOM

The `connectedCallback()` lifecycle hook fires when a component is inserted into the DOM. The `disconnectedCallback()` lifecycle hook fires when a component is removed or hidden from the DOM. Both hooks flow from parent to child. To access the host element, use `this`. To access elements in a component’s template, use `this.template`.

`connectedCallback()` and `disconnectedCallback()` are standard lifecycle callbacks that follow [web components standards](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).

:::tip
To check whether a component is connected to the DOM, you can use [`this.isConnected`](/docs/platform/lwc/guide/js-web-apis.md).
:::

## `connectedCallback()`

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](/docs/platform/lwc/guide/use-message-channel-subscribe.md).
- Navigate to different page types, like records and list views using [the `lightning/navigation` module](/docs/platform/lwc/guide/use-navigate-basic.md).
- Work with [third-party web components](/docs/platform/lwc/guide/create-use-custom-elements.md).

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](https://salesforce.stackexchange.com/questions/334634/lwc-setting-properties-in-connectedcallback) by Salesforce engineer Pierre-Marie Dartus.

`connectedCallback()` 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.

You can’t access child elements from the callbacks because they don’t exist yet.

```html
<template>
  <div>Some content</div>
</template>
```

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

export default class ConnectedCallbackExample extends LightningElement {
  connectedCallback() {
    // This doesn't work
    const div = this.template.querySelector("div");
  }
}
```

## `disconnectedCallback()`

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](/docs/platform/lwc/guide/use-message-channel-subscribe.md).

## Don't mark lifecycle hooks as `async`

`connectedCallback()` and `disconnectedCallback()` are synchronous. The framework doesn't await a promise that's returned from a lifecycle hook. If you mark a hook as `async`, code after an `await` runs after the framework moves on, which causes unpredictable order of execution relative to rendering, parent and child callbacks, and event handlers.

To run async work from a lifecycle hook, call a separate `async` method from the synchronous hook.

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

export default class extends LightningElement {
  connectedCallback() {
    this.loadData();
  }

  async loadData() {
    const result = await fetchSomething();
    // Update reactive properties here.
  }
}
```

**See Also**

- [Use Getters and Setters to Modify Data](/docs/platform/lwc/guide/js-props-getters-setters.md)
- [Lifecycle Flow](/docs/platform/lwc/guide/create-lifecycle-hooks.md)
- [Communicate Across the DOM](/docs/platform/lwc/guide/events-pubsub.md)