---
# System prepended metadata

title: Lazy Loading closures
tags: [$ and QRL]

---

# Lazy Loading closures

> * 如有錯誤處指正或任何建議，懇請留言，感謝!
> * 搭配 ChatGPT 進行翻譯，請小心服用
> * ▸ ... 為英文原文


:::spoiler ...
A closure can be converted into a lazy-loaded reference using the `$()` function. This generates a `QRL<Function>` type. A QRL is a lazy-loadable reference of the closure. In our case, we have extracted the closure associated with the `onInput` event into the component body. Because it is no longer inlined we need to change how the JSX refers to it from `onInput$` to `onInputQrl`.

Notice that our closure closes over the `store` that is captured by the Optimizer and then restored as needed.

### Example

In this example, we would like to demonstrate how easy it is to lazy-load behavior in Qwik. Let's lazy load the code that is executed when the `Enter` key is pressed. Wrap the code associated with `Enter` with `$()` to mark it for lazy loading. The resulting `QRL<()=>void>` can then be lazy-invoked with `.invoke()` and the result can be awaited with `await` keyword.

Look at the `Symbols` tab to see how the code was broken up into pieces.

::: 


###### tags: `$ and QRL`