---
title: useSignal() Hook | Tutorial
contributors:
  - manucorporat
  - adamdbradley
  - neonpie
  - GustavoMelloGit
  - mrhoodz
  - AnthonyPAlicea
  - mhevery
  - Bootstrap-Paradox
  - itsthesteve
  - zanettin
updated_at: '2023-06-26T13:18:25Z'
created_at: '2022-11-20T08:50:32Z'
---

Use `useSignal()` to store any single value similar to `useStore()`. `useSignal` is heavily optimized when it comes to re-rendering components. It is able to skip re-renderings of parent components even when the signal itself is defined in the parent. `useSignal` works with all [primitive types](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) as well as with not nested / flat objects. If you need to store arrays or complex objects use [useStore](/docs/(qwik)/components/state/index.mdx#usestore) instead.

Some examples would be:

```tsx
const intStore = useSignal(0);
const stringStore = useSignal('foo');
const booleanStore = useSignal(true);
const objectStore = useSignal({fruit: 'apple', color: 'green'});

// DON'T DO THIS!
const arrayStore = useSignal(['banana','oranges']);
const nestedObjectStore = useSignal({
  fruits: {
    banana: 10,
    apple: 5
  },
  vegetables: {
    tomato: 7,
    broccoli: 14
  }
});
```

To read or update the values you can simply access the `value` property:

```
<>
  <button onClick$={() => intStore.value++}>Click me</button>
  <p>{intStore.value}</p>
</>
```

It is also able to hold a reference of a DOM element created by the component.

There are two parts to retrieving a DOM element reference:

1. `useSignal()` returns a store object that contains a `value` property which will eventually contain the reference.
2. `ref={_ref_variable_}` is a prop binding that will set the `value` property of the `ref` object to the DOM element.

### Example

The example on the right uses `useSignal()` to get a reference to the `aside` element. However, it is missing the `ref` prop binding. Add the `ref` prop binding to make the example work as expected.
