LiveView Rendering Lifecycle

Critical Understanding

LiveView renders happen in TWO phases:

Static/Disconnected Render - Initial HTTP request, server-side HTML

• No WebSocket connection

• No live functionality yet

• connected?(socket) returns false

Connected Render - WebSocket established, full LiveView active

• Live updates work

• Events are handled

• connected?(socket) returns true

The Problem: Uninitialized Assigns

During static render, socket assigns may not be fully initialized:

❌ DANGEROUS - Can crash during static render

def render(assigns) do user_name = assigns.current_user.name # KeyError if not set! ~H"<p>Hello <%= user_name %></p>" end

Error: KeyError: key :current_user not found

The Solution: Defensive Access

Always use safe access patterns:

✅ SAFE - Works in both render phases

def render(assigns) do user_name = Map.get(assigns, :current_user, %{name: "Guest"}).name ~H"<p>Hello <%= user_name %></p>" end

✅ BETTER - Initialize in mount

@impl true def mount(_params, session, socket) do socket = assign(socket, :current_user, get_user(session)) {:ok, socket} end

Best Practices

1. Initialize All Assigns in mount/3

Always initialize every assign you'll use:

@impl true def mount(_params, _session, socket) do socket = socket |> assign(:user, nil) |> assign(:loading, false) |> assign(:data, []) |> assign(:error, nil)

{:ok, socket} end

2. Use Map.get for Optional Assigns

When accessing assigns that might not exist:

❌ BAD

defp render_user(socket) do socket.assigns.current_user.name end

✅ GOOD

defp render_user(socket) do case Map.get(socket.assigns, :current_user) do nil -> "Guest" user -> user.name end end

✅ ALSO GOOD

defp render_user(socket) do Map.get(socket.assigns, :current_user, %{name: "Guest"}).name end

3. Use Pattern Matching Safely

❌ BAD - Crashes if not a map with :name

defp format_user(%{name: name}), do: name

✅ GOOD - Handles nil case

defp format_user(%{name: name}), do: name defp format_user(_), do: "Unknown"

✅ ALSO GOOD - Check first

defp format_user(user) when is_map(user), do: Map.get(user, :name, "Unknown") defp format_user(_), do: "Unknown"

4. Use assigns_to_attributes for Components

Component with dynamic assigns

def card(assigns) do ~H""" <div class="card" {@rest}> <%= render_slot(@inner_block) %> </div> """ end

Usage

<.card id="my-card" data-role="admin"> Content </.card>

Connected Check

Use connected?/1 for operations that only work with WebSocket:

@impl true def mount(_params, _session, socket) do socket = if connected?(socket) do # Only run when WebSocket is connected Phoenix.PubSub.subscribe(MyApp.PubSub, "updates") schedule_refresh() socket else # Static render - skip expensive operations socket end

socket = assign(socket, :data, load_initial_data()) {:ok, socket} end

Why? PubSub subscriptions, timers, and live updates only work when connected.

Handle Params Considerations

handle_params/3 is called in both render phases:

@impl true def handle_params(%{"id" => id}, _uri, socket) do

This runs during static AND connected render

post = Posts.get_post!(id) # OK - database queries work in both phases

if connected?(socket) do # Only subscribe when connected Phoenix.PubSub.subscribe(MyApp.PubSub, "post:#{id}") end

{:noreply, assign(socket, :post, post)} end

Common Lifecycle Mistakes

❌ Mistake 1: Assuming Assigns Exist

def render(assigns) do ~H""" <p>Count: <%= @count %></p> <!-- Crash if @count not initialized --> """ end

✅ Fix: Initialize in mount

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

def render(assigns) do ~H""" <p>Count: <%= @count %></p> <!-- Safe now --> """ end

❌ Mistake 2: Subscribing in Both Phases

@impl true def mount(_params, _session, socket) do

BAD - Subscribes during static render (doesn't work)

Phoenix.PubSub.subscribe(MyApp.PubSub, "topic") {:ok, socket} end

✅ Fix: Check connected?

@impl true def mount(_params, _session, socket) do if connected?(socket) do Phoenix.PubSub.subscribe(MyApp.PubSub, "topic") end

{:ok, socket} end

❌ Mistake 3: Expensive Operations in Static Render

@impl true def mount(_params, _session, socket) do

BAD - Runs expensive query twice (static + connected)

data = run_expensive_query() {:ok, assign(socket, :data, data)} end

✅ Fix: Defer to connected phase

@impl true def mount(_params, _session, socket) do socket = if connected?(socket) do # Only run expensive operations when connected assign(socket, :data, run_expensive_query()) else # Use placeholder data for static render assign(socket, :data, []) end

{:ok, socket} end

Lifecycle Flow

1. HTTP Request arrives ↓
2. mount/3 called (connected? = false) ↓
3. handle_params/3 called (connected? = false) ↓
4. render/1 called (STATIC HTML generated) ↓
5. HTML sent to browser ↓
6. Browser connects WebSocket ↓
7. mount/3 called AGAIN (connected? = true) ↓
8. handle_params/3 called AGAIN (connected? = true) ↓
9. render/1 called (sent over WebSocket) ↓
10. LiveView now active and reactive

Debugging Tips

Check if LiveView is connected

def render(assigns) do ~H""" <div data-connected={@connected?}> <!-- Shows connection state --> </div> """ end

@impl true def mount(_params, _session, socket) do {:ok, assign(socket, :connected?, connected?(socket))} end

Log render phases

@impl true def mount(_params, _session, socket) do IO.puts("Mount called - Connected: #{connected?(socket)}") {:ok, socket} end

@impl true def handle_params(params, _uri, socket) do IO.puts("Handle params - Connected: #{connected?(socket)}") {:noreply, socket} end

Safe Assign Access Helpers

Create helper functions for safe access:

defp get_assign(socket, key, default \ nil) do Map.get(socket.assigns, key, default) end

defp has_assign?(socket, key) do Map.has_key?(socket.assigns, key) end

Usage

def some_function(socket) do if has_assign?(socket, :current_user) do user = get_assign(socket, :current_user) # Do something with user end end

Testing Both Phases

test "renders correctly in both phases", %{conn: conn} do

Static render (disconnected)

{:ok, _view, html} = live(conn, "/page") assert html =~ "Expected content"

Now connected

Can test live interactions

end

test "initializes assigns in mount", %{conn: conn} do {:ok, view, _html} = live(conn, "/page")

Check assigns are set

assert view.assigns.count == 0 assert view.assigns.user != nil end

Quick Reference

Safe Patterns

✅ Initialize in mount

assign(socket, :key, default_value)

✅ Use Map.get for optional

Map.get(socket.assigns, :key, default)

✅ Check connected for side effects

if connected?(socket), do: subscribe()

✅ Pattern match with fallback

def helper(%{name: name}), do: name def helper(_), do: "default"

Unsafe Patterns

❌ Direct access without initialization

socket.assigns.key

❌ Subscribe without checking

Phoenix.PubSub.subscribe(...)

❌ Expensive ops in both phases

mount(...) do data = expensive_query() end

❌ Pattern match without fallback

def helper(%{name: name}), do: name