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.
function MyButton(props: { text: string }) {
  return <button>{props.text}</button>;
}

// Component: declared using `component$()`.
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.
• 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.