Skip to content

Commit

Permalink
docs: fix link useTask (QwikDev#2425)
Browse files Browse the repository at this point in the history
  • Loading branch information
forresst authored Dec 13, 2022
1 parent 3dee310 commit 5e991c1
Show file tree
Hide file tree
Showing 6 changed files with 13 additions and 13 deletions.
6 changes: 3 additions & 3 deletions packages/docs/src/routes/docs/components/state/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -224,13 +224,13 @@ export const Child = component$(() => {

Computed values are values that are derived from other values. They are useful when you have a value that is derived from other values, and you want to keep it in sync with the other values.

In Qwik there are two ways to create computed values, using [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) or [`useResource$()`](/docs/components/resource/index.mdx).
In Qwik there are two ways to create computed values, using [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) or [`useResource$()`](/docs/components/resource/index.mdx).

The main difference between the two is that [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) allows side effects and the execution is serialized, while [`useResource$()`](/docs/components/resource/index.mdx) is asynchronous and multiple `useResource$()` calls can happen in parallel.
The main difference between the two is that [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) allows side effects and the execution is serialized, while [`useResource$()`](/docs/components/resource/index.mdx) is asynchronous and multiple `useResource$()` calls can happen in parallel.

`useTask$()` is usually used to compute intermediate state, while [`useResource$()`](/docs/components/resource/index.mdx) has better ergonomics to compute the final state, used for rendering. Let's see some examples:

### [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) example
### [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) example

```tsx
export default component$(() => {
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/routes/docs/components/styles/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export const CmpStyles = component$(() => {

Using `useStylesScoped$` will scope all child selectors in a ruleset to the component. If you need to style child components rendered through a `<Slot />`, you will need to break out of the scoped styles using the `:global()` selector.

```
```tsx
import { useStylesScoped$ } from '@builder.io/qwik';

export const List = component$(() => {
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/routes/docs/faq/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ We also have an interactive [tutorial](../../tutorial/welcome/overview/) to get

## What are all those `$`?

You might have noticed there are more [`$`](../advanced/dollar/index.mdx) than usual in Qwik apps: [`component$()`](/docs/components/overview/index.mdx#component), [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch), `<div onClick$={() => console.log('click')} />`. It's not for nothing. Qwik breaks your application into small chunks; these pieces are smaller than the component itself. For event handlers, hooks, etc... the `$` signals both to the [optimizer](../advanced/optimizer/index.mdx) and to the developer when it's happening.
You might have noticed there are more [`$`](../advanced/dollar/index.mdx) than usual in Qwik apps: [`component$()`](/docs/components/overview/index.mdx#component), [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask), `<div onClick$={() => console.log('click')} />`. It's not for nothing. Qwik breaks your application into small chunks; these pieces are smaller than the component itself. For event handlers, hooks, etc... the `$` signals both to the [optimizer](../advanced/optimizer/index.mdx) and to the developer when it's happening.

**Example:**

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Qwik is resumable. Resumability means that the application starts on the server

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

> **NOTE** See [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) for behavior that needs to be executed on both client and server.
> **NOTE** See [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) for behavior that needs to be executed on both client and server.
## When is `useClientEffect$()` executed?

Expand Down
6 changes: 3 additions & 3 deletions packages/docs/src/routes/tutorial/hooks/use-watch/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ contributors:
- adamdbradley
---

Use [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) to execute a function before the initial render and whenever the tracking values change. The function executes before rendering, but it can't delay rendering, so if [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) is asynchronous, the rendering will happen before the [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) is fully executed.
Use [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) to execute a function before the initial render and whenever the tracking values change. The function executes before rendering, but it can't delay rendering, so if [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) is asynchronous, the rendering will happen before the [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) is fully executed.

## Tracking store changes

The [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) hook receives a `track()` function used for setting up subscriptions that will automatically rerun the [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) hook. The set of `track()` properties resets on each [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) execution, therefore it is important to always use `track()` to set up subscriptions anew. Because of this it is possible for the [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) to subscribe to different properties over time.
The [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) hook receives a `track()` function used for setting up subscriptions that will automatically rerun the [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) hook. The set of `track()` properties resets on each [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) execution, therefore it is important to always use `track()` to set up subscriptions anew. Because of this it is possible for the [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) to subscribe to different properties over time.

## Cleanup

The [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) hook can return a cleanup callback. This is useful for cleaning up any resources before new execution.
The [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) hook can return a cleanup callback. This is useful for cleaning up any resources before new execution.

### Example
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ contributors:
- manucorporat
---

In addition to implicit reactivity created by the templates, Qwik supports explicit execution of code when a property changes. This is achieved through the [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) hook. [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) hooks execute before the component renders and can be asynchronous. The hook can also have a clean-up function that is invoked on the next hook execution or when the component is removed.
In addition to implicit reactivity created by the templates, Qwik supports explicit execution of code when a property changes. This is achieved through the [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) hook. [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) hooks execute before the component renders and can be asynchronous. The hook can also have a clean-up function that is invoked on the next hook execution or when the component is removed.

In this example clicking on `+1` updates `count` immediately. What we would like is to update the `delay count` after a 2-second delay. If `count` is updated before the 2 seconds are up then the timer is restarted.

Notice that [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) callback receives `track` function. Use the `track` function to tell Qwik which properties should trigger this watch. The `track` function creates subscriptions in store. On each invocation of [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) the subscriptions are cleared, so it is important to always set up a new set of subscriptions. This is useful if the set of subscriptions changes during the function lifetime.
Notice that [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) callback receives `track` function. Use the `track` function to tell Qwik which properties should trigger this watch. The `track` function creates subscriptions in store. On each invocation of [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) the subscriptions are cleared, so it is important to always set up a new set of subscriptions. This is useful if the set of subscriptions changes during the function lifetime.

The [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) callback function can return a cleanup function. The clean-up function is invoked on the next [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) callback execution or when the component is removed. In our case, the cleanup function is used for returning code which clears the `setTimeout`.
The [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) callback function can return a cleanup function. The clean-up function is invoked on the next [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) callback execution or when the component is removed. In our case, the cleanup function is used for returning code which clears the `setTimeout`.

The [`useTask$()`](/docs/components/lifecycle/index.mdx#usewatch) callbacks execute before the component is rendered. This allows them to be used to compute values used in rendering. The function runs on both server and client. The server execution sets up subscriptions that are then serialized and available to the client. This saves the client from having to download all of the components and execute them at least once to recover the subscription information for the system.
The [`useTask$()`](/docs/components/lifecycle/index.mdx#usetask) callbacks execute before the component is rendered. This allows them to be used to compute values used in rendering. The function runs on both server and client. The server execution sets up subscriptions that are then serialized and available to the client. This saves the client from having to download all of the components and execute them at least once to recover the subscription information for the system.

0 comments on commit 5e991c1

Please sign in to comment.