📡 useSupaRealtime(table, event, callback)

Subscribing to Postgres sockets inside a React.useEffect tends to create severe memory leaks and duplicate socket listener clusters across hot-reloads. The useSupaRealtime React Hook cleanly subscribes to Supabase Realtime postgres_changes events.

It guarantees safe auto-cleanup on component unmount and forces strong un-duplicated references!

Real-World Example

"use client";
import { useSupaRealtime } from "next-supa-utils/client";
import { useState } from "react";

export default function CommentStream() {
  const [messages, setMessages] = useState([]);

  useSupaRealtime("comments", "INSERT", (payload) => {
    // payload.new contains the raw inserted data row from public.comments
    setMessages((prev) => [...prev, payload.new]);
  });

  return (
    <ul>
      {messages.map((m) => (
        <li key={m.id}>{m.text}</li>
      ))}
    </ul>
  );
}

Signature Requirements

Parameters:

1. table (string): The precise database table name to listen for Postgres activities entirely (e.g. "messages", "users_profile").
2. event ("INSERT" | "UPDATE" | "DELETE" | "*"): The trigger event type matching Postgres standards. Setting this to * captures all DML database maneuvers.
3. callback ((payload: RealtimePayload) => void): Natively bounds custom executions fired on each event stream trigger.
4. schema (string, default fallback: "public"): The mapped database schema. Usually stays on Public unless accessing segregated vault metrics.