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
importor from this file usingexport)
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.