react-typed-events

typed-events — React

This skill builds on typed-events. Read it first for foundational concepts including factory selection, cleanup patterns, and SSR behaviour.

Setup

import * as z from "zod";
import { createBroadcastEvent } from "@stephansama/typed-events";
import { useListeners } from "@stephansama/typed-events/react";

export const appEvents = createBroadcastEvent("my-app", {
  update: z.object({ value: z.number() }),
  reset: z.object({}),
});

Hooks and Components

useListener — single event

import { useListener } from '@stephansama/typed-events/react';
import { animationEvent } from './events';

function Canvas() {
  useListener(animationEvent, ({ data }) => {
    draw(data.x, data.y);
  });

  return <canvas />;
}

Registers the listener on mount and removes it on unmount via useEffect cleanup.

useListeners — multiple events from a map

import { useMemo } from 'react';
import { useListeners } from '@stephansama/typed-events/react';
import { appEvents } from './events';

function Dashboard() {
  const handlers = useMemo(() => ({
    update: ({ data }: { data: { value: number } }) => setValue(data.value),
    reset: () => setValue(0),
  }), []);

  useListeners(appEvents, handlers);

  return <div />;
}

Registers all handlers on mount and removes them all on unmount.

Common Mistakes

HIGH Inline listener object triggers re-registration every render

Wrong:

function MyComponent() {
  useListeners(appEvents, {
    update: ({ data }) => setValue(data.value), // new object each render
  });
}

Correct:

function MyComponent() {
  const handlers = useMemo(
    () => ({
      update: ({ data }) => setValue(data.value),
    }),
    [],
  );

  useListeners(appEvents, handlers);
}

useListeners has [map, listeners] in its useEffect dependency array. An inline object literal is a new reference every render, causing the effect to re-run: the old listener is removed and a new one is registered on every render.