---
title: useComputed$() | Tutorial
contributors:
  - adamdbradley
  - muralikrishna8
  - jmmon
  - manucorporat
  - mhevery
  - bryanhannes
  - devagja
  - avivr
  - mrhoodz
  - wmertens
updated_at: '2026-02-10T12:00:00Z'
created_at: '2022-08-02T12:07:45Z'
---

For this tutorial, we would like to fetch the list of repositories for a given GitHub organization. To aid you, we have added the `getRepositories()` function to the bottom of the file. Your task is to use the `getRepositories()` function to fetch the list of repositories whenever the user updates the `org` input.

Qwik provides [useComputed$()](/docs/(qwik)/core/state/index.mdx) to help you fetch and display data from the server. When fetching data the application can be in one of three states:

- `pending`: the data is being fetched from the server => Render `loading...` indicator.
- `rejected`: the data could not be fetched from the server due to an error => Render the error.
- `resolved`: the data has successfully been fetched from the server => Render the data.

Use [useComputed$()](/docs/(qwik)/core/state/index.mdx) function to set up how the data is fetched from the server.

## Fetching data

Use [useComputed$()](/docs/(qwik)/core/state/index.mdx) to set up how the data is fetched from the server.
```jsx
const reposResource = useComputed$<string[]>(({ abortSignal }) => {
  // We need a way to re-run fetching data whenever the `github.org` changes.
  // Reading githubOrg.value re-runs this function whenever it changes.
  const org = githubOrg.value;

  // The abortSignal is automatically (lazily) provided and will be aborted when this
  // function re-runs, allowing you to cancel pending operations.
  return getRepositories(org, abortSignal);
});
```

The [useComputed$()](/docs/(qwik)/core/state/index.mdx) function returns a `ComputedSignal`, which is reactive state that can be serialized by Qwik. Qwik automatically tracks every signal and store property the function reads before the first `await`, so it re-runs when they change; reads after an `await` must use the `track()` provided on the context argument. The `abortSignal` allows you to cancel pending operations when the function re-runs. Finally, the async function returns a promise that will resolve to the value.
  
## Rendering data

The `ComputedSignal` provides the `.pending` and `.error` reactive properties to allow you to render different content depending if the resource is `pending`, `resolved` or `rejected`.

During SSR, the rendering will pause until the `ComputedSignal` has loaded so it will always render as either `resolved` or `rejected`.

```jsx
{reposResource.pending ? <div>Loading...</div> : reposResource.error ? <div>Error: {reposResource.error}</div> : <div>{reposResource.value}</div>}
```

## SSR vs Client

Notice that the same code can render on both server and client (with slightly different behavior, which skips the `pending` state rendering on the server.)
