Edit tutorial

Synchronous Events with useVisibleTask$()

While not a common use case, you may occasionally need to process events synchronously.

Since Qwik processes asynchronously by default, your code must be explicitly configured for synchronous calls.

There are two ways of processing events synchronously:

  1. preferred way: use sync$() to load code synchronously. Fast, resumable but with significant restrictions on event handler size.
  2. eager registration: use useVisibleTask$() to load code synchronously. No restrictions, but requires eager code execution, which goes against resumability.

This example shows how to eagerly execute code and set up a classical event handler with no restrictions but with the cost of eager execution.

Your task: Convert the onClick$ from asynchronous event to synchronous event by using useVisibleTask$ lifecycle and normal event registration.

Building preview

Refreshing App output

Compiling the latest client and SSR result for your current code.

No console activity yet

Interact with the app or trigger a render to see client and SSR messages here.