> For the complete documentation index, see [llms.txt](https://atomico.gitbook.io/doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atomico.gitbook.io/doc/api/testing/test-dom.md).

# Render cycle

Atomico's render cycle works like this:

First, when the component is instantiated, 3 promises will be created pending resolution:

1. `componentInstance.mounted`: resolved once the `connectedCallback` has been executed by the customElement.
2. `componentInstance.updated`: the render cycle for first mount or update is encapsulated in `componentInstance.updated`.
3. `componentInstance.unmounted`: resolved once the `disconnectedCallback` has been executed by the customElement.

Render or rerender cases are:

1. First render.
2. Updating a property or attribute.
3. Update dispatched by a hook

Remember all updates are stacked into a single big loop of `componentInstance.updated.`

This improves the testing experience since to observe the changes you only have to wait for the resolution of `componentInstance.updated` , example:

```javascript
import { html } from "atomico";
import { expect } from "@esm-bundle/chai";
import { fixture } from "atomico/test-dom";
import { Component } from "./component.js";

describe("my test", () => {
  it("my-component", async () => {
    const componentInstance = fixture(html`<${Component}>
        <span>content...</span>
    </${Component}>`);

    await componentInstance.updated; // fist render

    componentInstance.myProp1 = 10;
    componentInstance.myProp2 = 20;
    componentInstance.myProp3 = 20;

    await componentInstance.updated; // now we can observe the effects on the DOM from the previous updates
    
    await componentInstance.unmounted; // the component has been unmounted
  });
});
```

### Webcomponent as function

The first rendering as the update of a prop will call to execute again the function that defines our component, Atomico internally stores the references to support the Hooks api and will render the virtualDOM returned by said function, this is encapsulated within `componentInstance.updated`

```jsx
function component(){
    useEffect(()=>{
        console.log("Component mounted");
        ()=> console.log("Component unmounted");
    }, []);
    return <host/>
}
```

### SSR

Atomico allows modifying its life cycle in cases of SSR, improving the rendering of the CSS in case of SSR and avoiding the effects of useEffect and useLayoutEffect

```javascript
import {options} from "atomico";

// replace the internal use of CSS StyleSheet by the style tag
options.sheet = false; 

// will avoid hook side effects
options.ssr = true; 
```

#### Hydration

Technique to reuse the DOM generated by the SSR, Atomico only in the first render of the component that declares `date-hydrate` will retrieve the existing DOM in the DOM not created by Atomico to relate it to the virtualDOM, avoiding creating the node again.

### Optimization

Atomico by default has a good performance, but it can be further optimized if certain techniques are applied.

#### Render optimization with static nodes

{% tabs %}
{% tab title="JSX" %}

```jsx
const staticDom = (
  <host shadowDom>
    <slot />
  </host>
);
function component() {
  return staticDom;
}
```

{% endtab %}

{% tab title="Template string" %}

```javascript
function component() {
  return html`<host shadowDom>
    <slot />
  </host>`;
}
```

{% endtab %}
{% endtabs %}

A static node is equivalent to using `node.cloneNode(true)`

#### render optimization with renderOnce

```jsx
function component() {
  return <host shadowDom renderOnce>
    <slot />
  </host>
}
```

The renderOnce property renders the node only once, one of the advantages of this technique is that the virtualDOM can access the scope of the function.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://atomico.gitbook.io/doc/api/testing/test-dom.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.