js-signals.md

Signals

Signals are reactive primitives for managing application state.

(Reference)

Signals are reactive. They keep track of the subscriptions and notify subscribers when state has changed. Calling the getter creates a subscription, telling the signal of the location that requires the value.

Signals vs useState()

• useSignal() => getter + setter
• useState() => value + setter

useState() is not reactive. React does not know of the location that requires the value, therefore must re-renders the whole component when calling the setter.

(Reference)

Signals in frameworks

SolidJS

import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);

  setInterval(() => setCount(count() + 1), 1000);

  return <div>Count: {count()}</div>;
}

Qwik

export default component$(() => {
  const count = useSignal(0);

  return (
    <>
      <button onClick$={() => count.value++}>Increment</button>
      Count: {count.value}
    </>
  );
});

Preact

import { signal } from "@preact/signals";

const count = signal(0);

function Counter() {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => count.value++}>click me</button>
    </div>
  );
}

Vue

• Vue has a guide on reactivity that compares signals with Vue's Composition API.
• Evan You writes Solid style signals in Vue in ~10 lines.
• Evan You writes Angular style signals in Vue in ~15 lines.

Angular

Angular has announced some prototyping work around adding signals as a reactive primitive in Angular.