name: liveview-patterns\ndescription: \"Build LiveView: async data (assign_async), PubSub (check connected?), phx-change events, form components/modals/uploads, streams for lists, live_patch. Use when handling interactions, debugging events, or tracking Presence.\"\neffort: medium\nuser-invocable: false\npaths:
\n\n\nAsh projects: Use
\nash-frameworkskill forAshPhoenix.Form. Lifecycle:AshPhoenix.Form.validate/3onphx-change,AshPhoenix.Form.submit/2on submit,to_form/1for HEEx. Do not useEcto.Changeset.cast/3.
Reference for building with Phoenix LiveView 1.0/1.1.
\nassign_async. SEO routes: connected? guard + cache-backed disconnected branch (crawlers read that HTML){:error, changeset} first, not viewport/JShidden_input if not directly editableassign_new FOR LIFECYCLE VALUES — assign_new skips the function if key exists. Use assign/3 for locale, current user, or any value refreshed every mount{:error, %Ecto.Changeset{}} EXPLICITLY — Bare {:error, _} merges changeset and non-changeset errors; the form silently never re-renders validation errors. Handle other errors separately| Pattern | \n3K items | \n10K users × 10K items | \n
|---|---|---|
| Regular assigns | \n~5.1 MB | \n~10+ GB | \n
| Streams | \n~1.1 MB | \nMinimal (O(1)) | \n
Decision: Lists with >100 items → Use streams, not assigns
\ndef mount(%{\"slug\" => slug}, _session, socket) do\n # Extract needed values BEFORE the closure\n scope = socket.assigns.current_scope\n\n {:ok,\n socket\n |> assign_async(:org, fn -> {:ok, %{org: fetch_org(scope, slug)}} end)}\nend\ndef mount(_params, _session, socket) do\n {:ok, stream(socket, :items, Items.list_items())}\nend\n\n# Insert/update/delete\nstream_insert(socket, :items, item, at: 0)\nstream_delete(socket, :items, item)\nFor public/SEO-visible routes (marketing, articles, product listings) the\ndisconnected render IS the HTML crawlers see. Fetch from a cache there, real\ndata on connect:
\ndef mount(_params, _session, socket) do\n products =\n if connected?(socket),\n do: Catalog.list_products(),\n else: Cache.get_products() || []\n\n {:ok, assign(socket, products: products)}\nend\nEmpty list → <noscript>-friendly skeleton. Cache → :persistent_term, ETS,\nor Cachex. This satisfies Iron Law #1 AND keeps Googlebot/GPTBot happy.
def mount(_params, _session, socket) do\n if connected?(socket), do: Chat.subscribe(room_id)\n {:ok, socket}\nend\nSame LiveView, different params? → patch / push_patch\nDifferent LiveView, same live_session? → navigate / push_navigate\nDifferent live_session or non-LiveView? → href / redirect\nDoes component need BOTH internal state AND event handling?\n│\n├── YES → Does it encapsulate APPLICATION logic (not just DOM)?\n│ ├── YES → Use LiveComponent ✅\n│ └── NO → Refactor to function component with parent handling\n│\n└── NO → Use Function Component ✅\nOfficial guidance: \"Prefer function components over live components\"
\n| Wrong | \nRight | \n
|---|---|
DB queries without assign_async | \nUse assign_async for mount queries (SEO routes: connected? + cached dead render) | \n
assign(socket, items: list) for lists | \nstream(socket, :items, list) | \n
PubSub subscribe without connected? | \nif connected?(socket), do: subscribe() | \n
| Passing socket to context functions | \nExtract socket.assigns first | \n
Business logic in handle_event | \nDelegate to context | \n
assign_new for locale/user in hooks | \nassign/3 (must run every mount) | \n
For detailed patterns, see:
\n${CLAUDE_SKILL_DIR}/references/async-streams.md - assign_async, stream_async, streams${CLAUDE_SKILL_DIR}/references/forms-uploads.md - Forms, validation, file uploads${CLAUDE_SKILL_DIR}/references/components.md - Function components, LiveComponents${CLAUDE_SKILL_DIR}/references/pubsub-navigation.md - PubSub, navigation, JS commands${CLAUDE_SKILL_DIR}/references/js-interop.md - Third-party JS libraries, phx-update=\"ignore\", hooks${CLAUDE_SKILL_DIR}/references/channels-presence.md - Phoenix Channels, Presence, token auth