Events

Server Events

push_event on the server reaches handleEvent in React

push_event
handleEvent
toasts

Key concepts

push_event/3 sends a one-off message from the server straight to the client — it is not a prop and does not go through a diff. React picks it up with handleEvent, registered once via useEffect.

ServerEvents.jsx

import React, { useEffect } from "react";
import { useLiveReact } from "live_react";
import { Toaster, toast } from "sonner";

export function ServerEvents() {
  const { handleEvent } = useLiveReact();

  useEffect(() => {
    handleEvent("info", ({ message }) => toast.info(message));
    handleEvent("error", ({ message }) => toast.error(message));
  }, []);

  return <Toaster />;
}

How it works

Clicking a button is an ordinary phx-click, handled by handle_event/3 on the server exactly as it would be outside LiveReact. Instead of reassigning a prop, the handler calls push_event/3 with an event name and a payload map.

On the client, handleEvent("info", callback) fires that callback the moment the event arrives, independently of any render — this is how a server-driven toast, a sound, or a one-shot animation reaches React without being modeled as state.