One of Qwik's super powers lies in its lazy-loading features.
- 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
- a captured variable/symbol must be either:
- importable (Either from a different file as
importor from this file using
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.
Symbols tab and notice that the
<Greeter /> component is no longer an independent export, but instead is bundled as part of the