Lite Components
In addition to standard Qwik components that have all of its lazy-loaded properties, Qwik also supports lightweight (lite) components that act more like traditional frameworks.
// Lite component: declared using a standard function.
export const MyButton = (props: { text: string }) => {
return <button>{props.text}</button>;
};
// Component: declared using `component$()`.
export const MyApp = component$(() => {
return (
<div>
Some text:
<MyButton text="Click me" />
</div>
);
});
In the above example, the MyButton
is a lite component. Lite components' lazy loading is merged with the regular component they are part of. In this case:
MyButton
will get bundled with theMyApp
render function.- Whenever the render function of
MyApp
executes, it will also force the execution ofMyButton
. MyButton
does not have a host element.
You can think of lightweight components as being inlined into the component, where they are instantiated.
Limitations Unlike regular Qwik components, lite components can not use
use
methods, such asuseSignal
oruseStore
. As it name implies, lite components are better used sparsely for lightweight pieces of markup since they offer the convenience of being bundled with the parent component.