Getting Started

Counter

Assigns become props; clicks become handle_event

props
phx-click
local state

Key concepts

Every assign that is not a reserved name is passed to React as a prop. count lives on the server; the step slider lives in React's useState, and the server never sees it.

counter_live.ex

defmodule MyAppWeb.CounterLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :count, 0)}
  end

  def render(assigns) do
    ~H"""
    <.react name="Counter" count={@count} socket={@socket} />
    """
  end

  def handle_event("set_count", %{"value" => value}, socket) do
    {:noreply, assign(socket, :count, value)}
  end
end

How it works

Clicking a button calls pushEvent("set_count", …), which reaches handle_event/3 exactly as phx-click would. The server reassigns count, LiveReact diffs the props and sends only what changed, and React re-renders.

Dragging the slider changes nothing on the server — that is the point. Local UI state stays local, and only what the server owns round-trips.