---
# System prepended metadata

title: useClientEffect$()
tags: [Lifecycle Hooks]

---

# useClientEffect$()

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


:::spoiler ...
Use `useClientEffect$()` to execute code after the component is resumed. This is useful for setting up timers or streams on the client when the application is resumed.

## `track()` and `useClientEffect$()`


`useClientEffect$()` receives a `track()` function just like `useTask$()`. Use the `track()` function to trigger the effect when the store is updated. See [reactivity](https://qwik.builder.io/tutorial/reactivity/explicit/) for more information.

## Component Life Cycle and SSR


Qwik is resumable. Resumability means that the application starts on the server and then is transferred to the client. On the client, the application continues execution from where it left off. A common use case is creating a component on the server, pausing, and then resuming on the client. To make the component fully functional, it may be necessary to execute code eagerly on the client to set up timers or streams.

`useClientEffect$()` is a client only method. (There is no equivalent on the server.)

> **NOTE** See [`useTask$()`](https://qwik.builder.io/docs/components/lifecycle/#usetask) for behavior that needs to be executed on both client and server.

## When is `useClientEffect$()` executed?


Client effect code is executed after the component is resumed. The `useClientEffect$()` method takes an additional argument (`{eagerness:'visible|load|idle'}`) that controls when the effect is executed. There are three options:

-   `visible` (default): Execute the effect when the component becomes visible. This is a preferred option because it delays the execution of the effect until the component is visible rather than eagerly on application startup (We are trying to minimize the amount of code the application runs on startup).
-   `load`: Execute the code as soon as possible. This is usually right after `DOMContentLoaded` event.
-   `idle`: Execute the code when the next idle callback is fired.

### Example

The example shows a clock component that is rendered below the fold. Use the `useClientEffect$()` to make the clock update the current time every second to make it work on the client. We have provided the utility function `updateClock` to aid your implementation.

Keep in mind that `useClientEffect$()` should return a cleanup function that releases the `setInterval` timer so that the timer can be properly cleaned up when the component is unmounted/destroyed.

::: 


###### tags: `Lifecycle Hooks`