Render cycle
Atomico optimizes the execution of your script by minimizing resources through the rendering control.
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 theconnectedCallbackhas been executed by the customElement. - 2.
componentInstance.updated: the render cycle for first mount or update is encapsulated incomponentInstance.updated. - 3.
componentInstance.unmounted: resolved once thedisconnectedCallbackhas 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: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
});
});
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.updatedfunction component(){
useEffect(()=>{
console.log("Component mounted");
()=> console.log("Component unmounted");
}, []);
return <host/>
}
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
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;
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.Atomico by default has a good performance, but it can be further optimized if certain techniques are applied.
JSX
Template string
const staticDom = (
<host shadowDom>
<slot />
</host>
);
function component() {
return staticDom;
}
function component() {
return html`<host shadowDom>
<slot />
</host>`;
}
A static node is equivalent to using
node.cloneNode(true)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.
Last modified 1yr ago