example/src/pages/index.tsx

import { trpcClient } from "@/trpc";
import { webcrypto } from "crypto";
import Head from "next/head";
import { useState } from "react";

export default function Home() {
  const [enabled, setEnabled] = useState(false);
  const [messages, setMessages] = useState<Array<{ id: string; idk: number }>>(
    []
  );

  trpcClient.numbers.useSubscription(
    {
      count: 30,
    },
    {
      enabled,
      onData(data) {
        setMessages((prev) => [...prev, data]);
      },
    }
  );

  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <button onClick={() => setEnabled((p) => !p)}>
          {enabled ? "Stop" : "Start"}
        </button>

        <div
          style={{
            backgroundColor: "lightgray",
            maxWidth: "50%",
            padding: ".5em",
            margin: ".5em",
          }}
        >
          {messages.map((m) => (
            <div key={m.id}>{m.idk}</div>
          ))}
        </div>
      </main>
    </>
  );
}