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:

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

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

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

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

render optimization with renderOnce

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.