Peter Mekhaeil


Signals are reactive primitives for managing application state.


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.


Signals in frameworks


import { createSignal } from "solid-js";

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

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

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


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

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


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

const count = signal(0);

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



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