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 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.

Limitations Unlike regular Qwik components, lite components can not use use methods, such as useSignal or useStore. 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.