# Run Code When a Component Renders

The `renderedCallback()` lifecycle hook is unique to Lightning Web Components. Use it to perform logic after a component has finished the rendering phase. This [hook flows](/docs/platform/lwc/guide/create-lifecycle-hooks.md) from child to parent.

When a component renders, the expressions used in the template are reevaluated.

## Rerendering Components

After a component is connected and rendered, any changes or mutations to its state trigger the rerendering process:

1. The component gets marked as "dirty."
2. A microtask rerender the component gets enqueued.

For example, components get rerendered when a property's value 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. To learn more about which changes are tracked, see [Reactivity](/docs/platform/lwc/guide/reactivity.md).

When a template is rerendered, the LWC engine attempts to reuse the existing elements. In the following cases, the engine uses a diffing algorithm to decide whether to discard an element.

- Elements created using the [`for:each`](/docs/platform/lwc/guide/create-lists.md) directive. The decision to reuse these iteration elements depends on the `key` attribute. If `key` changes, the element may be rerendered. If `key` doesn’t change, the element isn’t rerendered, because the engine assumes that the iteration element didn’t change.
- Elements received as [slot](/docs/platform/lwc/guide/create-components-slots.md) content. The engine attempts to reuse an element in a `<slot>`, but the diffing algorithm determines whether to evict an element and recreate it.

## `hasRendered`

A component is usually rendered many times during the lifespan of an application. To use this hook to perform a one-time operation, use a boolean field like `hasRendered` to track whether `renderedCallback()` has been executed. The first time `renderedCallback()` executes, perform the one-time operation and set `hasRendered = true`. If `hasRendered = true`, don’t perform the operation.

## Event Listeners

It’s best to [add event listeners declaratively in an HTML template](/docs/platform/lwc/guide/events-handling.md). However, if you do need to add an event listener to a template element programmatically, do it in `renderedCallback()`. You don’t need to remove the listener. If a listener is added to the same element repeatedly, the browser ignores the duplicates.

## Considerations

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](/docs/platform/lwc/guide/data-wire-service-about.md).
- Don’t update a public property or field in `renderedCallback()`. See [Reactivity](/docs/platform/lwc/guide/reactivity.md).

:::tip
The `libsChartjs` module in the [lwc-recipes](https://github.com/trailheadapps/lwc-recipes) samples repo uses the `renderedCallback()` lifecycle hook.
:::

**See Also**

- [Lifecycle Flow](/docs/platform/lwc/guide/create-lifecycle-hooks.md)
- [Understand the Wire Service](/docs/platform/lwc/guide/data-wire-service-about.md)