• Docs
  • Ecosystem
  • Tutorial
  • Blog
  • GitHub
  • @QwikDev
  • Discord

useSignal()

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 as well as with not nested / flat objects. If you need to store arrays or complex objects use useStore instead.

Some examples would be:

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.

Edit Tutorial