How to create a simple react hook for stateful events?

[lewxdev]

I'm trying to create a typed react hook for stateful events, this may be more of a TypeScript question but it's directly related to the lib, what am I doing wrong here?

import { useEffect, useState } from "react";
import { socket } from "@/socket";
import type { ServerToClientEvents } from "@/types";

export const useSocketEvent = <K extends keyof ServerToClientEvents>(type: K) => {
  const [result, setResult] = useState<Parameters<ServerToClientEvents[K]>>();
  useEffect(() => {
    const callback = (...args: Parameters<ServerToClientEvents[K]>) => {
      setResult(args);
    }
    socket.on(type, callback);
    return () => {
      socket.off(type, callback);
    };
  }, [type]);
  return result;
};

when using the callback as an argument to on or off, I get the following error:

ts(2345)
Argument of type:

(...args: Parameters<ServerToClientEvents[K]>) => void

is not assignable to parameter of type:

FallbackToUntypedListener<
  K extends "connect" | "connect_error" | "disconnect"
    ? SocketReservedEvents[K]
    : K extends "update" | "clientsCount"
    ? ServerToClientEvents[K]
    : never
>

it seems the second argument is expected to be never

[darrachequesne]

Hmm... that's a great question. Using the explicit event name seems to work:

export const useSocketEvent = <K extends keyof ServerToClientEvents>(type: K) => {
  const [result, setResult] = useState<Parameters<ServerToClientEvents[K]>>();
  useEffect(() => {
    const callback = (...args: Parameters<ServerToClientEvents["ping"]>) => {
      setResult(args);
    }
    socket.on("ping", callback);
    return () => {
      socket.off("ping", callback);
    };
  }, [type]);
  return result;
};

Not sure why the TypeScript compiler errors with the generic type. Have you found a solution?

[lewxdev]

@darrachequesne our solution was silly, we asserted the callback as never. open to hearing better alternative solutions though!

const callback = ((...args: Parameters<ServerToClientEvents["ping"]>) => {
  setResult(args);
}) as never;