A state helper that simulates useState for Remix v3

counter.tsx

import type { Remix } from "@remix-run/dom";
import { press } from "@remix-run/events/press";

import { state } from "./state";

export function Counter(this: Remix.Handle, { initial }: { initial?: number }) {
  let [count, setCount] = state(this, initial ?? 0);

  return () => (
    <button type="button" on={[press(() => setCount((c) => c + 1))]}>
      Count: <span>{count()}</span>
    </button>
  );
}

state.ts

import type { Remix } from "@remix-run/dom";

export function state<T>(handle: Remix.Handle, initial: T) {
  let value = initial;

  return [
    () => value,
    (newValueOrFn: T | ((current: T) => T), renderFn?: Remix.Task) => {
      if (typeof newValueOrFn === "function") {
        value = (newValueOrFn as (current: T) => T)(value);
      } else {
        value = newValueOrFn;
      }
      handle.update(renderFn);
    },
  ] as const;
}