# useSignal()

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

:::spoiler ...
Use `useSignal()` to store any single value similar to `useStore()`. `useSignal` is heavely 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 [primitve 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](https://qwik.builder.io/docs/components/state/) instead with the `{recursive: true}` option.

Some examples would be:

const intStore = useSignal(0);
const stringStore = useSignal('foo');
const booleanStore = useSignal(true);
const objectStore = useSignal({fruite: '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 simple access the `value` property:

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

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 `input` element. However, it is missing the `ref` prop binding. Add the `ref` prop binding to make the example work as expected.

:::

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