Signals and computed vs useState and derived values

A ticket site's seat-hold banner shows how long a held seat stays reserved. The Angular version:

The React port keeps the filter box in its own component:

function HoldBanner({ now }) {
  const left = formatLeft(600 - now);
  return (
    <>
      <SeatFilter />
      <p>{left} left</p>
    </>
  );
}

function SeatFilter() {
  const [filter, setFilter] = useState('');
  return <input value={filter} onChange={(e) => setFilter(e.target.value)} />;
}

With now at 120 in both, a fan clicks into the filter box and types row, one key at a time. Angular checks the view when she clicks (the box's (focus) handler runs) and after each key, which calls filter.set(…); each check reads left() once.

A payments ledger's Angular review screen flags large transfers:

Each check of the view reads badge() twice: for its text and for its colour. The view is checked once at first display, then once after each of 5 edits that set amountCents to 5200, 7000, 9900, 12000 and 150000.

A chat app's channel picker starts on the first channel of the list it is given. The Angular version:

The React port keys the picker by its list:

function ChannelBar({ channels }) {
  return <ChannelPicker key={channels.join()} channels={channels} />;
}

function ChannelPicker({ channels }) {
  const [selected, setSelected] = useState(channels[0]);
  return (
    <select value={selected} onChange={(e) => setSelected(e.target.value)}>
      {channels.map((c) => <option key={c}>{c}</option>)}
    </select>
  );
}

In both, the user picks random. The list then reloads from the server as ['announcements', 'general', 'random', 'help'].

A video app's "Up next" panel shows how many minutes of episodes are queued and how far into the current episode the viewer is. The Angular version:

Its template reads total() and position() once per check. The React port, with one line still to write:

function UpNext({ queue, position }) {
  // the line that gives total
  return <p>{queue.length} queued · {total} min · {position} s in</p>;
}

The player sets position to 1, 2, 3, 4 and 5, then adds one episode to the queue (a new array). Angular checks the view after each change; React's parent renders UpNext again after each one.

A teammate who knows Angular well says: "useState is React's signal, useMemo is computed(), and I'll port our linkedSignals with useEffect." Correct each claim.

A ticket site's Angular seat-hold timer shows minutes until the last minute, then seconds:

A timer sets secondsLeft once a second, 65 times (119 down to 55); with the set to 60 it also sets lastMinute to true. minutesLeft stays 2. The view is checked at first display and after each second, and each check reads label() twice (its text and its aria-label).

A payments ledger's account header shows a balance, a count of pending entries and how long ago it synced. The Angular version:

The React port:

function AccountHeader({ entries, secondsAgo }) {
  return (
    <>
      <Balance entries={entries} />
      <Pending entries={entries} />
      <Synced secondsAgo={secondsAgo} />
    </>
  );
}

One second passes: Angular sets secondsAgo to 1 and the template reads all three computeds once; React's parent renders AccountHeader again with secondsAgo 1 and the same entries.