Reactive State

Vueref

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">
    Count: {{ count }}
  </button>
</template>

It stores the value in a ref so the component reacts automatically when it changes.

Vue docs

ReactuseState

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

  function increment() {
    setCount(prevCount => prevCount + 1);
  }

  return (
    <button onClick={increment}>
      Count: {count}
    </button>
  );
}

It stores the value with useState and re-renders the component when it updates.

React docs

Angularsignal

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <button (click)="increment()">
      Count: {{ count() }}
    </button>
  `
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(val => val + 1);
  }
}

It stores the value in a signal and updates it with update so the change propagates automatically.

Angular docs