Lite Components

In addition to the standard component$() with all of it's lazy-loaded properties, Qwik also supports lightweight (lite) components that act more like traditional frameworks. Lite components may also be called inline components.

import { component$ } from '@builder.io/qwik';

// 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, MyButton is a lite component. Unlike the standard component$(), lite components cannot be individually lazy-loaded; instead they are bundled with their parent component. In this case:

• MyButton will get bundled with the MyApp component.
• Whenever MyApp is rendered, it will also guarantee that MyButton is rendered.
• MyButton does not have a host element.

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

Limitations

Lite components come with some limitations that the standard component$() does not have. Lite components:

• Cannot use use methods such as useSignal or useStore.

As the name implies, lite components are best used sparingly for lightweight pieces of markup since they offer the convenience of being bundled with the parent component.