Inline Components

One of Qwik's super powers lies in its lazy-loading features.

Qwik lazy-loads:

• Independent of hierarchy: Components can be loaded out of order. For example, the code for a child component can load before its parent code.
• Based on interaction: Code loading is deferred until a user interacts with a component.
• More than just components: Qwik lazy-loads any closure including components, event listeners, effects, and behaviors.

$ marks a closure as lazy-loadable. For example component$() method makes the component lazy-loadable. When you see a $ in Qwik code, you're crossing a lazy-loading boundary and have to be aware of special rules:

• any lexically scoped variables must be declared as const
• a captured variable/symbol must be either:
  • serializable
  • importable (Either from a different file as import or from this file using export)

If you want to ensure a component loads with another component, you create an inline component. Inline components load as a part of the parent component and are equivalent to how most other frameworks deal with components.

In this example, the <App> and a <Greeter> components are prepared for you. The <Greeter/> component is declared using the component$() method and is a Qwik component. Remove the component$() to convert <Greeter> to an inline component.

Open the Symbols tab and notice that the <Greeter/> component is no longer an independent export, but instead is bundled as part of the <App> component.