Lite Components

In addition to standard Qwik components that have all of the lazy-loaded properties of Qwik, Qwik also supports lite components that act more like traditional frameworks.

function MyButton(props: { text: string }) {
  return <button>{props.text}</button>;
}

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 the MyApp render function.
• MyButton Whenever the render function of MyApp executes, it will also force the execution of MyButton.
• MyButton does not have a host element.

You can think of lightweight components as being inlined into the component where they are instantiated.