useSignal()

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

Next: useClientEffect$()

Edit Tutorial